three.js - How can I dynamically change object's opacity?

Question

This is my object:

var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( "image.png" ) } ) );
object.position.set(2, 3, 1.5);

now after I've created this object in init(); function, I can directly go to the object and change his position,like this:

object.position.x = 15;

Now the question is how can I change the opacity of the texture???

Thanks :-)

I think it's good to keep [these](https://www.udacity.com/course/viewer#!/c-cs291/l-91376562/m-103530762) in mind when using opacity feature. It is material from a course so you may need to watch previous videos but they are short. — kon psych, Mar 28 '14 at 20:17

George Profenza · Accepted Answer · 2020-06-11T11:33:00.460

82

THREE.MeshLambertMaterial extends THREE.Material which means it inherits the opacity property, so all you need to do is access the material on your object, and change the opacity of the material:

object.materials[0].opacity = 1 + Math.sin(new Date().getTime() * .0025);//or any other value you like

Also note that the material must have it's transparent property set to true.

object.materials[0].transparent = true;

(Thank you Drew and Dois for pointing this out)

Update

the property is now simply material:

// enable transparency
object.material.transparent = true;
// set opacity to 50%
object.material.opacity = 0.5;

edited Jun 11 '20 at 11:33

answered Dec 14 '11 at 13:53

George Profenza

50,687
19
144
218

Thanks George...I guess you my three.js GURU ;-)... I found my own solution,it took me a while...but again it's the best way to understand it well – BorisD Dec 14 '11 at 15:18
26

Note that you must set `material.transparent = true` as well as the `opacity`. – Drew Noakes Jan 31 '14 at 22:55
1

`0.5 + 0.5*Math.sin(new Date().getTime() * .0025);` might be better ;) – Hotted24 Oct 21 '14 at 07:15
3

As of R69, I had to use `THREE.Object3D.material.opacity` to change an object's opacity at runtime. – MLK.DEV Apr 17 '15 at 14:29
1

The comment on the "transparent" attribute should be included in the answer. – Dois Jul 09 '15 at 06:08
1

Does still work? my "object" doesn't have a materials property it has material instead? – QurakNerd Jun 11 '20 at 09:42
1

@QurakNerd Thank you for pointing that out: I've updated the answer accordingly. (Can't believe it's been almost 9 years since I posted this) – George Profenza Jun 11 '20 at 11:33

score 13 · Answer 2 · answered Dec 14 '11 at 15:20

13

var map = THREE.ImageUtils.loadTexture( myJSONObject[i].url );
var material = new THREE.MeshLambertMaterial( { map: map, transparent: true } );
var object = new THREE.Mesh( geometry, material );

material.opacity = 0.6;

answered Dec 14 '11 at 15:20

BorisD

2,231
5
25
35

3

how about a bit of an explanation? – K-Dawg Aug 14 '19 at 16:43

score 9 · Answer 3 · answered Dec 13 '13 at 23:38

I know this question is very old but I wanted to give my answer from what I used in case someone needs it. With three.js, I used tweening through Greensock's TweenMax/TweenLite. With that, I was able to tween any property of any object and it ran smoothly. Check out the library here. All I needed to tween the properties was:

TweenLite.to(object, duration, properties);

where duration is in seconds and properties are in an object. The "gotcha" for this, especially while using three.js, is to make sure you get specific with the object parameter. For example, per this question, if you are changing the opacity of a mesh, you cannot do

TweenLite.to(mesh, 2, {material.opacity: 0});

rather, you need to be more specific and write

TweenLite.to(mesh.material, 2, {opacity: 0});

I hope this helps someone. Tweening is really awesome!

three.js - How can I dynamically change object's opacity?

3 Answers3

Linked

Related