Three.js：全景立方体放大并过渡到不同的全景立方体 [英] Three.js: Panorama Cube to Zoom In and Transition Into a Different Panorama Cube

问题描述

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

I am new to Three.js. I am using this example with 6 image cube for panorama effect, where one can pan, zoom in and out around cubes.

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

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

I want to figure out how, at maximum zoom-in level, I can transition user into a different panorama cube (with different image source), mapped to this particular cube part. So I would, sort of, open the next scene to take user further to the next level in his journey.

这几乎是Google街景点击时所做的箭头向前移动。

This is nearly what Google Street View does when you click on arrows to move forward down the road.

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

I do not see many examples out there. I researched and saw this may be possible with creating 2 scenes? Any ideas how to make it functional I would appreciate.

推荐答案

检测何时转换：

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

In the example given, the mouse events are all given. The zoom is handled in onDocumentMouseWheel by adjusting the camera's fov property. "Zoom In" reduces the fov, and "Zoom Out" increases it. It would be trivial to detect when the fov has reached a minimum/maximum value, which would trigger your transition to a new scene.

检测转换的位置：

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

The next step is determining into which new scene you will transition. You could do something hotspot-like, where you shoot a ray from the camera to see if it hit a particular place (for example a THREE.Sphere which you have strategically positioned). But for simplicity, let's assume you only have the 6 directions you mentioned, and that you're still using the example's mouse control.

相机移动在<$ c中处理$ c> onDocumentMouseMove 更新 lat 和 lon 变量（似乎是度）。 （注意：似乎 lon 无限制地增加，所以为了清楚起见，给它一个重置值可能是好的，所以它只能在0.0-359.99之间或者一些东西。）你可以更好地检查角落，或者你只需​​检查你的45：

Camera movement is handled in onDocumentMouseMove by updating the lat and lon variables (which appear to be in degrees). (Note: It seems lon increases without bounds, so for clarity it might be good to give it a reset value so it can only ever be between 0.0-359.99 or something.) You can get all math-y to check the corners better, or you could simply check your 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
}

如果遇到最大变焦，你的观察方向决定你将转换到哪个场景。

Your look direction determines to which scene you will transition, should you encounter your maximum zoom.

过渡

有很多方法可以做到这一点。您可以简单地替换构成全景图的立方体上的纹理。你可以交换一个完全不同的 THREE.Scene 。你可以重置相机 - 或不。当转换发生时，您可以在灯光调暗时播放。您可以应用一些后处理来模糊过渡效果。这部分都是风格，这完全取决于你。

There are lots of ways you can do this. You could simply replace the texture on the cube that makes up the panorama. You could swap in a totally different THREE.Scene. You could reset the camera--or not. You could play with the lights dimming out/in while the transition happens. You could apply some post-processing to obscure the transition effect. This part is all style, and it's all up to you.

解决@ Marquizzo关注的问题：

照明仅仅是过渡的建议。该示例不使用光源，因为材质是 MeshBasicMaterial （不需要光照）。该示例也不使用 scene.background ，但将纹理应用于倒置球体。如果您根本无法影响纹理的亮度（例如CSS过渡），还可以使用其他方法。

The lighting is simply a suggestion for a transition. The example doesn't use a light source because the material is a MeshBasicMaterial (doesn't require lighting). The example also doesn't use scene.background, but applies the texture to an inverted sphere. There are other methods one can use if you simply can't affect the "brightness" of the texture (such as CSS transitions).

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

I added the following code the the example to make it fade in and out, just as an example.

// 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;
}

甚至可以影响材质的不透明度值，使一个球体逐渐消失，另一个球体逐渐消失。

One could even affect the opacity value of the material to make one sphere fade away, and another sphere fade into place.

我的主要观点是转换可以通过多种方式完成，并由@Vad决定是什么样的使用效果。

My main point is that the transition can be accomplished in a variety of ways, and that it's up to @Vad to decide what kind of effect to use.

这篇关于Three.js：全景立方体放大并过渡到不同的全景立方体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！