# Image / Vidéo 360°

> Ajoutez des images ou vidéos 360° immersives dans PandaSuite, configurez la navigation gyroscope et tactile, le mode VR, la rotation automatique, les marqueurs, la synchronisation et les actions du composant.

https://docs.pandasuite.com/fr/essentials/multimedia/360-image-video/

**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](https://www.3dvista.com/en/) ou [GoThru](https://gothru.co/).

Si votre visite virtuelle est déjà construite dans un outil tiers, vous pouvez aussi l'intégrer avec le [composant Web](https://docs.pandasuite.com/fr/essentials/components/web/) ou suivre le guide [Intégrer une visite 3DVista](https://docs.pandasuite.com/fr/essentials/integrations/embed-3d-vista-tour-in/).

## Insérer une image ou vidéo 360°

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

1. Cliquez sur **Composants** et insérez le composant **360°**.
2. Dans **Propriétés**, définissez **Type** sur **Image 360°** ou **Vidéo 360°**.
3. Sélectionnez la ressource **Image** ou **Vidéo**.
4. Configurez la navigation, les contrôles et les options de lecture.
5. 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.

## Ajuster la navigation et le zoom

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 :

1. Double-cliquez sur le composant pour entrer dans la vue 360°.
2. Tournez et zoomez jusqu'à cadrer le panorama comme souhaité.
3. 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 ;
- déclencher du contenu lorsque la caméra atteint la vue enregistrée.

### 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](https://docs.pandasuite.com/fr/essentials/interactions/triggers/) disponibles :

- **Simple tap**
- **Double tap**
- **Touche**
- **Relâche**
- **Point d'intérêt tapé** pour les marqueurs point d'intérêt
- **Point de vue atteint** pour les marqueurs de point de vue

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

**Point de vue atteint** se déclenche quand la vue s'aligne sur un marqueur de point de vue, quelle que soit la façon dont la caméra y arrive (glissement, gyroscope, rotation automatique, **Aller au marqueur** ou synchronisation). Utilisez-le pour révéler du contenu pendant que l'utilisateur explore le panorama librement.

## 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](https://docs.pandasuite.com/fr/essentials/components/synchronization/) 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 :

1. Ajoutez un marqueur de point de vue pour chaque vue clé du panorama.
2. Ajoutez des marqueurs point d'intérêt sur les éléments importants, comme des œuvres, des salles ou des détails produit.
3. Créez des boutons ou un menu qui utilisent **Aller au marqueur** pour les marqueurs de point de vue.
4. Utilisez **Point d'intérêt tapé** sur les marqueurs point d'intérêt pour ouvrir un [Pop-up](https://docs.pandasuite.com/fr/essentials/components/pop-up/) ou changer l'état d'un composant [Multi-state](https://docs.pandasuite.com/fr/essentials/components/multi-state/).
5. Prévisualisez le projet et vérifiez que chaque marqueur mène à la bonne vue ou ouvre le bon contenu.

## Voir aussi

- [Marqueurs](https://docs.pandasuite.com/fr/essentials/interactions/markers/)
- [Synchronisation](https://docs.pandasuite.com/fr/essentials/components/synchronization/)
- [Intégrer une visite 3DVista](https://docs.pandasuite.com/fr/essentials/integrations/embed-3d-vista-tour-in/)
- [Créer un visualiseur de produit à 360°](https://docs.pandasuite.com/fr/tutorials/how-to/create-a-360-product-viewer/)