three.js - 如何动态更改对象的不透明度？

这是我的目标：three.js - 如何动态更改对象的不透明度？

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

现在

我在init建立这个对象（）之后;功能，我可以直接到该对象并改变他的位置，这样的：

object.position.x = 15;

现在的问题是我怎么可以改变纹理的透明度???

感谢:-)

来源

2011-12-14 BorisD

我认为在使用不透明度功能时，请谨记[https://www.udacity.com/course/viewer#!/c-cs291/l-91376562/m-103530762]。这是来自课程的材料，因此您可能需要观看以前的视频，但它们很短。 – 2014-03-28 20:17:33

THREE.MeshLambertMaterial延伸THREE.Material这意味着它继承了opacity财产，因此，所有你需要做的就是访问对象上的材质，并改变材料的不透明度：

object.materials[0].opacity = 1 + Math.sin(new Date().getTime() * .0025);//or any other value you like

另请注意，材质必须将它的transparent属性设置为true。

object.materials[0].transparent = true;

（谢谢德鲁和的DOI指出这一点）

我知道有与three.js所“参考”的问题，但你可以看看该类的源文件你可以使用并查看它拥有的所有属性/方法，以及它是否扩展其他任何内容。

来源

2011-12-14 13:53:01

谢谢乔治......我想你是我的three.js GURU; - ）...我找到了我自己的解决方案，它花了我一段时间......但它又是了解它的最好方法 – BorisD 2011-12-14 15:18:32

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;

来源

2011-12-14 15:20:36 BorisD

我知道这个问题很古老，但我想给我的答案从我使用的情况下，有人需要它。随着three.js，我通过Greensock的TweenMax/TweenLite补间。这样，我就能够补间任何物体的任何财产，并顺利运行。检查图书馆here。所有我需要补间的属性是：

TweenLite.to(object, duration, properties);

其中持续时间在秒和属性中的对象。这个“陷阱”，尤其是在使用three.js时，是为了确保你对对象参数有特定的含义。例如，每这个问题，如果要更改网格的不透明度，你不能这样做

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

相反，你需要更具体，写

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

我希望这可以帮助别人。补间真的很棒！

来源

2013-12-13 23:38:56

three.js - 如何动态更改对象的不透明度？

回答

相关问题