如何在 Three.js 中为对象渲染淡入淡出的动画？答案

【问题标题】：How can I render a fade in animation for an object in Three.js?如何在 Three.js 中为对象渲染淡入淡出的动画？
【发布时间】：2019-06-03 20:09:41
【问题描述】：

我是 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');
}

我预计不透明度可以在 1 秒内从 0 变为 1，但实际上在第一次点击时为 0.3，在第二次点击时为 1。

【问题讨论】：

标签： three.js

【解决方案1】：

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

一个简单的方法是使用补间库，这里是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 });

【讨论】：