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

three.js - How can I dynamically change object's opacity?

本文关键字：改变 对象 不透明度 动态 何动态 js      更新时间：2023-09-26

这是我的对象:

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;

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

谢谢:-)

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; 

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;

我知道这个问题很老了，但我想从我使用的情况下给出我的答案，以防有人需要它。对于three.js，我使用Greensock的TweenMax/TweenLite进行渐变。有了它，我可以对任何物体的任何属性进行补间，并且它运行得很顺利。在这里查看图书馆。我所需要做的就是:

TweenLite.to(object, duration, properties);

，其中持续时间以秒为单位，属性以对象为单位。这个问题的"陷阱"是，特别是在使用three.js时，要确保您使用特定的object参数。例如，根据这个问题，如果你要改变一个网格的不透明度，你不能做

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

更确切地说，你需要更具体地写

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

我希望这能帮助到别人。补间真的很棒!

相关文章：