WebAR tuto : personnalisez le curseur de l'expérience markerless

S’abonner

Pour pouvoir personnaliser une expérience webAR vous devez avoir souscrit à l'option "WebAR design" qui vous permet d'accéder à l'interface de personnalisation. Si ce n'est pas déjà le cas vous pouvez contacter notre équipe commercial (sales@ar-go.co).


Nous allons nous intéresser dans ce tutoriel à la personnalisation de l'expérience markerless. Pour plus de détails sur les différents types de webAR disponibles vous pouvez regarder la vidéo ci-dessous.

 

 

Le module de personnalisation webAR permet de personnaliser en quelques clics la page qui s'affiche lorsque l'utilisateur ouvre l'url correspondant à votre campagne. Dans le cas d'une URL personnalisée, celle-ci prend généralement la forme https://nomdevotremarque.webargo.app.

Dans votre expérience webAR il est possible d'utiliser l'animation 3D de votre choix pour le curseur.
Le curseur 3D est une aide visuelle pour aider l'utilisateur à positionner l'expérience AR où il le souhaite dans son environnement.

Afin de vous faciliter le travail nous vous proposons d'utiliser comme point de départ l'animation par défaut actuellement utilisée dans l'application ARGO WebAR : ici

Vous pouvez ensuite modifier ce curseur animé avec le logiciel 3D de votre choix.
Nous vous suggérons l'outil en ligne https://threejs.org/editor/ qui vous permet d'éditer les différentes textures de l'animation 3D pour qu'elle soit adaptée à vos besoins.

 

tuto1.png

tuto3.pngtuto2.png

 

Nous avons ajouté plusieurs paramètres au code pour : 

  • activer le markerless
  • utiliser un curseur personnalisé
  • récupérer l'expérience 3D associée au bon marqueur.

Il est utile de rappeler que vous pouvez personnaliser le code de la landing page, il suffit juste de bien conserver les paramètres ci-dessus a la fin du code HTML.
 
Pour vous faciliter la tache, n
ous avons stocké l'animation 3D du curseur dans notre media library à l'url suivante (Vous pouvez stocker le modèle .glb du curseur où vous le souhaitez):

https://api.bear2b.com/media/1065273369626121cc267902.98476297.glb
 
Le code ajouté est le suivant :

<script id="custom-script" type="text/javascript">
// lien vers le glb a utilisé pour le curseur
app.options.scene.clickmePath="https://api.bear2b.com/media/1065273369626121cc267902.98476297.glb"
app.options.app.strategies={
tracking:0, // pas de tracking pour utiliser le mode markerless
afterLost:3 // Option correspondant au mode markerless
}
// référence du marqueur a utiliser pour récupérer l'expérience 3D associée à afficher
app.options.reco.pageId=[56559]
</script>


Dans la fenêtre de code dans le manager iI faut ajouter ce snippet de code juste avant la balise </body> comme suit :

Screenshot_2022-04-26_at_17.17.11.png

 

Vous n'avez plus qu'à sauvegarder vos modifications et tester votre campagne ;)

 

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

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.