Three.js：全景立方体缩放并过渡到另一个全景立方体

Question

Three.js：全景立方体缩放并过渡到另一个全景立方体

javascriptthree.js

4

我是新手Three.js。我正在使用这个带有6个图像立方体的示例来创建全景效果，用户可以在立方体周围进行平移、缩放。

https://threejs.org/examples/?q=panorama#webgl_panorama_equirectangular

我想知道如何在最大缩放级别下，将用户转移到另一个全景立方体（具有不同的图像源），并将其映射到该特定立方体部分。因此，我会打开下一个场景，让用户进入旅程的下一阶段。

这几乎就是Google街景在您单击箭头向前移动时所做的。

我没有看到很多相关的例子。我研究了一下，发现可能需要创建两个场景？如果您有任何使其功能正常的想法，我将不胜感激。

- Vad

我发现了一个未回答的重复问题：https://stackoverflow.com/questions/27566155/transitions-between-panoramas-in-three-js?rq=1 - Vad

谷歌地图实际上有一个世界的三维表示。它不仅仅是全景图。它使用这些三维数据将全景图的各个部分映射到简化（低多边形）模型，使用该三维模型滑动相机，然后淡入新的全景图。如果没有三维数据，您将无法复制这种效果。 - gman

一种方法是使用像gman所说的简单3D世界。在这种情况下，您可以沿任何方向行走。另一种方法是如果您想要全景方法，您将需要以某种方式准备好3D视频。全景使用纹理，您需要记录所有相机移动，以便您可以在应用程序中进行导航。使用两个切换几何体（在您的情况下是立方体），一个始终是当前的，另一个是未来的（视频纹理）。使用不透明度淡入淡出效果。在按下箭头键时，只需加载当前全景视频纹理的下一个序列。仅在运动线的起点或终点上启用箭头。 - Nikola Lukic

最大缩放级别基于相机参数。 - Nikola Lukic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheJim01 · Accepted Answer

检测何时进行过渡：

在给出的示例中，所有鼠标事件都已提供。通过调整相机的fov属性，在onDocumentMouseWheel中处理缩放。 "放大"减小fov，而"缩小"增加fov。很容易检测到fov是否已达到最小/最大值，这将触发您转换到新场景的过渡。

检测何处进行过渡：

下一步是确定您将过渡到哪个新场景。您可以执行类似热点的操作，从相机射出光线，看它是否击中了特定位置（例如您 strategically 定位的THREE.Sphere）。但为简单起见，假设您只有您提到的6个方向，并且仍在使用示例的鼠标控件。

摄像机运动在 onDocumentMouseMove 中通过更新 lat 和 lon 变量（似乎是以度数表示）来处理。（注意：看起来 lon 会无限增长，所以为了清晰起见，最好给它一个重置值，使其只能在0.0-359.99之间。）你可以进行数学计算来更好地检查角落，或者你也可以简单地检查你的45度角：

if(lat > 45){
    // you're looking up
}
else if(lat < -45){
    // you're looking down
}
else{
    // you're looking at a side, check "lon" instead
}

你的视角决定了当你遇到最大缩放时会转换到哪个场景。

转换

有许多方法可以做到这一点。您可以简单地替换组成全景图的立方体上的纹理。您可以交换完全不同的THREE.Scene。您可以重置相机 - 或者不重置。在过渡发生时，您可以尝试调整灯光的亮度。您可以应用一些后期处理来模糊过渡效果。这部分是全部风格，完全取决于您。

回答@Marquizzo的问题：

灯光只是过渡的建议。示例不使用光源，因为材质是一个MeshBasicMaterial（不需要光照）。示例也不使用scene.background，而是将纹理应用于反转的球体。如果您无法影响纹理的“亮度”，则可以使用其他方法（例如CSS过渡）。

我添加了以下代码作为示例，使其淡入淡出。

// These are in the global scope, defined just before the call to init();
// I moved "mesh" to the global scope to access its material during the animation loop.
var mesh = null,
    colorChange = -0.01;

// This code is inside the "update" function, just before the call to renderer.render(...);
// It causes the color of the material to vary between white/black, giving the fading effect.
mesh.material.color.addScalar(colorChange);
if(mesh.material.color.r + colorChange < 0 || mesh.material.color.r + colorChange > 1){ // not going full epsilon checking for an example...
    colorChange = -colorChange;
}

甚至可以通过改变材料的不透明度来使一个球消失，另一个球出现。

我的主要观点是，过渡效果可以用多种方式实现，而决定使用何种效果取决于@Vad。