three.js - 我如何动态更改物体的不透明度？

Question

这是我的对象：

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;

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

谢谢 :-)

- BorisD

---

当使用不透明度功能时，我认为牢记这些是很好的。这是一门课程的材料，所以您可能需要观看之前的视频，但它们很短。 - kon psych

Answer 1

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;

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

更新

该属性现在简单地称为material：

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

- George Profenza

---

注意，您必须将 material.transparent = true 和 opacity 都设置好。 - Drew Noakes

可能更好的是 0.5 + 0.5*Math.sin(new Date().getTime() * .0025); ;) - Hotted24

从 R69 开始，在运行时更改对象的不透明度，我必须使用 THREE.Object3D.material.opacity。 - MLK.DEV

"transparent" 属性的注释应包含在答案中。 - Dois

还有效吗？我的“对象”没有材料属性，而是有材料属性吗？ - QurakNerd

Answer 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;

- BorisD

---

能否稍微解释一下呢？ - K-Dawg

Answer 3

我知道这个问题很老，但是我想从我使用的情况给出我的答案，以防有人需要。使用three.js，我通过Greensock的TweenMax/TweenLite进行了补间动画。借助它，我能够补间任何对象的任何属性，并且它运行顺畅。请查看该库此处。我所需要的只是补间属性：

TweenLite.to(object, duration, properties);

其中的 duration 单位为秒，properties 是一个对象。在使用 three.js 时，需要注意确保对象参数的具体性。例如，在更改网格的透明度时，不能简单地使用下述方式：

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

相反，你需要更具体地写出来。

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

我希望这能对某些人有所帮助。缓动是真的很棒！

- Martavis P.