Question

我目前正在开展我的前三个js项目，并接受了相当的教育。但是，我已经碰壁了，我正在寻找一个关于该做什么的概括性概述。

我想将三张图像用作背景图像。我希望它们以指定的间隔交叉淡入淡出...让我们说每5秒，背景交叉淡入到下一个。显示最后一个背景后，交叉淡入第一个背景，依此类推。

我找到了一些示例，其中有两个对象之间的交叉渐变，例如this fiddle，但这似乎取决于拥有两个摄像头。我已经采取了我能尽我所能找到的其他例子，没有什么值得张贴的。

我不太了解三个，这就是我寻求帮助的原因。如果有人可以帮我定义我的方法，那就太棒了。我应该改变网格的不透明度吗？使用着色器做一些事情？还有别的吗？

至少在这里，我是如何添加一个背景的：

camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 450;

scene = new THREE.Scene();

// Load the background texture
var summerTexture = THREE.ImageUtils.loadTexture( 'tree-animation/images/summer.png' );
summerMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
       map: summerTexture,
}));

summerMesh.material.depthTest = false;
summerMesh.material.depthWrite = false;

backgroundCamera = new THREE.Camera();

summerScene = new THREE.Scene();
summerScene.add(backgroundCamera);
summerScene.add(summerMesh);

任何方向都会非常感激！

Answer 1

这可以通过编写自定义着色器并在图像之间使用mix（）或smooth-step（）函数来实现，并为渲染循环添加时钟以更新着色器制服以随着时间的推移操纵着色器中的过渡。

以下是静态混合纹理的示例，但可以轻松集成到您自己的项目中：

http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html

检查frag shader

三个js不断交叉淡化三个背景

1 个答案: