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;

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

谢谢 :-)

Answer 1

THREE.MeshLambertMaterialextends 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指出这一点)

我知道three.js'引用'存在问题,但您可以查看您使用的类的源文件,并查看它具有的所有属性/方法以及是否扩展了其他内容.

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;

Answer 3

我知道这个问题已经很老了但是我想从我用过的东西中得到答案,以防有人需要它.使用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});

我希望这可以帮助别人.补间非常棒!