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

Question

我是Three.js的新手。我将这个例子与6个图像立方体一起用于全景效果​​，其中人们可以平移，放大和缩小立方体。

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

我想弄清楚如何，在最大放大级，我可以过渡用户到不同的全景立方体（具有不同的图像源），映射到该特定的立方体部分。所以，我会打开下一个场景，让用户在旅途中更上一层楼。

这几乎就是谷歌街景当你点击箭头向前走的路。

我没有看到很多例子。我研究过，看到创建2个场景可能是可能的？任何想法如何使其功能，我将不胜感激。

Answer 1

当检测到过渡：

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

检测符合转型：

下一个步骤是确定成新的场景，你会转型。你可以做一些类似热点的事情，从相机拍摄光线，看它是否碰到某个特定的地方（例如，你有战略定位的THREE.Sphere）。但是为了简单起见，我们假设你只有6个方向，并且仍然使用示例的鼠标控件。

通过更新lat和lon变量（显示为度数）来处理摄像机移动onDocumentMouseMove。 （注：看起来lon增加无界限，所以为了清晰起见，它可能是一个很好的给它一个复位值，所以它只能在0.0-359.99之间）你可以让所有的数学-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决定使用哪种效果。