3D Model Viewer : glTF et GLB en ligne

Qu'est-ce que la visionneuse 3D glTF/GLB ?

La visionneuse 3D glTF/GLB vous permet d'ouvrir et d'inspecter des fichiers .gltf et .glb directement dans le navigateur — sans installation de logiciel, sans compte et sans envoi de fichiers vers un serveur. Glissez un modèle dans la zone de dépôt et orbitez, zoomez et panoramiquiez immédiatement avec la souris. L'outil est propulsé par le composant web model-viewer de Google, le même moteur de rendu de qualité de production utilisé dans les aperçus de produits 3D de Google Search et AR Quick Look. Vous pouvez basculer entre cinq préréglages d'éclairage d'environnement, ajuster l'exposition et l'intensité des ombres, activer ou désactiver la rotation automatique, et exporter une capture d'écran de la vue actuelle.

Fonctionnalités principales

• Glisser-déposer glTF et GLB — déposez un fichier .gltf ou .glb ; les extensions non conformes affichent une erreur avant le chargement
• Contrôles d'orbite, de zoom et de panoramique — clic gauche + glisser pour orbiter, molette pour zoomer, clic droit + glisser pour panoramiquer ; camera-controls est activé sur l'élément <model-viewer>
• Basculer la rotation automatique — un interrupteur active ou désactive l'attribut auto-rotate sur le composant <model-viewer> ; activé par défaut
• Cinq préréglages d'éclairage — Neutral, Warm, Legacy, Commerce, Spruit Sunrise ; correspondant directement à l'attribut environment-image
• Réglage de l'exposition — curseur de 0,1 à 3,0 (pas de 0,1) ; valeur par défaut 1,0
• Réglage de l'intensité des ombres — curseur de 0,0 à 2,0 (pas de 0,1) ; valeur par défaut 1,0 ; correspond à l'attribut shadow-intensity
• Export de capture — appelle modelViewer.toBlob() et enregistre sous {nomModèle}_{ratioAspect}_{éclairage}_{résolution}.png
• Préréglages de ratio d'aspect — choisissez parmi Libre, 1:1, 4:3, 16:9, 9:16, 3:2 et 21:9 pour cadrer les captures
• Plusieurs méthodes d'import — importez un seul fichier .gltf/.glb, une archive ZIP contenant un bundle glTF ou un dossier entier
• Propulsé par Google model-viewer — rendu WebGL de qualité de production avec support des matériaux PBR (rendu physiquement basé)

Comment utiliser la visionneuse 3D glTF/GLB

Étape 1 : Charger le modèle 3D

