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

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

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

mesh.material.opacity = 1;

最简单的方法是使用补间引擎（例如：TweenMax）。

示例：

mesh.material.opacity = 0; TweenMax.to(mesh.material, 1, { opacity: 1 });

Answer 2

您必须在 2分：

上随时修改材料

设置mesh.material.transparent = true
然后动态'lerp'在0和1之间的不透明度：mesh.material.opacity = opacityOverTime

如何在three.js中淡出/淡出你的背景？

2 个答案: