QUAND transition Détection:
Dans l'exemple donné, les événements de souris sont tous donnés. Le zoom est géré dans onDocumentMouseWheel en ajustant la propriété fov de l'appareil photo. "Zoom avant" réduit le fov, et "Zoom arrière" l'augmente. Il serait trivial de détecter quand le fov a atteint une valeur minimum/maximum, ce qui déclencherait votre transition vers une nouvelle scène.
OÙ la transition Détection:
L'étape suivante consiste à déterminer dans quelle nouvelle scène vous transition. Vous pouvez faire quelque chose comme un point chaud, où vous tirez un rayon de la caméra pour voir si elle frappe un endroit particulier (par exemple un THREE.Sphere que vous avez stratégiquement positionné). Mais pour plus de simplicité, supposons que vous avez seulement les 6 directions que vous avez mentionnées, et que vous utilisez toujours le contrôle de la souris de l'exemple.
Le mouvement de la caméra est géré par onDocumentMouseMove en mettant à jour les variables lat et lon (qui semblent être en degrés). (Note: Il semble que lon augmente sans limite, donc par souci de clarté, il peut être bon de lui donner une valeur de réinitialisation de sorte qu'elle ne puisse jamais être comprise entre 0.0-359.99 ou quelque chose.)) Vous pouvez obtenir tous les maths pour vérifier les coins mieux, ou vous pouvez simplement vérifier vos 45 de:
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
}
votre direction de visée détermine à quelle scène vous transition, si vous rencontrez votre zoom maximum.
Transitioning
Il y a beaucoup de façons dont vous pouvez le faire. Vous pouvez simplement remplacer la texture sur le cube qui constitue le panorama. Vous pouvez échanger dans un totalement différent THREE.Scene. Vous pouvez réinitialiser l'appareil photo - ou non. Vous pouvez jouer avec les lumières qui s'éteignent/pendant que la transition se produit. Vous pouvez appliquer un post-traitement pour masquer l'effet de transition. Cette partie est tout style, et tout dépend de vous.
Répondre @ préoccupations de Marquizzo:
L'éclairage est tout simplement une suggestion pour une transition.L'exemple n'utilise pas de source de lumière car le matériau est MeshBasicMaterial (ne nécessite pas d'éclairage). L'exemple n'utilise pas non plus scene.background, mais applique la texture à une sphère inversée. Il existe d'autres méthodes que vous pouvez utiliser si vous ne pouvez pas affecter la "luminosité" de la texture (comme les transitions CSS).
J'ai ajouté le code suivant à l'exemple pour le faire apparaître et disparaître, à titre d'exemple.
// 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;
}
On pourrait même affecter la valeur d'opacité de la matière pour faire une sphère disparaître, et un autre fondu sphère en place. Mon point principal est que la transition peut être accomplie de diverses manières, et que c'est à @Vad de décider quel type d'effet utiliser.
J'ai trouvé un doublon sans réponse: https://stackoverflow.com/questions/27566155/transitions-between-panoramas-in-three-js?rq=1 – Vad
Google Maps a en fait une représentation en 3D du monde. Ce ne sont pas seulement les panoramas. Il utilise ces données 3D pour mapper les différentes parties du panorama à un modèle simplifié (low poly), fait glisser la caméra à l'aide de ce modèle 3D, le fondu enchaîné au nouveau panorama. vous ne serez pas en mesure de repo que efficace sans données 3D – gman
Une façon est d'utiliser le monde 3d simple comme dit gman. Dans ce cas, vous pouvez marcher dans n'importe quelle flèche. En d'autres termes, si vous voulez une méthode de panorama, vous aurez besoin d'une vidéo 3D préparée d'une manière ou d'une autre. Panorama utiliser des textures, vous devrez enregistrer tous les mouvements de caméra où vous voulez naviguer avec votre application. Utilisez deux géométrie de commutation (cube dans votre cas) On est toujours en cours et les secondes sont futures (textures vidéo). Utilisez l'opacité Fadein Fadeout effet. Sur la touche fléchée, il suffit de charger la séquence suivante de la texture vidéo panoramique actuelle. Rendre la flèche activée uniquement au début ou à la fin de la ligne de mouvement. –