Question

我是Three.js的新手，想在动画中添加淡入淡出功能，以将新的网格几何体添加到场景中。添加材料后，使材料的不透明度从0更改为1。我该怎么办？

我试图在GUI按钮下的功能之外定义不透明度，并且似乎更新动画不起作用

var opa = 0;

var MyUpdateLoop(){

requestAnimationFrame(MyUpdateLoop);

renderer.render(camera, scene);


//here is the problem

opa += 0.1;

}

function buildGui(){

    gui = new dat.GUI();

    var obj = {
        addBox: function(){
           var geometry= new THREE.BoxGeometry(20, height, 20);
           var material= new THREE.MeshPhongMaterial( {transparent:true, 
           opacity: opa} );
           var mesh = new THREE.Mesh(geometry, material);
           scene.add(mesh);
        }
    }

    gui.add(obj, 'addBox');
}

我希望不透明度可以在0到1秒之间从1变为1，但实际上第一次单击时为0.3，第二次单击时为1。

Answer 1

您需要更新对象的材质不透明度。

一种简单的方法是使用补间lib，这是TweenMax from GSAP

的示例

var geometry= new THREE.BoxGeometry(20, height, 20);
var material= new THREE.MeshPhongMaterial({ transparent: true, opacity: 0 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
TweenMax.to(material, 1, { opacity: 1 });

如何在Three.js中为对象渲染淡入淡出？

1 个答案: