javascript - example - Three.js: Panorama Cube para Acercar y Transicionar en un Cubo Panorama Diferente

three js mobile

Question

Soy nuevo en Three.js. Estoy usando este ejemplo con 6 cubos de imágenes para el efecto panorama, donde se puede desplazar, ampliar y reducir cubos.

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

Quiero averiguar cómo, al máximo nivel de acercamiento, puedo hacer la transición del usuario a un cubo panorámico diferente (con una fuente de imagen diferente), asignado a esta parte del cubo en particular. Así que, de alguna manera, abro la siguiente escena para llevar al usuario más allá en el siguiente nivel en su viaje.

Esto es casi lo que hace Google Street View cuando hace clic en las flechas para avanzar en la carretera.

No veo muchos ejemplos por ahí. ¿Investigué y vi que esto podría ser posible con la creación de 2 escenas? Cualquier idea sobre cómo hacerlo funcional lo agradecería.

Answer 1

Detectando cuándo hacer la transición:

En el ejemplo dado, todos los eventos del mouse se dan. El zoom se maneja en onDocumentMouseWheel ajustando la propiedad fov la cámara. "Zoom In" reduce el fov , y "Zoom Out" lo aumenta. Sería trivial detectar cuándo el fov ha alcanzado un valor mínimo / máximo, lo que provocaría su transición a una nueva escena.

Detectando DONDE hacer la transición:

El siguiente paso es determinar en qué nueva escena realizarás la transición. Podría hacer algo parecido a un punto de conexión, donde toma un rayo de la cámara para ver si llega a un lugar en particular (por ejemplo, un THREE.Sphere que haya colocado estratégicamente). Pero para simplificar, supongamos que solo tiene las 6 direcciones que mencionó, y que todavía está usando el control del mouse del ejemplo.

El movimiento de la cámara se maneja en onDocumentMouseMove actualizando las variables lat y lon (que aparecen en grados). ( Nota: parece que lon aumenta sin límites, por lo que para mayor claridad podría ser bueno darle un valor de reinicio por lo que solo puede estar entre 0.0-359.99 o algo así ) . Puede obtener todas las matemáticas para verificar mejor las esquinas, o simplemente puedes verificar tus 45 años:

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
}

La dirección de su mirada determina a qué escena hará la transición, si encuentra su zoom máximo.

Transición

Hay muchas maneras en que puedes hacer esto. Simplemente puede reemplazar la textura en el cubo que compone el panorama. Podrías intercambiar en un THREE.Scene totalmente diferente. Puede reiniciar la cámara, o no. Podrías jugar con las luces atenuándose mientras ocurre la transición. Puede aplicar algún postprocesamiento para ocultar el efecto de transición. Esta parte es todo estilo, y depende de ti.

Dirigiéndose a la preocupación de @ Marquizzo:

La iluminación es simplemente una sugerencia para una transición. El ejemplo no usa una fuente de luz porque el material es un MeshBasicMaterial (no requiere iluminación). El ejemplo tampoco usa scene.background , pero aplica la textura a una esfera invertida. Hay otros métodos que uno puede usar si simplemente no puede afectar el "brillo" de la textura (como las transiciones CSS).

Agregué el siguiente código, el ejemplo, para hacer que se desvanezca, como un ejemplo.

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

Uno podría incluso afectar el valor de opacidad del material para hacer que una esfera se desvanezca, y otra esfera se desvanezca en su lugar.

Mi punto principal es que la transición se puede lograr de varias maneras, y que depende de @Vad decidir qué tipo de efecto usar.