Composant Web <model-viewer>

Ajouter des modèles 3D à un site Web peut s'avérer délicat. <model-viewer> est aussi simple que l'écriture de code HTML.

Joe Medley
Joe Medley

Ajouter des modèles 3D à un site Web est délicat. Idéalement, les modèles 3D sont affichés dans un visualiseur qui peut fonctionner de manière responsive dans tous les navigateurs, y compris sur les smartphones, les ordinateurs de bureau ou même les nouveaux écrans montés sur la tête. Le lecteur doit prendre en charge l'amélioration progressive pour les performances et la qualité du rendu. Il doit prendre en charge les cas d'utilisation sur tous les appareils, des smartphones plus anciens et moins puissants aux appareils plus récents compatibles avec la réalité augmentée. Elle doit rester à jour avec les technologies actuelles. Il doit être performant et accessible. Cependant, créer un tel lecteur nécessite des compétences spécialisées en programmation 3D, et peut constituer un défi pour les développeurs Web qui souhaitent héberger leurs propres modèles au lieu d'utiliser un service d'hébergement tiers.

Le composant Web <model-viewer> vous permet toutefois d'ajouter de manière déclarative un modèle 3D à une page Web, tout en hébergeant le modèle sur votre propre site. L'objectif du composant est de vous permettre d'ajouter des modèles 3D à votre site Web sans avoir à comprendre la technologie et les plates-formes sous-jacentes. Le composant Web est compatible avec le responsive design et des cas d'utilisation tels que la réalité augmentée sur certains appareils. Il inclut des fonctionnalités d'accessibilité, de qualité de rendu et d'interactivité.

Qu'est-ce qu'un composant Web ?

Un composant Web est un élément HTML personnalisé créé à partir de fonctionnalités de plate-forme Web standards. À tous égards, un composant Web se comporte comme un élément standard. Il dispose d'une balise unique, peut avoir des propriétés et des méthodes, et peut déclencher et répondre à des événements. En résumé, vous n'avez aucune connaissance particulière pour utiliser un composant Web, et encore moins <model-viewer>.

Cet article présente des fonctionnalités propres à <model-viewer>. Si vous souhaitez en savoir plus sur les composants Web, webcomponents.org est un bon point de départ.

Que peut faire <model-viewer> ?

Les exemples suivants illustrent certaines fonctionnalités de <model-viewer>.

Modèles 3D de base

L'intégration d'un modèle 3D est aussi simple que le balisage suivant. En utilisant des fichiers glb, ce composant fonctionnera sur tous les principaux navigateurs.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

Ce code s'affiche comme suit :

Ajoutez du mouvement et de l'interactivité

Les attributs auto-rotate et camera-controls fournissent des commandes de mouvement et d'utilisateur. Ce ne sont pas les seuls attributs possibles. Consultez la documentation pour obtenir la liste complète des attributs.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Différer le chargement avec des images de type poster

Le chargement de tous les modèles 3D prend du temps. L'ajout d'un attribut poster signifie qu'une image s'affiche jusqu'à ce que le modèle soit prêt à l'emploi. Une image de poster qui sera identique au rendu 3D peut être générée à l'aide de l'éditeur.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Responsive design

Le composant gère certains types de responsive design, le scaling pour les mobiles et les ordinateurs de bureau. Il peut également gérer plusieurs instances sur une page et utilise IntersectionObserver pour économiser la batterie et les cycles de GPU lorsqu'un modèle n'est pas visible.

L'utilisation de l'éditeur décrit précédemment pour créer une image de poster permet à cette seule image de correspondre au rendu 3D, même si le format de <model-viewer> répond à différentes tailles d'écran.

Plusieurs images de combinaisons spatiales représentant la réactivité.
Plusieurs images de combinaisons spatiales représentant la réactivité.

Autres fonctionnalités

Consultez la documentation <model-viewer> pour découvrir des démonstrations de fonctionnalités plus avancées. Vous pouvez ainsi ajouter un skybox projeté au sol, créer des textures animées et des points d'intérêt.