3D & Réalité Augmentée (AR)

Utilisez le composant 3D / AR pour afficher un modèle GLB ou glTF, enregistrer des vues caméra sous forme de marqueurs, placer des marqueurs interactifs hotspot sur le modèle et lancer une vue en réalité augmentée sur mobile.

Ajouter un modèle 3D

Votre modèle source doit être au format GLB ou glTF.

1. Compressez votre modèle dans une archive ZIP.
2. Dans PandaSuite Studio, ouvrez Fichiers et importez ce ZIP.
3. Insérez le composant 3D / AR depuis Composants.
4. Dans Source, sélectionnez votre fichier ZIP.
5. Dans Nom du fichier, saisissez le nom exact ou le chemin du fichier GLB ou glTF présent dans l’archive.

Si vous souhaitez utiliser une image d’environnement personnalisée, ajoutez-la dans les ressources du composant comme Environnement. Si vous souhaitez prendre en charge la RA sur iOS, ajoutez aussi un fichier USDZ correspondant dans la même archive ZIP.

Double-cliquez sur le composant dans le canvas pour entrer dans la vue 3D. Vous pouvez alors déplacer la caméra, inspecter le modèle, créer des marqueurs et ajouter des marqueurs interactifs hotspot. Utilisez le fil d’Ariane pour revenir à l’écran.

Propriétés principales

Le composant 3D / AR expose notamment les propriétés suivantes :

• Contrôle de la caméra : permet à l’utilisateur de faire pivoter et zoomer autour du modèle.
• Permettre le déplacement : permet de déplacer la vue horizontalement et verticalement.
• Permettre de regarder à l’intérieur : permet à l’orbite caméra de s’approcher fortement du modèle ou d’entrer à l’intérieur.
• Transition animée entre marqueurs : anime le passage d’un marqueur caméra à un autre.
• Inciter à l’action et Délai : affichent une aide visuelle après un délai pour encourager l’interaction.
• Rotation automatique et Délai : lancent la rotation automatique du modèle après un délai.
• Image d’environnement : utilise un éclairage Neutral, Legacy ou Custom.
• Utiliser comme skybox, Hauteur du skybox et Unité : disponibles si vous utilisez une image d’environnement personnalisée comme arrière-plan.
• Exposition, Intensité des ombres, Douceur des ombres et Mapping de ton : ajustent le rendu du modèle.
• AR (si disponible), Support iOS et Nom du fichier USDZ : activent et configurent l’expérience en réalité augmentée.

Utiliser deux types de marqueurs

Le composant 3D / AR prend en charge deux workflows différents :

• les marqueurs caméra, qui enregistrent une vue autour du modèle ;
• les marqueurs interactifs hotspot, qui ajoutent un point cliquable directement sur la surface du modèle.

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

Marqueurs caméra

Utilisez les marqueurs caméra lorsque vous souhaitez enregistrer un point de vue et y revenir plus tard.

Pour en créer un :

1. Double-cliquez sur le composant pour entrer dans la vue 3D.
2. Placez la caméra à l’angle exact que vous souhaitez enregistrer.
3. Cliquez sur le bouton + pour créer un marqueur.

Les marqueurs caméra sont utiles pour :

• guider l’utilisateur entre plusieurs vues prédéfinies du même modèle ;
• synchroniser la caméra avec un autre composant ;
• créer des transitions fluides entre points de vue lorsque Transition animée entre marqueurs est activée.

Marqueurs interactifs hotspot

Utilisez un marqueur interactif hotspot lorsque vous voulez que l’utilisateur touche ou clique sur un point précis du modèle.

Dans Studio, ouvrez la vue 3D puis cliquez sur Ajouter un hotspot. Cliquez ensuite sur le modèle pour placer le hotspot. Chaque hotspot devient un marqueur PandaSuite que vous pouvez utiliser comme déclencheur.

Pour chaque marqueur interactif hotspot, vous pouvez configurer :

• Couleur
• Taille
• Opacité min
• Opacité max
• Afficher annotation
• Message
• Couleur et Couleur du texte pour l’annotation

Les marqueurs interactifs hotspot sont particulièrement utiles pour :

