Image / Vidéo 360°

Utilisez le composant 360° pour afficher des images ou vidéos panoramiques, laisser les utilisateurs les explorer au toucher, à la souris, au gyroscope ou en mode VR, et ajouter des marqueurs pour guider la navigation ou déclencher du contenu.

Préparer un contenu 360°

PandaSuite affiche le contenu 360°, mais ne crée pas le fichier panoramique source. Préparez une image ou une vidéo équirectangulaire (le format panoramique standard en 2:1) avec une caméra 360° ou un logiciel spécialisé comme 3DVista ou GoThru.

Si votre visite virtuelle est déjà construite dans un outil tiers, vous pouvez aussi l’intégrer avec le composant Web ou suivre le guide Intégrer une visite 3DVista.

Insérer une image ou vidéo 360°

Pour insérer une image / vidéo 360° dans votre projet :

Cliquez sur Composants et insérez le composant 360°.
Dans Propriétés, définissez Type sur Image 360° ou Vidéo 360°.
Sélectionnez la ressource Image ou Vidéo.
Configurez la navigation, les contrôles et les options de lecture.
Double-cliquez sur la zone du composant pour prévisualiser et éditer sa vue 360°.

Propriétés principales

Le composant 360° expose notamment les propriétés suivantes :

Type : choisissez Image 360° ou Vidéo 360°.
Afficher les contrôles : affiche la barre de contrôle à l’écran pour le zoom, le déplacement et le plein écran, ainsi que les contrôles de lecture lorsque le composant affiche une vidéo 360°.
Gyroscope : active la navigation par orientation de l’appareil sur les appareils compatibles. Sur iOS, l’utilisateur peut devoir toucher l’écran avant que le navigateur autorise l’accès aux mouvements.
Mode VR : ajoute un bouton VR stéréoscopique pour une navigation en écran scindé basée sur le gyroscope.
Rotation automatique et Vitesse de rotation : font pivoter automatiquement la vue jusqu’à interaction de l’utilisateur.
Lecture automatique, Muet et Boucle : contrôlent la lecture vidéo. Muet améliore la fiabilité de la lecture automatique sur mobile.

Utilisez les propriétés de navigation pour décider comment les utilisateurs se déplacent dans la vue 360° :

Glisser pour tourner : permet aux utilisateurs de faire glisser ou balayer pour tourner la vue.
Vitesse de glissement : ajuste la vitesse de rotation pendant le glissement.
Inertie : prolonge le mouvement après un glissement. Définissez-la sur 0 pour arrêter immédiatement.
Navigation à deux doigts : exige deux doigts pour tourner la vue sur écran tactile. Activez-la lorsque le composant se trouve dans une page défilante, afin qu’un balayage à un doigt fasse défiler la page au lieu de tourner la vue.
Molette pour zoomer et Vitesse du zoom : permettent de zoomer avec la molette et de régler la sensibilité du zoom.
FOV min et FOV max : définissent les limites de zoom avant et arrière. Plus le champ de vision est petit, plus l’utilisateur est zoomé.
Effet fisheye : ajoute une distorsion en barillet à la vue panoramique.

Ces propriétés sont réglées par défaut sur la navigation 360° standard : vous n’avez qu’à ajuster celles qui comptent pour votre projet.

Utiliser deux types de marqueurs

Le composant 360° prend en charge deux types de marqueurs :

les marqueurs de point de vue, qui enregistrent une orientation caméra et un niveau de zoom ;
les marqueurs point d’intérêt, qui ajoutent un point cliquable dans le panorama.

Les deux apparaissent comme des marqueurs PandaSuite, mais ils ne servent pas au même usage.

Marqueurs de point de vue

Utilisez les marqueurs de point de vue lorsque vous souhaitez enregistrer une vue précise et y revenir plus tard.

Pour en créer un :

Double-cliquez sur le composant pour entrer dans la vue 360°.
Tournez et zoomez jusqu’à cadrer le panorama comme souhaité.
Cliquez sur le bouton + pour créer un marqueur.

Pour chaque marqueur de point de vue, vous pouvez ajuster Angle horizontal, Angle vertical et Zoom. Pour mettre à jour un point de vue enregistré, sélectionnez le marqueur, déplacez la caméra vers la nouvelle vue, puis cliquez sur Mettre à jour à côté de Données du marqueur.

Les marqueurs de point de vue sont utiles pour :

guider les utilisateurs dans une visite virtuelle ;
définir une série de vues contrôlées par un autre composant ;
synchroniser la caméra 360° avec un défilement ou un curseur.

Marqueurs point d’intérêt

Utilisez les marqueurs point d’intérêt lorsque vous voulez que les utilisateurs touchent ou cliquent sur un point précis du panorama.

Dans Studio, entrez dans la vue 360° et cliquez sur Ajouter un point d’intérêt. Cliquez ensuite dans le panorama pour placer le point d’intérêt. Chaque point d’intérêt devient un marqueur PandaSuite que vous pouvez utiliser comme déclencheur.

Pour chaque marqueur point d’intérêt, vous pouvez configurer :

Libellé : texte affiché comme infobulle du marqueur.
Image : image personnalisée du marqueur. Sa largeur suit Taille et son ratio est conservé.
Taille : diamètre du marqueur, ou largeur de l’image, en pixels.
Couleur et Bordure : apparence du point lorsqu’aucune image personnalisée n’est définie.

Utilisez des images personnalisées pour des icônes, des points numérotés ou une navigation à votre marque. Utilisez les points colorés pour des annotations rapides ou des points d’intérêt simples.

Déclencheurs disponibles

Ouvrez la fenêtre Actions.

Voici la liste des déclencheurs disponibles :

Simple tap
Double tap
Touche
Relâche
Marqueur tapé pour les marqueurs point d’intérêt

Simple tap et Double tap exposent Angle horizontal et Angle vertical, ce qui permet de réutiliser la position touchée dans votre logique.

Actions disponibles

Sélectionnez un déclencheur et choisissez Agir sur un composant > 360°.

Voici la liste des actions disponibles :

Lecture
Arrêter
Mettre en pause
Lecture/Pause
Aller au marqueur

Aller au marqueur

Utilisez Aller au marqueur pour animer la caméra vers un marqueur de point de vue ou un marqueur point d’intérêt. Ajustez Durée de transition pour contrôler l’animation de la caméra en millisecondes. Définissez-la sur 0 pour un déplacement instantané.

Synchroniser les points de vue

Comme n’importe quel composant, le composant 360° peut être synchronisé avec un autre composant, comme une zone de défilement ou une navigation de type curseur. Ajoutez les composants à un composant Synchronisation et choisissez Synchroniser les points de vue.

La synchronisation utilise les marqueurs de point de vue. Les marqueurs point d’intérêt restent des points interactifs et sont ignorés par la synchronisation.

Exemple pratique : visite virtuelle guidée

Pour créer une visite virtuelle guidée :

Ajoutez un marqueur de point de vue pour chaque vue clé du panorama.
Ajoutez des marqueurs point d’intérêt sur les éléments importants, comme des œuvres, des salles ou des détails produit.
Créez des boutons ou un menu qui utilisent Aller au marqueur pour les marqueurs de point de vue.
Utilisez Marqueur tapé sur les marqueurs point d’intérêt pour ouvrir un Pop-up ou changer l’état d’un composant Multi-state.
Prévisualisez le projet et vérifiez que chaque marqueur mène à la bonne vue ou ouvre le bon contenu.