Site internet en 3D : quand ça vaut le coup, et comment le faire sans sacrifier la vitesse
Un site 3D vaut le coup quand l'objet ou l'univers montré est au cœur de la vente : marque de produits, packaging, artisan haut de gamme, objet à configurer. Il dessert un site de services où le visiteur cherche surtout une information rapide. Pour que la 3D rapporte, elle doit rester rapide sur mobile, se charger à la demande, respecter le réglage de réduction des animations et laisser tout le texte lisible par Google.
Ce qu'on appelle un site 3D
Un site 3D affiche dans le navigateur des objets ou des scènes en trois dimensions, calculés en temps réel par WebGL, le plus souvent avec la bibliothèque Three.js. Le visiteur peut faire tourner un produit, le voir réagir au défilement de la page ou explorer une scène.
La 3D peut occuper tout l'écran ou se limiter à un bloc : une canette qui tourne dans l'en-tête, un objet manipulable sur une fiche produit, une animation d'ouverture. Dans la plupart des projets, une 3D ciblée sur un ou deux moments clés donne le meilleur résultat.
Quand la 3D sert vraiment
- Les marques de produits : boissons, cosmétiques, objets design. Le produit vu sous tous les angles remplace une série de photos.
- Le packaging et les gammes : chaque gamme peut avoir sa couleur, son ambiance, sa section animée.
- Les artisans haut de gamme : menuiserie, serrurerie d'art, ferronnerie, aménagement. La 3D signale un savoir-faire précis et une exigence de qualité.
- Les objets à configurer : matériaux, couleurs, dimensions visibles en direct.
- Les marques qui vivent sur les réseaux : un site animé prolonge l'univers des vidéos TikTok ou Instagram.
Dans ces cas, la 3D sert la vente : elle montre ce que des photos montrent mal et elle rend la marque mémorable.
Quand elle dessert
La 3D devient un frein quand le visiteur vient chercher une information vite : un numéro de téléphone, un tarif, des horaires, une intervention d'urgence. Un plombier dépanneur, un cabinet comptable ou un site de réservation n'ont pas besoin d'une scène 3D en page d'accueil. Elle ajoute du poids, du temps de chargement et peut cacher le bouton d'appel.
Elle dessert aussi un projet quand le budget manque pour produire des modèles 3D de qualité : un modèle approximatif fait moins bien qu'une bonne photo. Notre article combien coûte un site internet aide à arbitrer.
Performance et mobile : les règles à respecter
La majorité des visites arrive sur téléphone. Un site 3D doit donc être pensé pour le mobile dès le départ.
- Modèles légers : format glTF compressé (Draco ou Meshopt), textures réduites et au format moderne.
- Chargement à la demande : la scène 3D se charge quand elle approche de l'écran, après le texte et le bouton d'action.
- Image de remplacement : une image fixe s'affiche pendant le chargement et sur les appareils trop faibles.
- Rendu adapté : résolution de rendu limitée sur mobile, animation mise en pause quand la scène sort de l'écran ou quand l'onglet est caché.
- Mesure : tests réels sur un téléphone d'entrée de gamme, et suivi des Core Web Vitals.
Accessibilité et prefers-reduced-motion
Certaines personnes règlent leur appareil pour réduire les animations, par confort ou parce que le mouvement leur donne des vertiges. Le navigateur transmet ce réglage au site par la requête média prefers-reduced-motion. Un site 3D sérieux la respecte : animations coupées ou fortement ralenties, objet affiché en position fixe, défilement normal.
- Tout le contenu reste accessible sans la 3D.
- Les commandes (faire tourner, zoomer) ont une alternative au clavier.
- Le contraste du texte posé sur la scène est suffisant.
- La scène porte une description textuelle pour les lecteurs d'écran.
Le SEO d'un site 3D
Google ne lit pas le contenu d'une scène WebGL. Le texte, les titres, les descriptions produits et les données structurées doivent être présents dans le HTML de la page, rendus côté serveur ou générés de manière statique. La 3D vient s'ajouter par-dessus.
Avec cette règle, un site 3D se référence comme un autre site, et peut aussi être cité par les moteurs IA. Voir nos guides sur les données structurées JSON-LD et sur le GEO.
Deux exemples : une marque de boissons et un site d'artisan
Une marque de boissons en canette
La marque voulait un site animé qui ressemble à ses vidéos TikTok et montre ses canettes sous tous les angles. Le site présente des canettes 3D qui tournent, un carrousel des gammes et une fiche produit. La démo attend les textes définitifs du client. Détail sur la page de la réalisation.
Un site vitrine d'artisan haut de gamme
Pour un artisan qui voulait se démarquer en ligne, nous avons construit une démonstration avec une animation 3D interactive au chargement, un thème sombre et des blocs de réassurance, rapide sur mobile : serrurier-three.vercel.app. Voir la réalisation et notre page solutions pour les artisans.
Notre propre carte 3D de l'univers Ascendia applique les mêmes règles. Si vous hésitez entre un site 3D, de la vidéo et du motion design ou un site classique soigné, demandez un audit gratuit : nous construisons une démo sur votre produit avant tout devis.
Votre audit gratuit
Un échange pour comprendre votre activité, puis une démo gratuite construite sur votre cas avant tout devis.
