L'ajout de modèles 3D à un site Web peut s'avérer difficile. <model-viewer> est aussi simple que l'écriture de code HTML.
Ajouter des modèles 3D à un site Web est une tâche complexe. Les modèles 3D sont idéalement affichés dans une visionneuse qui peut fonctionner de manière responsive sur tous les navigateurs, y compris les smartphones, les ordinateurs de bureau ou même les nouveaux visiocasques. Le lecteur doit prendre en charge l'amélioration progressive pour les performances et la qualité de l'affichage. Elle 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 rester à jour avec les technologies actuelles. Elle doit être performante et accessible. Toutefois, la création d'un tel lecteur 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.
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 permettre l'ajout de 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 les 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 standards de la plate-forme Web. Un composant Web se comporte à toutes fins utiles comme un élément standard. Il possède un tag unique, peut avoir des propriétés et des méthodes, et peut déclencher des événements et y répondre. En résumé, vous n'avez pas besoin de connaissances particulières pour utiliser un composant Web, et encore moins <model-viewer>.
Cet article traite des fonctionnalités spécifiques à <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
Pour intégrer un modèle 3D, il vous suffit d'utiliser 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 permettent de contrôler le mouvement et 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>
Différer le chargement avec des images d'affiche
Le chargement des modèles 3D prend du temps. L'ajout d'un attribut poster permet d'afficher une image jusqu'à ce que le modèle soit prêt à être utilisé.
Vous pouvez générer une image d'affiche 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, en s'adaptant aux mobiles et aux ordinateurs. Il peut également gérer plusieurs instances sur une page et utilise Intersection Observer pour économiser la batterie et les cycles du GPU lorsqu'un modèle n'est pas visible.
L'utilisation de l'éditeur décrit précédemment pour créer une image d'affiche permet à cette image unique de correspondre au rendu 3D, même si le format de <model-viewer> s'adapte à différentes tailles d'écran.
Autres fonctionnalités
Consultez la documentation <model-viewer> pour découvrir des démonstrations de fonctionnalités plus avancées.
Vous pouvez par exemple ajouter une skybox projetée au sol, et créer des textures animées et des points d'intérêt.