Cette page a été traduite par l'API Cloud Translation.

Ajouter des modèles 3D au Web avec <model-viewer>

Aujourd'hui, il est courant que les gens aient dans leur poche des appareils compatibles avec la réalité augmentée (RA) et la réalité virtuelle (RV). De plus en plus, le contenu que nous partageons les uns avec les autres sur ces appareils est en 3D. Dans cet atelier de programmation, vous allez apprendre à utiliser un composant Web appelé <model-viewer> pour ajouter du contenu 3D à votre site Web ou à votre application Web progressive (PWA) aussi facilement que vous ajouteriez une image avec HTML.

Objectif de cet atelier

Un site Web contenant un modèle 3D interactif avec la possibilité d'afficher des hologrammes en RA

Points abordés

Installer le composant Web <model-viewer> sur votre site Web
Utiliser <model-viewer> pour présenter un modèle 3D dans une mise en page Web standard
Personnaliser <model-viewer> pour donner du style à la présentation

Prérequis

Un navigateur Web Nous vous recommandons d'utiliser Chrome, mais n'importe quel navigateur moderne (Firefox, Safari, Edge) fonctionnera.
Node.js et un éditeur de texte, ou accès à Glitch.
Des connaissances de base en HTML, CSS, JavaScript et dans les Outils pour les développeurs Chrome

Cet atelier de programmation est consacré à <model-viewer> et aux modèles 3D. Les concepts et les blocs de codes non pertinents ne sont pas abordés, et vous sont fournis afin que vous puissiez simplement les copier et les coller.

Option 1 : Glitch

Vous pouvez utiliser un outil d'édition de code en ligne comme Glitch pour héberger votre projet et voir les modifications.

Pour commencer à utiliser Glitch, cliquez sur le bouton suivant :

Ouvrez votre environnement Glitch préchargé.

À partir de là, vous pouvez utiliser l'éditeur de code sur Glitch pour modifier vos fichiers. Lorsque vous êtes prêt, commencez à diffuser votre application à l'aide du bouton "Show Live" (Afficher en direct). Essayez maintenant. La page suivante devrait s'afficher :

Option 2 : Serveur local

Un serveur local vous permettra d'utiliser l'éditeur de code de votre choix.

Installer le serveur

Nous aurons besoin d'un moyen de diffuser des pages Web locales. Un moyen simple consiste à utiliser Node.js et serve, un serveur de contenu statique simple.

Consultez le site Web de Node.js pour savoir comment l'installer sur votre système d'exploitation. Une fois Node.js installé, exécutez cette commande pour installer serve :

npm install -g serve

Télécharger le code

Un modèle de départ, ainsi que tous les exemples d'assets, sont disponibles au téléchargement. Cliquez sur le lien suivant et décompressez le contenu dans le répertoire dans lequel vous souhaitez placer votre projet :

Télécharger le code source

Vous pouvez également utiliser git pour cloner le dépôt :

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

Exécuter le serveur

À partir du répertoire de modèles extrait ci-dessus (ou dans le répertoire cloné, si vous avez utilisé git), exécutez la commande serve pour démarrer un serveur Web :

