如何在三.js中淡入/淡出背景

How to fade in/out your background in three.js?

本文关键字：淡入 淡出 背景 js      更新时间：2023-09-26

我是三个新人.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 );

我该怎么做？

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

看一看：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 });

随着时间的推移，您必须在 2 点上修改您的材料：

  • 设置mesh.material.transparent = true
  • 然后动态"勒普"不透明度在 0 到 1 之间：mesh.material.opacity = opacityOverTime
相关文章：