三。js -如何动态改变对象的不透明度?

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:

在init()中创建这个对象之后;函数，我可以直接进入物体改变位置，像这样

object.position.x = 15;

Now the question is how can I change the opacity of the texture???

现在的问题是如何改变纹理的不透明度?

Thanks :-)

谢谢:-)

3 个解决方案

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

三。MeshLambertMaterial延伸三个。材料意味着它继承了不透明度属性，所以你需要做的就是访问你物体上的材料，改变材料的不透明度:

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)

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

I know that there are problems with the three.js 'reference', but you can have a look at the source file for the class you use and see all the properties/methods it has and if it extends anything else.

我知道这三点有问题。js 'reference'，但是你可以看看你使用的类的源文件，看看它的所有属性/方法，如果它扩展了其他的东西。

#2

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;

#3

I know this question is very old but I wanted to give my answer from what I used in case someone needs it. With three.js, I used tweening through Greensock's TweenMax/TweenLite. With that, I was able to tween any property of any object and it ran smoothly. Check out the library here. All I needed to tween the properties was:

我知道这个问题很老，但我想用我的答案来回答，以防有人需要它。有三个。js，我用了绿袜子的TweenMax/TweenLite。有了这个，我就能在任何物体的任何属性之间进行补间，而且它运行得很顺利。看看这里的图书馆。我所需要的属性是:

TweenLite.to(object, duration, properties);

where duration is in seconds and properties are in an object. The "gotcha" for this, especially while using three.js, is to make sure you get specific with the object parameter. For example, per this question, if you are changing the opacity of a mesh, you cannot do

持续时间在秒内，属性在一个对象中。这是“gotcha”，特别是在使用3的时候。js，就是要确保你得到的对象参数是特定的。例如，在这个问题中，如果你正在改变一个网格的不透明度，你就不能做。

TweenLite.to(mesh, 2, {material.opacity: 0});

rather, you need to be more specific and write

相反，你需要更具体、更有针对性。

TweenLite.to(mesh.material, 2, {opacity: 0});

I hope this helps someone. Tweening is really awesome!

我希望这能帮助别人。渐变真的是太棒了!

#1