Composant Web <model-viewer>

L'ajout de modèles 3D à un site Web peut s'avérer délicat. <model-viewer> est aussi simple que d'écrire du 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. Il doit être à jour avec les technologies actuelles. Il doit être performant et accessible. Toutefois, la création d'un tel visualiseur nécessite des compétences de programmation 3D spécialisées et peut représenter 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 pas besoin de connaître quoi que ce soit de spécial pour utiliser un composant Web, et encore moins <model-viewer>.

Cet article présente les 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 :

Ajouter du mouvement et de l'interactivité

Les attributs auto-rotate et camera-controls fournissent des commandes de mouvement et d'utilisateur. Il ne s'agit pas des 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, en ajustant la mise à l'échelle pour les appareils mobiles et les ordinateurs. 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 sur <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.