三个js连续淡入三个背景答案

【问题标题】：Three js crossfade three backgrounds continously三个js连续淡入三个背景
【发布时间】：2015-07-05 06:30:11
【问题描述】：

我目前正在从事我的前三个 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);

任何方向都将不胜感激！

【问题讨论】：

我最终使 three.js 画布变得透明，并在其背后做了一些好的 jQuery ......不得不让项目走出大门。但我仍然很想知道纯三中是否有办法。
我打算建议使用 css

标签： three.js

【解决方案1】：

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

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

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

检查片段着色器

【讨论】：