javascript - 如何在 Three.js 中淡入/淡出背景？

Question

我是 Three.js 的新手，我仍在学习中。我有三个用于不同背景的按钮，但是当我单击它时，我想要淡入和淡出。

我正在将此代码用于我的按钮。

var material = new THREE.MeshBasicMaterial( {
    map: THREE.ImageUtils.loadTexture( 'pic.jpg' )
} );

var backgroundButton = document.getElementById('change-background-1');
backgroundButton.addEventListener('click', function(){
   material.map = THREE.ImageUtils.loadTexture('pic.jpg');
});

var backgroundButton = document.getElementById('change-background-2');
backgroundButton.addEventListener('click', function(){
   material.map = THREE.ImageUtils.loadTexture('pic1.jpg');
});

var backgroundButton = document.getElementById('change-background-3');
backgroundButton.addEventListener('click', function(){
   material.map = THREE.ImageUtils.loadTexture('pic2.jpg');
});

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

我该怎么做？

Answer 1

只需更改 Material 的不透明度值即可。

看一下: http://threejs.org/docs/index.html#Reference/Materials/Material

mesh.material.opacity = 1;

最简单的方法可能是使用补间引擎(例如:TweenMax)。

示例:


网格. Material .不透明度 = 0;
TweenMax.to(mesh.material, 1, { 不透明度: 1 });