1. Origine
Développé et maintenu par Google, Model Viewer est un web component standardisé qui s'appuie sur Three.js pour le rendu WebGL et l'API WebXR pour la réalité augmentée : affichage de modèles GLTF/GLB avec un rendu optimisé, support natif de la réalité augmentée sur iOS via Quick Look et Android via Scene Viewer. Le projet est open source, hébergé sur GitHub, et activement maintenu par l'équipe Google.
2. Utilité
Model Viewer permet d'intégrer une visionneuse 3D interactive dans n'importe quel site Webflow sans écrire de Three.js ni installer de librairie complexe. Deux approches pour charger la librairie : via le script CDN ajouté dans le <head> du site, ou en important le package dans le repository du projet. C'est cette dernière approche que l'on utilise chez Studio Relief. Dans les deux cas, une balise <model-viewer> dans un embed HTML avec l'URL du fichier .glb suffit à afficher le modèle. L'utilisateur peut tourner, zoomer et voir le modèle en AR sur son téléphone sans aucune friction technique côté client.
3. Fonctionnalités
Sur les projets SR, on mobilise principalement l'affichage interactif et l'AR mobile. Mais Model Viewer couvre un spectre plus large.
- Affichage GLTF/GLB : rendu de modèles 3D dans le navigateur
- Réalité augmentée : Android via Scene Viewer, iOS via Quick Look (fichier
.usdzrequis) - Contrôles interactifs : rotation, zoom par défaut, configurables via attributs HTML
- Annotations et hotspots : positionnement 3D via
data-position - Personnalisation : via attributs HTML et CSS
- Lazy loading natif :
loading="lazy"et poster d'aperçu statique (poster) pour optimiser le chargement - Environnement d'éclairage : personnalisable via HDR (
environment-image) - Animations : via
animation-name - API JavaScript : pour contrôler le composant dynamiquement
4. Cas concrets
→ Sur une page produit e-commerce intégrée sous Webflow, on ajoute un embed HTML avec la balise <model-viewer> pointant vers un fichier .glb hébergé sur le CDN du client. L'utilisateur fait tourner le produit directement sur la page, sans plugin, sans iframe externe. Sur mobile, le bouton AR apparaît automatiquement et permet de placer le produit dans la pièce via la caméra du téléphone.
→ Pour un portfolio d'architecte, les maquettes 3D des réalisations exportées depuis Blender au format .glb sont intégrées sur les pages projet. Le visiteur explore le bâtiment en 3D directement depuis la page, sans redirection vers un viewer externe.
5. Prix
Gratuit et open source. Aucun abonnement, aucune limite d'utilisation, aucune attribution requise.
6. Questions fréquentes
Model Viewer vs Three.js ?
Model Viewer est parfait pour afficher des modèles existants simplement. Three.js offre beaucoup plus de contrôle pour des scènes 3D personnalisées et complexes.
L'AR fonctionne-t-elle sur iPhone ?
Oui, via Quick Look, mais uniquement si un fichier .usdz est fourni via l'attribut ios-src. Sans ce fichier, le bouton AR n'apparaît pas sur iOS.
Model Viewer vs Spline ?
Spline est un outil de création 3D avec son propre viewer intégrable. Model Viewer est un composant d'affichage pur : il affiche des modèles existants exportés depuis Blender, Maya ou Figma. Si le modèle existe déjà dans un format standard, Model Viewer est plus léger et plus performant.
