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 une campagne, téléchargez votre marker et importer votre objet 3D dans l'éditeur
- Placez l'objet 3D de façon à ce qu'il recouvre la totalité du marker
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é.
3) Ajoutez une webview afin de définir le positionnement de la caméra dans votre bulle 360°
L’intégration d’une webview spéciale est essentielle pour que l’expérience fonctionne parfaitement.
Cette dernière va permettre de placer la caméra à un point précis lors de l’entrée dans l’expérience immersive.
- Pour cela, il vous faudra sélectionner l’asset webview qui se situe sur la gauche de l’editeur
- Ensuite, cliquer à droite sur “Modifier HTML” et intégrez-y cette ligne de code:
const camera=webArgo.getReferences().camera
camera.position.y=0.
4) Personnalisez les paramètres d'affichage de la WebAR
Votre URL d'accès à votre scanneur WebAR doit être personnalisé afin de pouvoir accédez aux donnés de mouvement et d'orientation, nécessaire pour pouvoir tourner sur sois-même dans la bulle 360°.
- Ouvrez votre campagne et cliquez sur l'onglet "Design WebAR"
- Copiez votre URL
- Rendez vous sur un site de générateur de QRcode (par exemple QRcode Monkey)afin de pouvoir modifier manuellement l'URL qui se situe derrière
- Collez votre URL dans l'espace prévu à cet effet
- Ajoutez la terminaison /?pid=xxxxxx&s_t=0&s_al=2 à l’URL que vous venez de coller
ex: https://web.ar-go.co/?pid=xxxxxx&s_t=0&s_al=2
- Remplacez les xxxxxx par le numéro de pageID que vous trouverez dans l'URL de votre projet dans l'éditeur
ex: https://web.ar-go.co/?pid=784395&s_t=0&s_al=2
- Cliquez ensuite sur "Create QR Code" et téléchargez votre QR code
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 !
Je crée un ticket pour le support, vous serez en copie.
Bien à vous,
S.
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.
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
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,
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
Vous devez vous connecter pour laisser un commentaire.