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

Posted 2023-02-27

【中文标题】three.js - 如何动态更改对象的不透明度？

【英文标题】：three.js - How can I dynamically change object's opacity?

【发布时间】：2012-01-20 02:09:33

【问题描述】：

这是我的对象：

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;

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

谢谢:-)

【问题讨论】：

我认为在使用不透明度功能时记住these 会很好。它是课程中的材料，因此您可能需要观看以前的视频，但它们很短。

【参考方案1】：

THREE.MeshLambertMaterial extends 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; 

【讨论】：

请注意，您必须设置material.transparent = true 以及opacity。

0.5 + 0.5*Math.sin(new Date().getTime() * .0025); 可能会更好;)

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

答案中应包含“透明”属性的注释。

还能用吗？我的“对象”没有材料属性而是有材料？

【参考方案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】：

我知道这个问题已经很老了，但我想从我使用的内容中给出答案，以防有人需要。对于three.js，我通过Greensock 的TweenMax/TweenLite 使用了补间。有了它，我可以对任何对象的任何属性进行补间，并且运行顺利。查看图书馆here。我只需要对属性进行补间：

TweenLite.to(object, duration, properties);

其中持续时间以秒为单位，属性在对象中。对此的“陷阱”，尤其是在使用 three.js 时，是为了确保您对 object 参数有所了解。例如，根据这个问题，如果您要更改网格的不透明度，则不能这样做

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

相反，你需要更具体地写

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

我希望这对某人有所帮助。补间真的很棒！