Voici l'exemple suivant avec le marqueur visible et le marqueur caché par un cercle mauve.
Ce code HTML est une page web simple qui utilise A-Frame et AR.js pour créer une application de réalité augmentée (AR). Voici une explication détaillée de chaque partie du code :
<head>
<title> : Définit le titre de la page web qui s'affiche dans l'onglet du navigateur. Ici, le titre est “Ma première app AR”.
<script src=“https://aframe.io/releases/1.7.0/aframe.min.js”></script>:
Charge la bibliothèque A-Frame, un framework pour créer des expériences de réalité virtuelle (VR) et augmentée (AR) en utilisant des éléments HTML.
<script src=“https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js”></script> :
Charge AR.js, une extension d'A-Frame qui permet d'ajouter des fonctionnalités de réalité augmentée, comme la reconnaissance de marqueurs.
<body>
<a-scene>:
C'est l'élément principal d'A-Frame qui représente la scène 3D. Il contient divers attributs pour configurer la scène AR :
embedded: Indique que la scène est intégrée dans la page web plutôt que d'occuper tout l'écran.
arjs: Configure les paramètres spécifiques à AR.js :
- sourceType: webcam` : Utilise la webcam comme source vidéo.
- detectionMode: mono_and_matrix` : Détecte à la fois les marqueurs simples et les matrices de marqueurs.
- matrixCodeType: 3×3` : Spécifie le type de matrice de marqueurs (ici, une matrice 3×3).
- trackingMethod: best` : Utilise la meilleure méthode de suivi disponible.
- changeMatrixMode: modelViewMatrix` : Change le mode de matrice pour le rendu.
renderer: Configure les paramètres du rendu :
- sortObjects: true : Trie les objets pour un rendu correct.
- antialias: true : Active l'anti-aliasing pour des bords plus lisses.
- colorManagement: true : Gère les couleurs pour un rendu plus précis.
- logarithmicDepthBuffer: true : Utilise un tampon de profondeur logarithmique pour améliorer le rendu des objets proches et éloignés.
vr-mode-ui=“enabled: false”: Désactive l'interface utilisateur du mode VR.
smooth: Lisse les mouvements de la caméra pour une expérience plus fluide
smoothCount, moothTolerance, smoothThreshold : Paramètres pour contrôler le lissage.
sourceWidth, sourceHeight, displayWidth, displayHeight: Définit les dimensions de la source vidéo et de l'affichage.
Ce code configure une scène AR de base qui utilise la webcam pour détecter des marqueurs et afficher des objets 3D en réalité augmentée.
Pour une application complète, vous devrez ajouter des éléments 3D (comme `<a-box>`, `<a-sphere>`, etc.) à l'intérieur de la balise `<a-scene>`. Il est aussi possible d'ajouter du son, une vidéo…
bref presque tout est possible de faire mais parfois il faut penser à ajouter la bib correspondante dans le head du fichier HTML : Par exemple pour insérer un décor :
unpkg.com/aframe-environment-component@1.5.x/dist/aframe-environment-component.min.js“>
Se référencer à https://aframe.io/|accès A-Frame]]
celine