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

Le composant Web <model-viewer> permet d'afficher des modèles 3D sur le Web et d'interagir avec eux. Il permet de placer et d'interagir facilement avec ces modèles en réalité augmentée sur le Web.

Lorsqu'il est affiché 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 du lecteur de modèle

Si vous appuyez sur ce bouton sur un appareil compatible avec ARCore, le modèle s'affiche à 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. Pour obtenir un exemple, consultez <model-viewer> documentation. Consultez également Scene Viewer pour en savoir plus sur l'affichage de modèles 3D interactifs en RA à partir d'une application ou d'un navigateur Android.

Premiers pas avec <model-viewer>

Les étapes suivantes montrent comment commencer à utiliser <model-viewer> sur n'importe quelle page Web.

Ajouter la dépendance <model-viewer>

À partir du CDN décomposé

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

À partir de npm

npm install @google/model-viewer

Ensuite, ajoutez <model-viewer> à node_modules/model-viewer/dist/model-viewer.min.js à l'aide de votre bundler 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>

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

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

Compatibilité des modèles

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

Pour vous assurer que votre modèle s'affiche correctement, utilisez l'éditeur de modèles.

Navigateurs et appareils compatibles

L'utilisation de <model-viewer> pour afficher des modèles 3D dans une page Web est compatible avec tous les navigateurs evergreen. 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 avec ARCore et l'installation des Services Google Play pour la RA. Pour le mode RA webxr, consultez Compatibilité avec les navigateurs WebXR. Par défaut, si WebXR n'est pas compatible, l'Aperçu de la scène est utilisé à la place.

Étapes suivantes