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

Découvrez comment afficher un objet 3D et créer des animations sur-mesure grâce aux marqueurs. Proposez une expérience en réalité augmentée (RA) en le projetant dans l'environnement de l'utilisateur. 

Insérer un objet 3D

Avant tout, votre objet 3D doit être disponible au format GLB ou glTF.

Compressez votre objet 3D au format ZIP et importez votre archive dans PandaSuite Studio.

Cliquez sur  Fichiers et importez votre fichier ZIP. 

Pour insérer votre objet 3D au sein de votre interface, cliquez sur Composants et insérez le composant 3D / AR. Dans les propriétés, cliquez sur Sélectionner à côté de Source. Sélectionnez votre fichier ZIP. 

Indiquez précisément le nom du fichier 3D dans l'archive : c'est le chemin pour que PandaSuite aille chercher le bon fichier.

Double-cliquez sur la zone du composant pour faire apparaître l'objet 3D et le manipuler depuis le studio. Utilisez le fil d'Ariane pour revenir au niveau de votre écran.

Voici les propriétés du composant 3D :

• Contrôle de la caméra
• Transition animée entre marqueurs
• Inciter à l'action
• Activer la rotation automatique 

Créer des marqueurs

Vous pouvez créer des marqueurs sur votre objet 3D, c'est-à-dire "marquer" une ou plusieurs positions de votre objet 3D qui vont vous servir de déclencheur ou d'objet d'une action.

Pour ajouter un marqueur, rendez-vous à l'intérieur du composant et cliquez sur le bouton +.

Si vous avez coché activer la propriété  Transition animée entre marqueurs, la transition entre ces marqueurs se fera automatiquement même si vous ne créez pas d'action.

Déclencher une action depuis l'objet 3D

Pour déclencher une action à partir de votre objet 3D, sélectionnez votre composant et dans l'onglet Actions, ajoutez une nouvelle action. Voici les déclencheurs disponibles :

• Modèle chargé
• Position (marqueur)
• Erreur de modèle
• Commence lecture
• Mise en pause
• Début de l'interaction utilisateur
• Fin de l'interaction utilisateur
• Erreur d'AR

Sélectionnez un déclencheur et associez l'action de votre choix.

Créer une action sur l'objet 3D

Choisissez un objet, un déclencheur et l'action  Agir sur un composant de la fenêtre Interactivités.

Sélectionnez le composant 3D/AR et choisissez une action parmi celles-ci :

• Changement de position (marqueur)
• Lecture
• Mettre en pause
• Lancer l'AR 

Synchroniser avec un autre composant 

Comme n'importe quel composant, vous pouvez synchroniser votre objet 3D avec n'importe quel autre composant (par exemple la zone de défilement).

Pour créer une synchronisation, insérez le composant  Synchronisation depuis Composants.

Dans les propriétés, cliquez sur + Ajouter. Sélectionnez le composant 3D/AR et l'autre composant depuis l'interface ou la liste des objets. Sélectionnez le composant 3D/AR et cliquez sur Markers dans les options. 

Déclencher l'expérience AR

Sur un appareil iOS ou Android, vous avez la possibilité de proposer une expérience en réalité augmentée en affichant l'objet 3D au-dessus de la caméra. 

Vérifiez que votre appareil et celui de vos utilisateurs est bien compatible avec l'expérience AR. Sur iOS, il est nécessaire d'avoir au minimum iOS 12. Sur Android, voici la liste des appareils et leur compatibilité : https://developers.google.com/ar/devices

Pour activer l'expérience AR, cochez l'option Activer l'expérience AR (si disponible) dans les propriétés. Pour iOS, vous devez également indiquer le nom du fichier USDZ : celui-ci doit être dans le même fichier ZIP que l'objet 3D, que vous avez uploadé dans PandaSuite Studio. 

Pour déclencher l'expérience AR, créez un bouton et associez l'action Agir sur un composant > Lancer l'AR.