Three.js：全景立方体放大并过渡到不同的全景立方体

Question

我是 Three.js 的新手。我正在使用这个带有 6 个图像立方体的示例来实现全景效果，其中可以在立方体周围平移、放大和缩小。

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

我想弄清楚如何在最大放大级别下将用户转换到不同的全景立方体（具有不同的图像源），映射到这个特定的立方体部分。所以我会，有点，打开下一个场景，让用户在他的旅程中更进一步。

当您单击箭头沿道路前进时，这几乎就是 Google 街景所做的。

我没有看到很多例子。我研究并看到这可能通过创建 2 个场景来实现？任何如何使它发挥作用的想法我都将不胜感激。

Answer 1

检测何时转换：

在给出的例子中，鼠标事件都是给定的。通过调整相机的fov 属性，在onDocumentMouseWheel 中处理缩放。 “放大”减少了fov，“缩小”增加了它。检测fov 何时达到最小值/最大值将是微不足道的，这将触发您转换到新场景。

检测转换的位置：

下一步是确定您将过渡到哪个新场景。你可以做一些类似热点的事情，你从相机中射出一条光线，看看它是否击中了一个特定的地方（例如你有战略定位的THREE.Sphere）。但为简单起见，我们假设您只有提到的 6 个方向，并且您仍在使用示例的鼠标控制。

在onDocumentMouseMove 中通过更新lat 和lon 变量（看起来以度为单位）来处理相机移动。 （注意：lon 似乎无限增加，所以为了清楚起见，最好给它一个重置值，这样它只能在 0.0-359.99 或其他值之间。）你可以得到所有math-y 来更好地检查角落，或者你可以简单地检查你的 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 决定使用哪种效果。