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

javascript 3d three.js
BorisD picture BorisD · Dec 14, 2011 · Viewed 55.5k times · Source

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 :-)

Answer

George Profenza picture George Profenza · Dec 14, 2011

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;

Related questions

Rotate camera in Three.js with mouse

I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, …

Read More
How can I rotate a mesh by 90 degrees in ThreeJS?

I have a mesh that I want to rotate by 90 degrees inside Three JS. Here is the image of the current situation: I want the selected mesh to be rotated parallelly to the large mesh. I have tried rotating the …

Read More
Three.js - Scale model with scale.set() or increase model size?

What is the best practise for scaling 3d models in Three.js (or other 3d renderers)? Here is an example I just faced: I load a model in and realise the size of the model is too small. I then …

Read More