Différences

Ci-dessous, les différences entre deux révisions de la page.

--- ressource:code:fontionnement_de_la_realite_augmentee [2025/03/27 12:09]
celine créée
+++ ressource:code:fontionnement_de_la_realite_augmentee [2025/03/28 08:42] (Version actuelle)
celine [==== Tableau des marqueurs ====]
@@ Ligne 55: / Ligne 55: @@
 Il est important aussi de régler les rotations et les positions des axes x, y et z utilisés pour identifier des points dans un espace 3D sous la forme de coordonnées (x,y,z).
 [[https://developer.mozilla.org/fr/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained|Comprendre les valeurs de la position et de la rotation ]]
-Voici l'exemple suivant avec le marqueur de visible et le marqueur caché par un cercle mauve.
-{{:ressource:code:imprimante_3d_qrcode.png?400|}}  {{:ressource:code:imprimante_3d.png?direct&400|}}
-{{:ressource:code:ex_code_html.png?direct&400|}}
-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: 3x3` : Spécifie le type de matrice de marqueurs (ici, une matrice 3x3).
-    - 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.
-[[http://aframe.io/docs/1.7.0/primitives/a-video.html|Lien externe]]
-[[https://aframe.io/docs/1.7.0/primitives/a-sound.html|Lien externe]]
-__**Se référencer à**__ [[https://aframe.io/]]|Lien externe]]