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° - 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'
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.
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'
Et assurez vous que l'option 'Afficher marker si pas de tracking' juste en dessous est décochée.
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.
Il y a une molette paramètres en haut à gauche de l'éditeur.
Cliquez sur la molette puis sur 'Informations techniques' en bas.
Vous allez ensuite copier le PID/ID Page
Puis retourner dans le manager dans la section 'Design WebAR' puis plus bas dans l'encadré 'Reconnaissance de marker' pour coller le PID.
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
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é.
Si vous l'avez raté voici notre tutoriel sur la bulle 360° :
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
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 !
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.
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.
Je crée un ticket pour le support, vous serez en copie.
Bien à vous,
S.
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.
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
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.
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
Vous devez vous connecter pour laisser un commentaire.