Réalité augmentée avec <model-viewer>

Vous pouvez utiliser le composant Web <model-viewer> pour afficher des modèles 3D et interagir avec ceux-ci sur le Web. Il permet de positionner et d'interagir facilement avec ces modèles 3D en réalité augmentée sur le Web.

Sur un appareil Android compatible avec ARCore, un composant <model-viewer> avec l'attribut ar affiche un bouton, comme illustré dans l'exemple suivant:

Capture d&#39;écran de la visionneuse de modèles

Sur les appareils compatibles avec ARCore, appuyer sur ce bouton permet d'afficher le modèle à l'aide de la fonctionnalité WebXR de Chrome ou de l'application Scene Viewer, en fonction de la valeur de l'attribut ar-modes.

Vous pouvez personnaliser l'apparence du bouton de RA à l'aide d'emplacements de composants Web. Reportez-vous à <model-viewer> documentation pour obtenir un exemple. Pour en savoir plus sur l'affichage de modèles 3D interactifs en RA à partir d'une application ou d'un navigateur Android, consultez également Scene Viewer.

Premiers pas avec <model-viewer>

Pour commencer à utiliser <model-viewer> sur n'importe quelle page Web, procédez comme suit.

Ajouter la dépendance <model-viewer>

À partir du CDN de décompression

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Depuis npm

npm install @google/model-viewer

Ensuite, ajoutez <model-viewer> à node_modules/model-viewer/dist/model-viewer.min.js à l'aide de votre bundleur préféré,

Inclure la balise <model-viewer>

Ajoutez le composant Web <model-viewer> à votre document HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

Configurer la balise <model-viewer>

L'affichage du modèle peut être configuré en modifiant les attributs du tag <model-viewer>. Ces propriétés exposent des options telles que le mouvement de la caméra, les animations du modèle et des informations sur l'environnement. La documentation <model-viewer> liste tous les attributs qui peuvent être définis. L'éditeur de modèles peut générer une balise HTML <model-viewer> et configurer des propriétés telles que la position et l'éclairage de la caméra.

Capture d&#39;écran de l&#39;éditeur de modèle

Compatibilité des modèles

Les modèles au format de fichier gltf et glb sont compatibles avec <model-viewer>. Reportez-vous à three.js GLTFLoader documentation pour obtenir la liste des extensions glTF compatibles.

Pour vous assurer que votre modèle s'affiche correctement, vérifiez-le dans l'éditeur de modèles.

Navigateurs et appareils compatibles

Vous pouvez utiliser <model-viewer> pour afficher des modèles 3D sur une page Web dans tous les navigateurs permanents. Nous vous recommandons d'utiliser un polyfill :focus-visible pour masquer les anneaux de sélection lorsque l'élément est sélectionné.

Les fonctionnalités de RA nécessitent un appareil compatible ARCore et l'installation des Services Google Play pour la RA. Pour en savoir plus sur le mode RA de webxr, consultez Compatibilité avec les navigateurs WebXR. Par défaut, si WebXR n'est pas compatible, c'est le lecteur de scènes Scene Viewer qui est utilisé.

Étapes suivantes