Javascript 三.js - 如何动态更改对象的不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8502150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
three.js - How can I dynamically change object's opacity?
提问by BorisD
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 :-)
谢谢 ：-）
回答by George Profenza
THREE.MeshLambertMaterialextends THREE.Materialwhich means it inherits the opacityproperty, so all you need to do is access the material on your object, and change the opacity of the material:
THREE.MeshLambertMaterialextendsTHREE.Material这意味着它继承了该opacity属性，因此您需要做的就是访问对象上的材质，并更改材质的不透明度：
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 transparentproperty set to true.
另请注意，材料必须将其transparent属性设置为 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.
我知道three.js“引用”存在问题，但是您可以查看您使用的类的源文件，并查看它具有的所有属性/方法，以及它是否扩展了其他任何内容。
回答by BorisD
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;
回答by Martavis P.
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:
我知道这个问题很老了，但我想从我使用的内容中给出答案，以防有人需要它。对于three.js，我通过Greensock 的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
其中持续时间以秒为单位，属性在一个对象中。对此的“陷阱”，尤其是在使用three.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!
我希望这可以帮助别人。补间真的很赞！