• ouvrir un Pop-up avec plus d’informations ;
• changer l’état d’un composant Multi-state ;
• guider une visite produit ou un parcours d’apprentissage avec des points d’intérêt cliquables.

Déclencheurs disponibles

Dans l’onglet Actions, le composant 3D / AR propose ces déclencheurs :

• Position : déclenché par un marqueur. Cela peut être un marqueur caméra enregistré ou un marqueur interactif hotspot.
• Modèle chargé
• Erreur de modèle
• Commence lecture
• Mise en pause
• Ajout d’animation
• Suppression d’animation
• Début de l’interaction utilisateur
• Fin de l’interaction utilisateur
• Erreur d’AR

Les déclencheurs liés à l’animation exposent aussi Animation n° et Nom de l’animation, réutilisables dans votre logique.

Actions disponibles

Utilisez Agir sur un composant pour contrôler le composant 3D / AR depuis une autre interaction. Les actions disponibles sont :

• Changement position
• Lecture
• Mettre en pause
• Ajouter animation
• Retirer animation
• Recentrer
• Activer l’AR

Changement position

Utilisez Changement position pour déplacer la caméra vers un marqueur caméra enregistré.

Lorsque Transition animée entre marqueurs est activé, vous pouvez aussi ajuster Temps d’interpolation (ms) pour contrôler la rapidité avec laquelle la caméra se stabilise sur la nouvelle vue.

Lecture

Utilisez Lecture pour lancer l’une des animations intégrées au modèle :

• Animation n°
• Ping-pong
• En boucle
• Répétitions

Ajouter animation et Retirer animation

Utilisez Ajouter animation pour ajouter une couche d’animation par-dessus l’état courant, et Retirer animation pour la supprimer.

Paramètres de Ajouter animation :

• Animation n°
• Poids
• Vitesse
• Ping-pong
• En boucle
• Répétitions
• Fondu entrant et Durée du fondu entrant
• Transition de vitesse, Durée de transition et Transition relative
• Temps de départ

Paramètres de Retirer animation :

• Animation n°
• Fondu sortant
• Durée du fondu sortant

Recentrer

Utilisez Recentrer pour réinitialiser la cible de caméra sur le modèle.

Synchroniser avec un autre composant

Comme n’importe quel composant, vous pouvez synchroniser votre modèle 3D avec un autre composant, comme une zone de défilement.

Pour créer une synchronisation :

1. Insérez le composant Synchronisation.
2. Cliquez sur + Ajouter dans ses propriétés.
3. Sélectionnez le composant 3D / AR puis le second composant.
4. Choisissez Synchroniser markers.

La synchronisation utilise uniquement les marqueurs caméra. Les marqueurs interactifs hotspot sont ignorés dans la synchronisation.

Lancer l’expérience AR

Sur iOS et Android, vous pouvez afficher l’objet 3D en réalité augmentée au-dessus de la caméra de l’appareil.

Pour configurer l’AR :

1. Activez AR (si disponible).
2. Sur iOS, activez Support iOS.
3. Saisissez le Nom du fichier USDZ correspondant au fichier inclus dans votre archive ZIP.

Pour lancer l’AR depuis votre interface, créez un bouton et utilisez

.

Si l’appareil ne peut pas lancer l’AR, le composant déclenche Erreur d’AR. Vous pouvez utiliser ce déclencheur pour afficher un contenu de secours.

Exemple pratique : déclencher du contenu depuis un hotspot

Un workflow courant consiste à placer plusieurs marqueurs interactifs hotspot sur un produit ou une scène, puis à les utiliser pour révéler des informations complémentaires.

1. Ajoutez un hotspot sur chaque point d’intérêt.
2. Activez Afficher annotation si vous voulez afficher un libellé directement sur le modèle.
3. Créez un Pop-up ou un composant Multi-state.
4. Dans le déclencheur du hotspot, choisissez Position.
5. Associez l’action qui ouvre le pop-up ou change l’état.

Cette approche permet à l’utilisateur d’explorer visuellement le modèle et d’afficher du contenu seulement lorsqu’il interagit avec un détail pertinent.

Voir aussi

• Marqueurs
• Synchronisation
• Pop-up