Three.js: Panorama cube to enlarge and move to another Panorama cube

Question

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

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

I want to find out how at the maximum zoom level I can transfer the user to another cube of the panorama (with a different image source) displayed on this particular part of the cube. Therefore, I would kind of open the next scene to take the user to the next level in my journey.

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

I do not see many examples. I researched and saw that this is possible with the creation of 2 scenes? Any ideas on how to make it functional, I would appreciate it.

Answer 1

Detecting WHEN for transition:

In the above example, all mouse events are indicated. Scaling is handled onDocumentMouseWheelby adjusting the camera properties fov. Increase decreases fov, while Decrease increases it. It would be trivial to detect when it has fovreached the minimum / maximum value, which will cause a transition to a new scene.

Detecting WHERE to jump:

- , . - hotspot-like, , , (, THREE.Sphere, ). , 6 , , .

onDocumentMouseMove lat lon (, , ). (: , lon , reset, - 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. reset - . . . - , .

@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, , .