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

Question

我正试图从一个全景立方体图像平滑过渡到另一个立体图像，以实现房间内的漫游效果。我使用this示例作为启动器，并设置了Scene，Camera，Mesh SkyBox。现在我正在考虑过渡到一个新的全景立方体的最佳方法，这样一个立方体图像可以放大并融入另一个立体图像，就像用户走进房间一样。

我想过有第二个场景和第二个相机，因为旧图像需要放大和淡出，而新图像放大并淡入以实现非常平滑的过渡。我在这里遇到了一些挑战，同时显示2张图像。当SceneB出现时，旧的 - sceneA - 不可见，并用：

覆盖它

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

但是即使修好了，如果这是一种正确的方法，我还会再考虑一下。我想尝试纹理转换，也许。我无法找到示例或了解如何做到这一点。

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

Answer 1

如果您在整个空间中以小间隔拍摄了许多立方体贴图（3d照片捕捉），那么您可以使用THREE.CubeTextureLoader将它们映射到尺寸与实际比例相同的立方体形状网格的内部表面（类似于他们被带进的房间）并将它们放置在整个空间中，这样他们的中心就是3D摄像机在拍摄时所处的位置。

然后，在位置之间转换的过程将是相机与新立方体的中心相结合的过程，同时旧立方体淡化为零不透明度并且新立方体逐渐消失为完全不透明度。

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

我会将Three.js TWEEN library用于所有刻度：相机的位置和2个立方体的透明度。

注意：我总是渲染我的场景，因此在现实世界中，3D世界中的1个单位是1米。它有助于让事情看起来更加逼真，如果我想在项目之间共享模型或代码技术，它们更有可能兼容。