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

question from:https://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity

Answer 1

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;