Tutoriel bulle 360°

S’abonner

La WebAR offre un nombre incalculable de possibilité créative.

Nous allons voir aujourd'hui comment créer une bulle 360° sur notre éditeur, étape après étape. 

Vous pourrez retrouver ici notre vidéo explicative qui vient compléter cet article. 

 

1) Personnalisez votre sphère 3D avec une image 360° de votre choix

  • Possibilité d’importer cette sphère 3D sur le site internet threejs.org

  • Changez l’image par celle son choix 
    onglet material > cliquer sur l'image "Map" > importer l'image souhaitée

    Vous pouvez trouver des images 360° sur de nombreuses banques d’images, comme par exemple EnvatoElements ou encore ShutterStock.

    Vous pouvez également réaliser vos photos 360° vous-même à l’aide de votre téléphone portable via l’option panorama qui est proposé lorsque vous ouvrez votre caméra.

    Exemple d'une photo 360°
    spherical-360-panorama-projection-interior-of-rece-2021-08-26-18-15-26-utc.jpg

  • Une fois personnalisé, exportez l'objet 3D
    file > export GLB

2) Créez un projet, téléchargez votre marker et allez dans 'Paramètres de diffusions'

 

Sans_titre.jpg

 

Vous devez maintenant personnaliser l'url de votre projet WebAR dans 'Paramètres de diffusion WebAR. Vous pouvez le customiser avec votre nom de marque par exemple.

 

Sans_titre__1_.jpg

 

3) Dans la section 'Design WebAR' 

Dans l'encadré 'Personnalisation de l'expérience puis dans 'Stratégies d'affichages des scènes', sélectionnez la stratégie 'Gyroscope' 

Sans_titre__2_.jpg

 

Et assurez vous que l'option 'Afficher marker si pas de tracking' juste en dessous est décochée. 

 

Sans_titre__3_.jpg

 

4) Allez sur l'éditeur ARGO

Vous allez aller récupérer le PID de l'expérience, pour cela rendez vous sur l'éditeur.

 

Sans_titre__4_.jpg

 

Il y a une molette paramètres en haut à gauche de l'éditeur.

 

Sans_titre__5_.jpg

 

Cliquez sur la molette puis sur 'Informations techniques' en bas.

 

Sans_titre__6_.jpg

 

Vous allez ensuite copier le PID/ID Page

 

Sans_titre__7_.jpg

 

Puis retourner dans le manager dans la section 'Design WebAR' puis plus bas dans l'encadré 'Reconnaissance de marker' pour coller le PID.

 

Sans_titre__8_.jpg

 

N'oubliez pas de sauvegarder vos modifications

 

5) Retournez dans l'éditeur, importez votre objet 3D et commencez à remplir votre bulle 360°

  • Placez l'objet 3D de façon à ce qu'il recouvre la totalité du marker comme ci-dessous

Capture_d_e_cran_2023-04-04_a__16.42.36.png

 

Placer les différents assets aux endroits souhaités dans votre bulle 360° 

Pour positionner votre vidéo, par exemple, il faudra cocher la case “vertical”, la redimensionner pour que sa taille soit inférieure à celle de la bulle et la placer à l’intérieur de la bulle.

Il va maintenant falloir activer le mode 3D en haut à gauche de l’éditeur, et zoomer au maximum de façon à entrer dans la bulle. 

A ce moment-là, vous pourrez aisément ajuster la position de votre vidéo afin qu’elle se trouve à l’endroit souhaité.



Capture_d_e_cran_2022-04-06_a__16.22.53.png

 

 

 

Si vous l'avez raté voici notre tutoriel sur la bulle 360°  : 

 

 

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Commentaires

9 commentaires
  • Hello. Merci pour le super tuto. C'est une fonctionnalité très whaou effect que j'avais envie de découvrir. Les placements des objets dans la bulle et son espace 3D n'est pas évident.
    Pas facile de se déplacer dans cette bulle et d'y placer les objets aux bons endroits.
    Je tâtonne pour l'instant mais ne désespère pas d'y arriver.
    Elric

    1
    Actions pour les commentaires Permalien
  • Bonjour, merci pour le tuto mais j'ai un message d'erreur mentionnant "Erreur : Pas de gyroscope". Ai-je oublié de faire quelque chose ? Merci beaucoup d'avance pour votre aide !

    0
    Actions pour les commentaires Permalien
  • Je crée un ticket pour le support, vous serez en copie.

    Bien à vous,
    S.

    0
    Actions pour les commentaires Permalien
  • Bonjour,

    Quel device utilisez-vous?
    Pouvez-vous partager l'url de votre experience webar afin que nous puissions mieux identifier le pb ?

    Bien à vous,
    S.

    0
    Actions pour les commentaires Permalien
  • Bonjour Sophie, voici l'url : testsphere.webargo.app/?pid=833672&s_t=0&s_al=2
    J'utilise un iPhone 10.
    Merci d'avance pour votre aide.

    0
    Actions pour les commentaires Permalien
  • Bonjour Elric,

    Nous n'avons pas reproduit l'erreur. Pouvez-vous réessayer, s'il vous plait, et si le problème toujours existe, créer un ticket dans le Support. Veuillez indiquer votre device et joindre un screen avec l'erreur, s'il vous plait.

    Bien cordialement,

    Sophie

    0
    Actions pour les commentaires Permalien
  • Merci Sophie pour la réponse.
    J'ai modifié l'url du qr code généré et maintenant l'url est correcte. Malheureusement je n'ai pas le chargement attendu de la bulle. Après toutes les autorisations données ( mvt + accès caméra) à la 1ere arrivé sur la webargo app le rond de chargement se remplit puis bug et il y a un reset. Je reviens sur la webargo app a nouveau. Je re-valide l'ensemble ( bt c'est parti + acces mvts + accès caméra) le loading se refait et finit par mettre un message d'erreur :
    "un problème récurrent est survenu sur " https://testbulle.webargo.app/?pid=833549&s_t=0&s_al=2". J'ai essayé sous chrome et safari.

    0
    Actions pour les commentaires Permalien
  • Bonjour,
    j'ai enfin pu essayé ce tuto maintenant que j'ai accés à la fonction Design WebAR.
    j'ai un message d'erreur a l'ouverture du qr code généré selon votre tuto.

    https://www.testbulle.webargo.app/?pid=833549&s_t=0&s_al=2

    Ça me met le message : Ce site est inacessible Impossible de trouver l'adresse IP du serveur de/www.testbulle.webargo.app.

    Merci pour votre aide.

    0
    Actions pour les commentaires Permalien
  • Bonjour Elric,

    Veuillez nous excuser, nous avons une erreur dans notre tutoriel. Nous sommes en train de le corriger.

    L'URL ne doit pas contenir www. Pourriez-vous essayer votre URL sans www, s'il vous plait ?

    Bien cordialement,

    Sophie

    0
    Actions pour les commentaires Permalien

Vous devez vous connecter pour laisser un commentaire.