Aller au contenu

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.

👉💡 Pour convertir un FXB en GLB, nous vous recommandons d’utiliser la plateforme clara.io. Celle-ci est gratuite et permet de changer également quelques textures pour s’adapter à d’autres usages.

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.

Selectionner 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.

Manipuler l'objet 3D

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 +.

Ajouter un marqueur

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.

Déclencheur et action

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
Choisir une action

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.

Propriétés de synchronisation

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.

Déclencher l'expérience AR