Composant Web <model-viewer>

L'ajout de modèles 3D à un site Web n'est pas une mince affaire. Avec <model-viewer>, il est aussi facile d'écrire du code HTML.

Joe Medley
Joe Medley

Ajouter des modèles 3D à un site Web n'est pas une mince affaire. Les modèles 3D sont idéalement présentés dans une visionneuse qui peut fonctionner de manière réactive sur tous les navigateurs, y compris les smartphones, les ordinateurs de bureau et même les nouveaux écrans casque. La visionneuse doit prendre en charge l'amélioration progressive des performances et de la qualité d'affichage. Elle doit prendre en charge les cas d'utilisation sur tous les appareils, des smartphones anciens à faible puissance aux appareils plus récents compatibles avec la réalité augmentée. Elle doit rester à jour des technologies actuelles. Elle doit être performante et accessible. Cependant, la création d'un tel type de visionneuse nécessite des compétences spécialisées en programmation 3D et peut s'avérer difficile pour les développeurs Web qui souhaitent héberger leurs propres modèles au lieu d'utiliser un service d'hébergement tiers.

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

Qu'est-ce qu'un composant Web ?

Un composant Web est un élément HTML personnalisé créé à partir des fonctionnalités standards de la plate-forme Web. Pour tous les intents et toutes les finalités, un composant Web se comporte comme un élément standard. Elle possède une balise unique, peut comporter des propriétés et des méthodes, et peut se déclencher et répondre à des événements. Pour résumer, vous n'avez besoin de connaître rien de spécial pour utiliser un composant Web, et encore moins <model-viewer>.

Cet article traite 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. Si vous utilisez 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 se présente comme suit:

Ajouter du mouvement et de l'interactivité

Les attributs auto-rotate et camera-controls permettent d'assurer le mouvement et le contrôle à l'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>

Retard de chargement des images 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 à être utilisé. Vous pouvez générer une image poster identique au rendu 3D à 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 à la fois pour les appareils mobiles et les ordinateurs de bureau. Il peut également gérer plusieurs instances sur une page et utilise Intersection Observeer pour économiser la batterie et prolonger 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 poster permet de faire correspondre cette image au rendu 3D, même si le format de <model-viewer> répond aux différentes tailles d'écran.

Plusieurs images de combinaison spatiale représentant la réactivité.
Plusieurs images de combinaison spatiale 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. Il est par exemple possible d'ajouter un skybox projeté au sol et de créer des textures animées et des zones cliquables.