Three.js：使用缩放和混合效果过渡2个纹理

Question

我正尝试平稳地从一个全景立方体图像过渡到另一个图像，以实现在房间内的步行效果。我使用了此示例作为起点，其中场景、相机和网格SkyBox都已设置好。现在我正在思考最佳方法来过渡到新的全景立方体，使一个立方体图像缩放并混合到另一个图像中，就像用户走进房间一样。

我想过使用第二个场景和第二个相机，因为旧图像需要缩放并淡出，而新图像则需要缩放并淡入，以实现非常平稳的过渡。在这里，我遇到了一些挑战，因为当SceneB出现并覆盖它时，旧图像-场景A-不可见：

renderer.clear();//multi-scene
if(sceneA && cameraA)
        renderer.render( sceneA, cameraA );
renderer.clearDepth();
renderer.render( sceneB, cameraB );

即使修复了这个问题，我还是在思考是否采用正确的方法。也许我想尝试纹理过渡。但我找不到例子或者思路。

如何通过场景或纹理不同的来源，平滑地从一个可见的立方体图像（纹理）过渡到另一个？

- Vad

---

我可以请您澄清一下吗：您是否想要一种“缩放”类型的效果，就像快速短暂的模糊“扭曲”类型的效果？或者两个立方体之间逐渐交叉淡入淡出是否足够？还是您需要清晰地穿过一个锐利定义的门进入新房间，并能够站在一个房间里并透过另一个房间看到另一边？我可以为所有这些情况提供解决方案，但需要知道您想要哪种。 - Martin Joiner

谢谢Martin。我喜欢这个例子的做法：http://biganto-visual.ru/portfolio/53/749.html。我将拥有同样一组立方体，需要平滑地转换。换句话说，场景1缩放并淡出到另一个场景。 - Vad

啊哈，我明白了！他们有许多立方贴图（3D照片），从房子中你可以站在每1米的位置拍摄。3D捕捉过程可能需要数小时。在我看来，他们已经按照真实比例调整了立方体的大小，并将它们放置在3D相机所在的中心位置。"过渡"的过程是相机向新立方体的中心移动，同时旧立方体淡出至零不透明度，新立方体淡入至完全不透明度的组合。我会使用TWEEN库来完成所有的渐变效果。 - Martin Joiner

Vad，我的下面的回答解决了你的问题吗？ - Martin Joiner

是的，Martin，你的回答非常有帮助，让我有了更清晰的方向。我开始研究那个例子，并发现他们使用GLSL混合2个纹理进行过渡。我正在尝试理解这种方法与你建议的Tween库相比的优势。欢迎分享你的想法。 - Vad

有趣！我会看一下GLSL。 - Martin Joiner

Answer 1

如果您有许多在空间中以小间隔拍摄的立方体贴图（3D照片捕捉），则可以使用THREE.CubeTextureLoader将它们映射到大小逼真的立方体形状网格的内部表面，并将它们放置在整个空间中，使其中心位于拍摄时3D相机所在的位置。

然后，过渡的过程将是将相机推向新立方体的中心，同时旧立方体淡出至零不透明度，新立方体淡入至完全不透明度的组合。

任何时候只有1个立方体是完全可见的，其余存在于空间中但是不可见。

我会使用Three.js TWEEN库来处理所有渐变：相机的位置和2个立方体的透明度。

注意：我总是将我的场景渲染为3D世界中的1个单位等于现实世界中的1米。这有助于更快地使事物看起来逼真，而且如果我想在项目之间共享模型或代码技术，它们更有可能是兼容的。

- Martin Joiner