三.js - 如何动态更改对象的不透明度? [英] three.js - How can I dynamically change object's opacity?

问题描述

这是我的对象:

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

现在我在 init() 中创建了这个对象之后；功能，我可以直接去对象并改变他的位置，就像这样:

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???

谢谢:-)

推荐答案

THREE.MeshLambertMaterial extends THREE.Material 这意味着它继承了 opacity 属性，因此您需要做的就是访问对象上的材质，并更改材质的不透明度:

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

另请注意，材质必须将其 transparent 属性设置为 true.

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

object.materials[0].transparent = true;

(感谢 Drew 和 Dois 指出这一点)

(Thank you Drew and Dois for pointing this out)

更新

该属性现在只是material:

the property is now simply material:

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

这篇关于三.js - 如何动态更改对象的不透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！