Accédez à cette adresse (dans la capture d'écran ci-dessus, il s'agit de http://localhost:5000, mais elle peut être différente sur votre machine) pour voir un point de départ très simple :

Nous allons commencer par modifier le fichier index.html, soit via l'éditeur Web Glitch, soit via votre éditeur de code préféré si vous utilisez le serveur local.

Ajouter la bibliothèque <model-viewer>

Nous devrons inclure un ensemble de fichiers JavaScript pour utiliser <model-viewer>.

La section suivante ajoute la bibliothèque <model-viewer> à votre page. Collez le code suivant à la fin de <body>.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

Nous venons d'ajouter des bibliothèques, sans modifier le contenu. Si vous actualisez la page, vous verrez le même contenu. Si vous ouvrez la console des outils de développement, vous verrez peut-être des avertissements concernant les API WebXR manquantes, mais ils sont normaux jusqu'à ce que cette API soit entièrement publiée.

Maximiser la compatibilité

<model-viewer> est compatible avec de nombreux navigateurs modernes. Toutefois, si vous souhaitez étendre le nombre de navigateurs compatibles avec votre page, vous pouvez inclure des polyfills supplémentaires.

Vous trouverez ci-dessous l'ensemble des paramètres recommandés. Ces éléments vous aideront à offrir une expérience de qualité sur tous les navigateurs modernes. Pour en savoir plus, consultez la documentation sur les polyfills<model-viewer>.

Collez le code suivant dans <head>.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

Ajouter <model-viewer>

Ajoutons maintenant la balise <model-viewer> à la page pour afficher un élément 3D. Remplacez l'élément <p> existant par le code suivant :

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

Seuls deux attributs sont à mentionner ici :

L'attribut src spécifie l'emplacement à partir duquel charger le modèle 3D. Dans cet exemple, nous avons utilisé un modèle Astronaut de Poly, disponible sous licence CC-BY.
L'attribut alt contient une description textuelle alternative du modèle pour l'accessibilité.

Vous remarquerez peut-être que ces deux attributs présentent de fortes similitudes avec les attributs de la balise img.

Un rechargement affichera l'astronaute :

Bravo ! Vous avez un modèle 3D sur le Web !

Dans les étapes suivantes, nous allons tester davantage d'interactivité et de mouvement, modifier l'apparence de l'élément et nous familiariser avec la RA.

Ajoutons un peu d'interactivité au modèle. Par défaut, le modèle tourne pour indiquer aux utilisateurs qu'il est interactif (et aussi pour le mettre en valeur). Nous activons ensuite les commandes pour que les utilisateurs puissent le déplacer eux-mêmes avec leur souris ou par commande tactile.

Pour ce faire, il vous suffit d'ajouter les attributs auto-rotate et camera-controls à l'élément <model-viewer>.

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

Lorsque vous actualisez la page, l'astronaute tourne lentement. Si vous essayez de faire glisser le modèle (en cliquant et en déplaçant la souris, ou en faisant glisser votre doigt si vous êtes sur un appareil tactile), il pivote.

Combinées, ces fonctionnalités donnent à l'utilisateur l'impression qu'il s'agit de plus qu'une simple image statique et lui offrent un sentiment d'interactivité pour qu'il se sente impliqué (et qu'il puisse voir l'arrière de votre modèle).

Maintenant que nous avons un peu de mouvement, voyons comment modifier l'apparence pour rendre le modèle vraiment attrayant.

Mettre à jour le modèle

Certaines de ces modifications (en particulier celles concernant l'éclairage) seront plus visibles avec certains modèles. Commençons par mettre à jour l'attribut src pour qu'il pointe vers un nouveau modèle : third_party/DamagedHelmet/DamagedHelmet.gltf (publié sous licence Creative Commons Attribution-NonCommercial sur Sketchfab). La source de l'élément entier doit maintenant se lire comme suit :

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

Ce modèle illustrera certaines des modifications que nous allons apporter.

Modifier la couleur d'arrière-plan

Commençons par changer la couleur d'arrière-plan pour que le modèle se détache de la page. Ajoutez l'attribut suivant à votre balise <model-viewer> :

background-color="#70BCD1"

Définir la carte de l'environnement

Les cartes d'environnement sont utilisées pour fournir une scène englobante qui se reflète sur le modèle et pour spécifier la configuration de l'éclairage. L'éclairage par défaut est excellent (et compatible avec l'éclairage de Scene Viewer d'ARCore), mais vous pouvez parfois avoir besoin d'un environnement personnalisé ou d'un éclairage spécifique pour obtenir les résultats souhaités. Spécifions l'attribut environment-image (studio_small_07_1k.hdr provient de hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

Ajouter une ombre

L'ombre projetée par l'objet ajoute de la profondeur à la scène. L'attribut suivant, lorsqu'il est ajouté à notre élément <model-viewer>, projette une ombre :

shadow-intensity="1"

Modifier l'intensité de l'éclairage

Le modèle est un peu sombre. Éclaircissons-le un peu pour que nous puissions voir plus de détails. L'éclairage de scène par défaut et celui de la carte environmap que nous avons ajoutée peuvent être ajustés indépendamment. Ajoutez les lignes suivantes :

stage-light-intensity="3" environment-intensity="2"

Chacune de ces modifications était assez petite, mais le modèle est maintenant beaucoup plus performant.

Nous allons maintenant examiner d'autres modes d'affichage.

De plus en plus d'appareils sont compatibles avec la réalité augmentée (RA). Certains de ces modes sont difficiles à déclencher ou nécessitent un code spécial, mais <model-viewer> peut gérer toute cette complexité pour vous.

Scene Viewer d'ARCore

Sur les appareils compatibles, <model-viewer> peut déclencher Scene Viewer d'ARCore. Ajoutez l'attribut ar à votre élément <model-viewer>. Et oui, c'est tout ce que vous avez à faire !

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

Si vous affichez maintenant cette image sur un appareil compatible avec une version récente d'ARCore, une icône supplémentaire s'affiche (comme sur l'image ci-dessous). Cliquez dessus pour ouvrir votre modèle dans l'explorateur de scène.

Autres appareils : Aperçu rapide iOS, Magic Leap, WebXR

De nombreux autres appareils nécessitent un peu plus de travail.

Sur iOS, l'attribut ios-src permet de spécifier une version USDZ supplémentaire du modèle 3D (obligatoire sur iOS). Lorsque cet attribut est fourni, l'icône standard Aperçu AR s'affiche sur le modèle pour les appareils iOS compatibles. Pour en savoir plus sur le format USDZ, consultez la documentation pour les développeurs d'Apple.

Sur les appareils Magic Leap, l'attribut magic-leap permet d'activer la RA. Notez que vous devez également inclure la bibliothèque prismatic.js (elle est incluse, mais mise en commentaire, dans les polyfills facultatifs) et que le modèle 3D doit être un fichier .glb (et non .gltf).

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

L'angle et la position initiaux de la caméra peuvent être contrôlés. Cette commande nous permet de proposer aux utilisateurs une meilleure vue par défaut du casque. Ajoutez l'extrait suivant à votre balise <model-viewer> :

camera-orbit="-20deg 75deg 2m"

Bien sûr, vous pouvez utiliser ces modèles avec vos autres contenus, y compris sur les pages responsives. La création d'une page Web responsive ne fait pas partie de cet atelier de programmation, mais vous pouvez consulter les Notions de base sur le Responsive Web Design pour en savoir plus.

Nous avons inclus une page d'exemple dans notre dépôt. Découvrez responsive.html en écran large (comme sur un ordinateur) :

La même page, dans une fenêtre d'affichage étroite (comme sur un appareil mobile) :

Vous avez intégré un contenu 3D sur le Web. Bravo !

Et ensuite ?

Il existe de nombreuses autres options de configuration. Pour en savoir plus, consultez notre documentation en ligne ou le code.

Une fois vos modèles identifiés, voici quelques étapes à envisager :

Certains modèles peuvent être assez volumineux. Dans ce cas, <model-viewer> propose plusieurs méthodes pour continuer à offrir d'excellentes expériences. Pour en savoir plus, consultez la page de documentation sur le chargement différé.
Les modèles animés peuvent être très amusants ! Consultez notre page Animations pour en savoir plus sur l'activation (et le changement) des animations définies dans vos modèles.
Et n'oubliez pas que vous êtes toujours sur le Web : vous pouvez intégrer des modèles à vos pages Web pour compléter votre contenu.

Notre processus de développement est ouvert sur GitHub. Votre avis nous intéresse.