Three.js：具有缩放和混合效果的过渡 2 纹理答案

【问题标题】：Three.js: Transition 2 Textures with Zoom and Blend EffectsThree.js：具有缩放和混合效果的过渡 2 纹理
【发布时间】：2018-03-09 08:18:46
【问题描述】：

我正在尝试从一个全景立方体图像平滑过渡到另一个，以实现房间内的穿行效果。我使用this 样本作为场景、相机、Mesh SkyBox 的启动器。现在我正在考虑过渡到一个新的全景立方体的最佳方法，这样一个立方体图像会放大并融入另一个立方体图像，就像用户走进房间一样。

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

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

但即使已修复，如果这是一种正确的方法，我也会重新考虑。也许我想尝试纹理过渡。我找不到示例或不知道如何做。

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

【问题讨论】：

我能否澄清一下：您是否想要一个“缩放”类型的效果，比如快速的短模糊 warp 类型的东西？或者两个立方体之间的逐渐交叉淡入淡出就足够了？或者你是否清楚地穿过一个明确定义的门口进入一个新房间，并且能够站在一个房间里看到另一个房间？我可以想到所有方法，但需要知道您想要哪种方法。
谢谢马丁。我喜欢这个例子的做法：biganto-visual.ru/portfolio/53/749.html。我将拥有相同的一组立方体，我需要平滑过渡。换句话说，scene1 缩放并淡入另一个场景。
啊哈，我明白了！他们有许多立方体贴图（3d 照片），取自房屋中的所有点，您可以以 1 米的间隔实际站立。 3D 捕捉过程需要数小时。在我看来，他们已经按照真实的比例调整了立方体的大小并放置了它们，因此它们的中心就是 3D 摄像机所在的位置。过渡的过程是相机移动到新立方体中心的组合，同时旧立方体褪色到零不透明度，新立方体褪色到完全不透明度。我会在所有的毕业典礼上使用 TWEEN 库。
Vad，我在下面的回答是否回答了您的问题？
是的，马丁，您的回答很有帮助，给了我更清晰的方向。我开始挖掘那个例子，发现他们使用 GLSL 并混合 2 个纹理进行过渡。我试图了解这种方法与您建议的 Tween lib 相比的优势。随时分享您的想法。

标签： javascript 3d three.js

【解决方案1】：

如果您在整个空间中以较小的间隔拍摄了许多立方体贴图（3D 照片捕获），那么您可以使用THREE.CubeTextureLoader 将它们映射到按真实比例调整大小的立方体形状网格的内表面（类似于房间它们被带入）并将它们放置在整个空间中，以便它们的中心是 3D 相机在捕获时所处的位置。

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

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

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

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

【讨论】：