Pour intégrer un fichier GLB sur un site web, le plus simple est « model-viewer », un composant web publié par Google. Ajoutez un élément script pour le charger, placez une balise model-viewer dans la page en indiquant l'emplacement du GLB dans l'attribut src, ajoutez l'attribut camera-controls : vos visiteurs obtiennent un modèle 3D qu'ils peuvent faire tourner à la souris ou du bout du doigt.
Ce guide compare trois façons de mettre un GLB en ligne, détaille l'intégration avec model-viewer et le rôle des principaux attributs, puis aborde les solutions quand le modèle ne s'affiche pas, le comportement sur smartphone et la mise en page quand vos créations se multiplient. Le plus sûr pour obtenir un code HTML correct, numéro de version compris, est de le copier depuis la documentation officielle : cet article explique donc le nom et le rôle des attributs, et renvoie vers les pages officielles pour le code lui-même. Les informations sur model-viewer ont été vérifiées dans la documentation officielle en novembre 2026.
Remarque : Figmee propose actuellement des images façon figurine créées à partir de vos dessins, des données de modèle 3D (GLB / 3MF) et des vidéos rotatives de vos modèles 3D. La commande d'impressions 3D physiques est Coming Soon. Les photos, et les images qui ressemblent à des photos, ne peuvent pas être transformées en 3D : Figmee part de dessins.
Quelles sont les façons de mettre un GLB sur une page web ?
Il existe trois façons de laisser vos visiteurs faire tourner un GLB dans leur navigateur : l'intégrer à votre propre site, envoyer le lien de partage du service qui l'a créé, ou le déposer sur un site de partage 3D et l'intégrer depuis celui-ci. Si vous voulez le modèle dans votre propre site, avec votre propre mise en page, l'intégration avec model-viewer est la bonne option.
| Méthode | Affichage dans votre site ? | Effort | Taille du fichier | Pour qui |
|---|---|---|---|---|
| Intégration avec model-viewer | Oui | Modifier le HTML et héberger le GLB vous-même | Le GLB est chargé tel quel : l'alléger vous revient | Les personnes qui ont un site portfolio et savent modifier le HTML |
| Lien de partage Figmee | Non (vous envoyez un lien) | Activer un interrupteur sur la page de la création | Rien à surveiller | Montrer tout de suite un modèle créé avec Figmee |
| Site de partage comme Sketchfab | Oui, en collant son code d'intégration | Créer un compte et téléverser | Selon les limites du site | Réunir au même endroit des modèles issus de plusieurs logiciels |
Sur Sketchfab, le bouton d'intégration (Embed) situé sous la visionneuse de la page du modèle fournit le code HTML à coller dans votre page, et le centre d'aide précise que les modèles privés et protégés par mot de passe peuvent aussi être intégrés (source : Sketchfab Help Center, « Embedding your 3D models », novembre 2026). Les étapes du partage par lien, et ce qui devient visible une fois publié, sont détaillées dans comment publier un modèle 3D en ligne.
Qu'est-ce que model-viewer ?
model-viewer est un composant web open source de Google (licence Apache 2.0) qui affiche un modèle 3D et permet de le faire tourner, avec une seule balise dans la page. Il ne lit que le glTF et le GLB, et la FAQ officielle indique qu'il prévoit de s'en tenir à ce format (source : FAQ de model-viewer, novembre 2026).
- Chargement : collez dans votre page l'élément script avec
type="module"donné dans le README officiel. Il se charge depuis le CDN de Google (ajax.googleapis.com), avec le numéro de version au milieu de l'URL. Sur npm, le paquet s'appelle@google/model-viewer(source : README de model-viewer, novembre 2026). - Version : au 7 novembre 2026, la dernière version publiée sur npm est la 4.4.0 (source : npm, « @google/model-viewer »).
- Navigateurs pris en charge : le README indique la prise en charge des deux dernières versions majeures de tous les navigateurs à mise à jour automatique (Chrome, Firefox, Safari, Edge, etc.), sur ordinateur comme sur mobile.
Un GLB de Figmee réunit forme et couleurs (textures) dans un seul fichier : il n'y a pas d'images à héberger séparément, un seul GLB suffit. Le fonctionnement du format est expliqué dans qu'est-ce qu'un fichier GLB, et les dessins qui se prêtent bien à la 3D dans le guide complet pour passer une illustration en 3D.
Comment l'intégrer, étape par étape ?
Cinq étapes : préparer et alléger le GLB, l'héberger, ajouter la ligne de chargement, placer la balise avec ses attributs, vérifier sur ordinateur et sur smartphone. Sur un site dont vous pouvez modifier le HTML, comptez environ 30–50 minutes pour un premier modèle.
- Préparer et alléger le GLB (10–30 minutes) : dans Figmee, sélectionnez « Enregistrer » sur la page de la création, puis « Modèle 3D (GLB) » (l'enregistrement ne coûte aucun jeton supplémentaire). Si le chargement risque d'être lent, allégez-le dans cet ordre : textures, polygones, compression (voir réduire la taille d'un fichier GLB).
- Héberger le GLB (5 minutes) : le plus simple est de le téléverser sur le même serveur (même domaine) que la page. S'il est hébergé sur un autre domaine, ce serveur doit envoyer des en-têtes CORS (voir « Que faire si le chargement est lent ou si rien ne s'affiche ? » plus bas).
- Ajouter la ligne de chargement (2 minutes) : copiez l'élément script du README officiel, indiquez le numéro de version (par exemple 4.4.0) et collez-le dans le head de la page.
- Placer la balise et ses attributs (5 minutes) : placez une balise
model-viewerà l'endroit voulu, indiquez l'URL du GLB danssrcet une courte description dansalt, puis ajoutezcamera-controls. Choisissez les autres attributs dans le tableau ci-dessous. Des exemples de balisage se trouvent dans la documentation de model-viewer. - Vérifier sur ordinateur et smartphone (5 minutes) : le modèle tourne-t-il ? Qu'affiche la page pendant le chargement ? Peut-on encore faire défiler la page verticalement sur mobile ? Les couleurs et les reflets sont-ils corrects ?
Voici les attributs les plus utiles (source : documentation de model-viewer, novembre 2026) :
| Attribut | Rôle | Remarques |
|---|---|---|
src | URL du GLB à afficher | glTF et GLB uniquement |
alt | Texte qui décrit le modèle | Une courte phrase sur l'œuvre, pour que les personnes utilisant un lecteur d'écran sachent de quoi il s'agit |
camera-controls | Permet de faire tourner le modèle à la souris ou au doigt | La documentation recommande de l'indiquer presque toujours |
auto-rotate | Fait tourner le modèle automatiquement | Démarre après 3000 ms par défaut (auto-rotate-delay) ; la vitesse se règle avec rotation-per-second |
poster | Image affichée jusqu'au chargement du modèle | La FAQ conseille de toujours utiliser une image d'attente qui se fond avec le modèle |
loading | Moment du chargement (auto, lazy, eager) | Par défaut, auto charge le modèle quand il approche de la zone visible ; eager le charge immédiatement |
camera-orbit | Angle et distance de départ de la caméra | Par défaut « 0deg 75deg 105% » (angle horizontal, angle vertical, distance) |
touch-action | Partage des gestes avec le défilement sur mobile (pan-y, pan-x, none) | Par défaut, pan-y conserve le défilement vertical, et un geste horizontal fait tourner le modèle |
shadow-intensity | Intensité de l'ombre sous le modèle | 0 supprime l'ombre |
exposure | Luminosité (exposition) | À ajuster si le modèle paraît trop clair ou trop sombre |
ar | Active la réalité augmentée sur les appareils compatibles | Chaque appareil a ses conditions : à tester en dernier |
Les GLB de Figmee ne contiennent pas d'animation : les attributs d'animation de model-viewer sont donc inutiles. La pose ne peut pas non plus être modifiée ; choisissez plutôt l'angle à montrer avec camera-orbit, qui place la caméra au chargement de la page.
Que faire si le chargement est lent ou si rien ne s'affiche ?
Quand rien n'apparaît, vérifiez dans l'ordre l'URL du GLB, le domaine qui l'héberge (CORS) et la ligne de chargement. Si le modèle s'affiche mais semble anormal, cherchez le symptôme dans le tableau ci-dessous.
| Symptôme | Cause fréquente | Solution |
|---|---|---|
| Rien ne s'affiche | URL de src erronée, ligne de chargement absente ou mauvais numéro de version | Ouvrez les outils de développement du navigateur et regardez les panneaux console et réseau pour voir si le GLB et le script se chargent |
| Seul un GLB hébergé sur un autre domaine échoue | Blocage CORS | Configurez le serveur qui héberge le GLB pour qu'il envoie des en-têtes CORS autorisant le domaine de votre page (FAQ officielle) |
| Rien ne s'affiche en ouvrant le fichier HTML directement depuis l'ordinateur | Les navigateurs peuvent bloquer le chargement depuis une page ouverte comme fichier local | Testez via un serveur local ou sur votre vrai serveur |
| L'affichage met longtemps à venir | Le GLB est lourd | Allégez-le en commençant par les textures, et soignez l'attente avec poster |
| Un GLB compressé ne s'affiche pas | Il a été compressé avec meshopt | model-viewer n'active pas son décodeur meshopt par défaut. Recompressez avec Draco ou configurez meshoptDecoderLocation |
| Les bords brillent comme du métal | La valeur Metallic de la matière est élevée | Baissez la valeur Metallic de la matière dans Blender et réexportez (explications ci-dessous) |
L'explication sur le CORS figure dans la FAQ officielle, à la question « Why am I getting CORS errors? », et les emplacements par défaut des décodeurs aux entrées dracoDecoderLocation et meshoptDecoderLocation de la documentation (novembre 2026).
Le dernier symptôme, les bords brillants, a tendance à apparaître avec les GLB créés dans Figmee. Ils sont exportés avec une valeur Metallic élevée sur leurs matières, et la visionneuse de Figmee les affiche avec la valeur Metallic ramenée à 0. Le même GLB peut donc présenter des reflets métalliques le long des arêtes sculptées dans model-viewer ou d'autres visionneuses. Si cela vous gêne, importez-le dans Blender, rapprochez la valeur Metallic de la matière de 0 (si une image est reliée à l'entrée Metallic, déconnectez-la avant de modifier la valeur), réexportez le GLB et vérifiez si les reflets ont changé à l'endroit où vous l'hébergez. L'import dans Blender est décrit dans importer un GLB de Figmee dans Blender.
Est-ce que ça fonctionne sur smartphone ?
Oui. model-viewer prend en charge les navigateurs mobiles, et avec camera-controls, les visiteurs font tourner le modèle en le faisant glisser du doigt. Deux points demandent de l'attention : la cohabitation avec le défilement de la page et la mémoire.
- Défilement : avec la valeur par défaut de
touch-action, pan-y, un glissement vertical fait défiler la page et un geste qui commence à l'horizontale fait tourner le modèle. Avec none, la page ne défile plus du tout au-dessus du modèle : si celui-ci occupe tout l'écran, vérifiez que vos visiteurs peuvent encore poursuivre leur lecture. - Mémoire : de grandes textures consomment beaucoup de mémoire à l'affichage, même si le fichier est léger, et peuvent ralentir un smartphone. Baisser leur résolution aide (détails dans réduire la taille d'un fichier GLB).
L'attribut ar permet aux visiteurs équipés d'un appareil compatible de lancer la réalité augmentée (placer le modèle 3D dans leur environnement à travers la caméra). Google publie pour Scene Viewer sur Android des recommandations, comme la taille de fichier et le nombre de triangles, ainsi que les extensions acceptées (source : Google ARCore, « Scene Viewer », novembre 2026). Si vous voulez la réalité augmentée, testez avec un GLB qui respecte ces conditions.
Comment organiser la page quand les créations se multiplient ?
Chaque modèle supplémentaire sur une page ajoute du chargement et de la mémoire. Une mise en page qui a de bonnes chances de rester légère consiste à présenter une galerie d'images fixes (les mêmes que les posters), chacune menant à une page par création avec un seul modèle à faire tourner.
- Des images dans la galerie, la 3D dans la page de détail : montrez le modèle à faire tourner une fois que le visiteur ouvre la page d'une création.
- Si vous placez plusieurs modèles sur une page : la valeur par défaut de
loading(auto) charge chaque modèle lorsqu'il approche de la zone visible ; ceux du bas ne se chargent donc que si le visiteur fait défiler jusqu'à eux. Donner unposterà chaque modèle garde une mise en page propre avant le chargement. - Montrer le dessin d'origine à côté : placer l'illustration d'origine à côté de la 3D montre clairement ce qui est devenu 3D.
Si vous n'avez pas de site, ou si vous voulez un endroit pour tout rassembler, la page créateur de Figmee peut aussi servir : activez le réglage de publication dans Mon compte pour obtenir une page de profil qui liste vos créations publiées. Pour envoyer un GLB à quelqu'un afin qu'il le consulte, voir 5 façons gratuites de visualiser un modèle 3D.
Questions fréquentes
Peut-on l'utiliser sur WordPress ou d'autres plateformes de blog ?
Tout dépend de la possibilité d'ajouter du HTML contenant un élément script sur la plateforme. Si ce n'est pas possible, model-viewer risque de ne pas être utilisable. Dans ce cas, utilisez l'intégration de Sketchfab (son centre d'aide explique aussi comment intégrer un modèle sur WordPress et d'autres plateformes) ou un lien vers une page de partage.
Les visiteurs peuvent-ils enregistrer mon GLB ?
Pour afficher le modèle, le fichier GLB est envoyé au navigateur du visiteur. Partez du principe que toute personne qui trouve l'URL peut l'enregistrer. Si le modèle provient d'une illustration que vous avez commandée, demandez l'accord de l'artiste avant de publier (voir peut-on passer en 3D une illustration commandée ?).
Est-ce payant ?
model-viewer est open source et son utilisation est gratuite. L'hébergement du GLB coûte ce que facture votre hébergeur. Sur Figmee, générer un modèle 3D utilise 5 jetons (le premier de chaque compte est gratuit), et l'enregistrement du GLB ne coûte aucun jeton supplémentaire.
En résumé
model-viewer est le moyen le plus simple d'intégrer un GLB sur votre site. Allégez le GLB, hébergez-le, copiez la ligne de chargement depuis le README officiel, commencez par src, alt et camera-controls, puis ajoutez poster ou auto-rotate au besoin. Si rien ne s'affiche, vérifiez l'URL, le CORS et la ligne de chargement ; si les bords brillent, vérifiez la valeur Metallic de la matière. Sur mobile, surveillez la cohabitation avec le défilement et la taille des textures.
Pour placer dans votre portfolio une version 3D de votre personnage que l'on peut faire tourner, créez un modèle 3D à partir de votre dessin dans Figmee, enregistrez le GLB et intégrez-le en suivant ces étapes.
