javascript library Three.js: Panorama Cube per ingrandire e passare in un altro panorama cubo



webgl library 3d (1)

Rilevare QUANDO passare:

Nell'esempio fornito, gli eventi del mouse sono tutti dati. Lo zoom viene gestito in onDocumentMouseWheel regolando la proprietà fov della videocamera. "Zoom fov " riduce il fov e "Zoom indietro" lo aumenta. Sarebbe banale da rilevare quando il fov ha raggiunto un valore minimo / massimo, che potrebbe innescare la transizione verso una nuova scena.

Rilevando DOVE passare:

Il prossimo passo è determinare in quale nuova scena passerai. Potresti fare qualcosa di simile a un hotspot, in cui spari un raggio dalla telecamera per vedere se colpisce un punto particolare (ad esempio un THREE.Sphere che hai posizionato strategicamente). Ma per semplicità, supponiamo che tu abbia solo le 6 direzioni che hai menzionato e che stai ancora utilizzando il controllo del mouse dell'esempio.

Il movimento della telecamera viene gestito in onDocumentMouseMove aggiornando le variabili lat e lon (che sembrano essere in gradi). ( Nota: Sembra che gli aumenti di lon senza limiti, quindi per chiarezza potrebbe essere utile dargli un valore di reset in modo che possa sempre essere compreso tra 0,0-359,99 o qualcosa del genere. ) Puoi ottenere tutti i calcoli matematici per controllare meglio gli angoli, oppure puoi semplicemente controllare i tuoi 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
}

La direzione del tuo sguardo determina la scena in cui effettuerai la transizione, nel caso dovessi riscontrare lo zoom massimo.

transizione

Ci sono molti modi in cui puoi farlo. Potresti semplicemente sostituire la texture sul cubo che compone il panorama. Potresti scambiare un THREE.Scene completamente diverso. È possibile ripristinare la fotocamera - o no. Potresti giocare con le luci che si oscurano verso l'esterno mentre la transizione avviene. È possibile applicare alcuni post-elaborazione per oscurare l'effetto di transizione. Questa parte è tutto stile e dipende da te.

Affrontando la preoccupazione di Marquizzo:

L'illuminazione è semplicemente un suggerimento per una transizione. L'esempio non usa una fonte di luce perché il materiale è un MeshBasicMaterial (non richiede illuminazione). L'esempio inoltre non usa scene.background , ma applica la texture a una sfera invertita. Ci sono altri metodi che si possono usare se semplicemente non si può influenzare la "luminosità" della trama (come le transizioni CSS).

Ho aggiunto il seguente codice l'esempio per renderlo dissolvenza in entrata e in uscita, proprio come un esempio.

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

Si potrebbe persino influire sul valore di opacità del materiale per far svanire una sfera e un'altra sfera svanire.

Il mio punto principale è che la transizione può essere compiuta in una varietà di modi, e che spetta a @Vad decidere quale tipo di effetto usare.

Sono nuovo di Three.js. Sto usando questo esempio con 6 cubi immagine per effetto panorama, in cui è possibile eseguire una panoramica, ingrandire e ridurre i cubi.

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

Voglio capire come, al massimo livello di ingrandimento, posso trasferire l'utente in un diverso cubo panoramico (con diversa sorgente di immagini), mappato a questa particolare parte del cubo. Quindi, vorrei aprire la scena successiva per portare l'utente al livello successivo nel suo viaggio.

Questo è quasi ciò che fa Google Street View quando fai clic sulle frecce per andare avanti lungo la strada.

Non vedo molti esempi là fuori. Ho studiato e ho visto questo potrebbe essere possibile con la creazione di 2 scene? Qualsiasi idea su come renderla funzionale apprezzerei.





webgl