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

Question

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

我想到了第二个场景和第二个相机,因为旧图像需要放大和淡出,而新图像放大和淡入以实现非常平滑的过渡.我在这里遇到了一些挑战,同时显示了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将它们映射到立方体形状的网格的内表面，这些网格的大小符合实际比例（类似于它们拍摄的房间） in）并将它们放置在整个空间中，以便它们的中心位于捕获时 3D 相机所在的位置。

然后，在位置之间转换的过程将是将相机移动到新立方体的中心，同时旧立方体褪色到零不透明度并且新立方体褪色到完全不透明度的组合。

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

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

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