Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 827
BorisD Avatar asked Dec 14 '11 09:12

BorisD


People also ask

How can you change the transparency of an object?

Click Item Tools tab Appearance panel. Move the Transparency slider to adjust how transparent or opaque the selected object is.

How to make transparent cube in three js?

geometry = new THREE. PlaneGeometry( 1, 1 ); material = new THREE. MeshBasicMaterial( {color: 0x00ff00, side: THREE. DoubleSide, transparent:true, opacity:0.2}); planeX = new THREE.


2 Answers

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;  
like image 89
George Profenza Avatar answered Sep 30 '22 14:09

George Profenza


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; 
like image 25
BorisD Avatar answered Sep 30 '22 15:09

BorisD