javascript - Three.js:具有缩放和混合效果的 Transition 2 纹理

Question

我正在尝试从一个全景立方体图像平滑过渡到另一个图像，以在房间内实现穿行效果。我用了this作为初学者的示例，场景、相机、网格天空盒都已设置。现在我正在考虑过渡到一个新的全景立方体的最佳方法，这样一个立方体图像就会放大并融入另一个立方体图像，就像用户走进房间一样。

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

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 米。它有助于更​​快地让事情看起来逼真，而且如果我想在项目之间共享模型或代码技术，它们更有可能是兼容的。