我是Three.js的新手.我正在使用这个带有6个图像立方体的示例进行全景效果,其中一个可以平移,放大和缩小立方体.

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

我想弄清楚,在最大放大级别,我可以将用户转换为不同的全景立方体(具有不同的图像源),映射到这个特定的立方体部分.所以,我会打开下一个场景,让用户进一步进入他的旅程中的下一个级别.

当Google点击箭头向前移动时,这几乎就是Google街景.

我没有看到很多例子.我研究过,看到这可能会创建2个场景吗？任何想法如何使其功能我会很感激.

解决方法:

检测何时转换：

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

检测WHERE转换：

下一步是确定要转换的新场景.你可以做类似热点的事情,你从相机拍摄一条光线,看它是否到达某个特定的地方(例如你有战略定位的THREE.Sphere).但为了简单起见,我们假设您只有6个方向,并且您仍在使用示例的鼠标控件.

通过更新lat和lon变量(看起来以度为单位),在onDocumentMouseMove中处理相机移动. (注意：似乎lon无限制地增加,所以为了清晰起见,给它一个重置值可能是好的,因此它只能在0.0-359.99之间或者某种东西.)你可以得到所有数学来更好地检查角落,或者你可以简单检查你的45’s：

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来决定使用什么样的效果.