Question

166

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

rated 0 times [ 167] [ 1] / answers: 1 / hits: 69597 / 13 Years ago, wed, december 14, 2011, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aden

Add To Favorites

Follow

Total Points: 369

Total Questions: 100

Total Answers: 83

Location: Australia

Member since Tue, Oct 19, 2021

3 Years ago

answered 13 Years ago leog · Accepted Answer

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;