Ouvrez la visionneuse 3D glTF/GLB. Glissez un fichier .gltf ou .glb depuis votre système de fichiers vers la zone de dépôt. Vous pouvez aussi cliquer sur la zone pour ouvrir un sélecteur de fichiers (l'attribut accept est défini sur .gltf,.glb). Le modèle se charge via une URL d'objet locale — aucune donnée n'est envoyée sur le réseau.

Si vous déposez un fichier avec une extension non prise en charge, une notification s'affiche : « Fichier invalide » et rien ne se charge.

Étape 2 : Naviguer dans le modèle

Une fois chargé, la visionneuse affiche le modèle dans un viewport de 500 px de hauteur. Utilisez la souris pour naviguer :

• Clic gauche et glisser — orbiter autour du modèle
• Molette de défilement — zoomer et dézoomer
• Clic droit et glisser — panoramiquer la caméra

Les gestes tactiles fonctionnent de manière équivalente sur mobile : glisser avec un doigt pour orbiter, pincer pour zoomer, glisser avec deux doigts pour panoramiquer.

Le nom du modèle apparaît dans le panneau de contrôle en police monospace. Cliquez sur Charger un nouveau modèle à tout moment pour décharger le modèle actuel et revenir à la zone de dépôt.

Étape 3 : Ajuster l'éclairage

Dans le panneau de contrôle à droite, sélectionnez l'un des cinq préréglages d'éclairage en cliquant sur son nom :

Le préréglage sélectionné est mis en évidence avec un arrière-plan plein. Les changements s'appliquent instantanément — pas de rechargement nécessaire.

Étape 4 : Affiner l'exposition et les ombres

Sous les préréglages d'éclairage, deux curseurs vous donnent un contrôle supplémentaire :

• Exposition (0,1–3,0) — augmente ou diminue la luminosité globale de la scène. Une valeur de 1,0 est la référence neutre. Essayez 1,5–2,0 pour les modèles sombres qui ont besoin d'être éclairés.
• Intensité des ombres (0,0–2,0) — contrôle la netteté et l'obscurité de l'ombre au sol sous le modèle. Réglez à 0,0 pour supprimer complètement l'ombre.

Les deux valeurs mettent à jour les attributs de <model-viewer> en temps réel.

Étape 5 : Basculer la rotation automatique et exporter la capture

Utilisez l'interrupteur Rotation automatique pour faire tourner ou stopper le modèle lentement sur son axe vertical. La rotation automatique est activée par défaut, vous offrant une vue mains libres du modèle complet.

Quand vous avez positionné la vue comme vous le souhaitez, cliquez sur Capture. L'outil capture le rendu actuel et télécharge le résultat comme fichier PNG nommé avec le nom du modèle, le ratio d'aspect, le préréglage d'éclairage et la résolution. Vous pouvez aussi choisir une résolution de capture spécifique dans le panneau — les options sont Viewport (taille actuelle), 720p, 1080p, 2K et 4K.

Exemples pratiques

Vérifier un asset de jeu avant intégration

Un développeur de jeu reçoit un modèle de personnage sous forme de player-character.glb. Il le glisse dans la visionneuse pour vérifier l'asset : les textures s'appliquent-elles correctement sous l'éclairage Neutral, et à quoi ressemble le personnage sous l'éclairage Warm pour une scène en extérieur ? Il exporte une capture pour la joindre au ticket de révision.

Vérifier un modèle de produit pour une fiche e-commerce

Une équipe e-commerce reçoit un modèle 3D de produit d'un fournisseur au format .glb. Ils le chargent dans la visionneuse, sélectionnent le préréglage Commerce (optimisé pour des photos de produits propres), ajustent l'exposition à 1,4 pour plus de clarté et réduisent l'intensité des ombres à 0,5 pour un aspect plus doux. Ils exportent une capture pour servir d'image statique de secours sur la page produit.

Valider un export glTF depuis Blender

Un artiste 3D exporte une scène depuis Blender en fichier .gltf et l'ouvre dans la visionneuse pour une vérification rapide : le modèle charge-t-il sans erreur ? Les matériaux se rendent-ils avec les bonnes couleurs ? L'échelle est-elle raisonnable ? Les contrôles d'orbite permettent d'examiner tous les côtés rapidement. Le préréglage Spruit Sunrise aide à vérifier l'apparence du modèle en lumière naturelle extérieure.

Conseils et bonnes pratiques

Le paramètre idealAspect: true dans l'export de capture fait correspondre l'image capturée au ratio d'aspect actuel de la visionneuse plutôt que d'imposer un recadrage carré. Si votre modèle est plus large que haut, la capture le reflétera.

Le composant web model-viewer prend en charge les matériaux PBR (rendu physiquement basé) définis dans la spécification glTF. Si un modèle paraît plat ou délavé, vérifiez qu'il a été exporté avec des matériaux PBR depuis votre logiciel 3D. Les modèles exportés sans données de matériau se rendent avec l'ombrage gris par défaut.

Pour les fichiers .gltf avec des références de textures externes, le chargement via le sélecteur de fichiers peut échouer car le navigateur ne peut pas accéder aux autres fichiers du répertoire. Utilisez le format .glb (qui intègre toutes les textures) pour un chargement fiable dans le navigateur.

La visionneuse effectue le rendu à 500 px de hauteur quelle que soit la taille du modèle. Utilisez les contrôles d'orbite pour positionner le modèle, puis prenez une capture — elle capturera le rendu aux dimensions d'affichage réelles.

Problèmes courants et dépannage

Erreur « Fichier invalide ». L'outil n'accepte que les fichiers se terminant par .gltf ou .glb (vérification insensible à la casse avec .match(/\.(gltf|glb)$/i)). Renommez votre fichier si nécessaire, ou vérifiez que votre outil d'export produit le bon format.

Le modèle se charge mais les textures manquent. Si vous chargez un fichier .gltf (la variante JSON), les fichiers de textures et de tampons binaires associés doivent se trouver dans le même répertoire. Le sélecteur de fichiers du navigateur n'accorde l'accès qu'au fichier sélectionné individuellement, pas au répertoire. Utilisez le format .glb pour tout regrouper dans un seul fichier.

La capture échoue avec un toast « Erreur de capture ». La méthode model-viewer.toBlob() nécessite que WebGL soit disponible. Si votre navigateur a WebGL désactivé ou si le pilote graphique le bloque, les captures échoueront. Vérifiez chrome://settings/graphics (Chrome) ou l'équivalent de votre navigateur.

La rotation automatique ne s'arrête pas. L'interrupteur de rotation automatique contrôle l'attribut auto-rotate en temps réel. Si le basculement ne stoppe pas la rotation, essayez de cliquer sur le modèle pour reprendre le contrôle de la caméra (cela met aussi en pause la rotation automatique selon le comportement par défaut de model-viewer).

Confidentialité et sécurité

La visionneuse 3D glTF/GLB charge vos fichiers de modèles via URL.createObjectURL() en local dans le navigateur — les données ne quittent jamais votre appareil. Le composant Google model-viewer est chargé comme bibliothèque JavaScript et effectue le rendu entièrement sur votre GPU via WebGL. Aucune géométrie, texture ou métadonnée du modèle n'est transmise à un serveur. Cela rend l'outil sûr pour les assets 3D propriétaires, les produits non publiés ou les conceptions industrielles confidentielles.

Questions fréquentes

La visionneuse 3D glTF/GLB est-elle gratuite ?

Oui, entièrement gratuite sans compte et sans limites d'utilisation. Elle fait partie de la suite d'outils gratuits de Glyph Widgets.

La visionneuse 3D glTF/GLB fonctionne-t-elle hors ligne ?

Une fois la page chargée (y compris le composant @google/model-viewer), vous pouvez charger et visualiser des fichiers de modèles locaux sans connexion internet. Le chargement initial de la page nécessite un accès réseau pour télécharger la bibliothèque de la visionneuse.

Mes données sont-elles sécurisées avec la visionneuse 3D glTF/GLB ?

Vos fichiers de modèles sont chargés via URL.createObjectURL() et rendus localement en WebGL. Aucune géométrie, texture ou métadonnée n'est envoyée à un serveur. Le composant model-viewer de Google fonctionne entièrement dans le navigateur.

Quels formats de fichiers l'outil prend-il en charge ?

Uniquement .gltf (JSON + fichiers externes) et .glb (format binaire regroupé). Les autres formats 3D (.obj, .fbx, .stl, .dae) ne sont pas pris en charge. Convertissez en glTF avec des outils comme Blender ou le convertisseur glTF de Khronos avant de charger.

Quelle est la différence entre glTF et GLB ?

glTF est un fichier texte JSON qui référence des tampons binaires et des images de textures externes. GLB est le format de conteneur binaire qui regroupe le JSON, les tampons et les textures dans un seul fichier. Pour le chargement dans le navigateur, GLB est fortement préféré car tous les assets sont autonomes.

Quels préréglages d'éclairage sont disponibles ?

Les cinq préréglages sont : Neutral (éclairage studio équilibré), Warm (tons ambrés/chauds), Legacy (rendu classique), Commerce (éclairage produit épuré et à fort contraste) et Spruit Sunrise (lumière naturelle extérieure). Ils correspondent à l'attribut environment-image du composant model-viewer.

À quoi sert le curseur d'exposition ?

L'exposition ajuste la luminosité globale de la scène rendue de 0,1 à 3,0. La valeur par défaut est 1,0. Les valeurs supérieures à 1,0 éclaircissent la scène ; celles inférieures à 1,0 l'assombrissent. C'est l'équivalent du réglage d'exposition en photographie ou dans un moteur de rendu.

Puis-je visualiser des modèles glTF animés ?

Le composant model-viewer prend en charge les animations glTF, mais l'interface Glyph Widgets n'expose pas de contrôles de lecture pour les animations. La rotation automatique est la seule fonctionnalité de mouvement dans l'interface actuelle. Pour prévisualiser des animations glTF, utilisez un outil dédié comme le Khronos glTF Sample Viewer.

À quelle résolution les captures sont-elles exportées ?

Vous pouvez choisir parmi cinq options de résolution dans le panneau : Viewport (taille d'affichage actuelle), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) et 4K (3840x2160). À la résolution Viewport, la capture correspond aux dimensions d'affichage de la visionneuse. Pour les résolutions supérieures, l'outil redimensionne temporairement l'élément visionneuse pour le rendu à la résolution sélectionnée, puis le restaure.

Puis-je charger des fichiers GLB très volumineux ?

Il n'y a pas de limite de taille imposée, mais les fichiers volumineux (50 Mo+) peuvent prendre quelques secondes pour créer l'URL d'objet locale et initialiser le moteur de rendu model-viewer. Les performances dépendent de votre navigateur, de votre GPU et de la RAM disponible.

Outils associés

• Bientôt disponible: Image Converter — convertissez les captures exportées depuis la visionneuse entre différents formats d'image
• Bientôt disponible: SVG to PNG — convertissez les assets de design en SVG qui complètent les workflows 3D
• Bientôt disponible: EXIF Viewer — inspectez les métadonnées des photographies utilisées comme images de référence pour la modélisation 3D

Essayez la visionneuse 3D glTF/GLB maintenant : Glyph Widgets glTF/GLB 3D Model Viewer