Sites web 3D : quand ils en valent la peine et comment les garder rapides

La réponse courte

Un site web 3D en vaut la peine quand le sujet est spatial ou quand le fait de s'y déplacer explique quelque chose qu'une image ne peut pas montrer : un produit que l'on veut faire tourner, un lieu, un jeu de données, un monde. Il n'en vaut pas la peine quand il ne fait que décorer une page qu'une photo ou une courte vidéo expliquerait tout aussi bien. Dans tous les cas, la couche 3D a un coût réel en poids de téléchargement, en batterie et en accessibilité : construisez la page pour qu'elle fonctionne sans elle, et traitez la 3D comme une amélioration.

Ce guide s'appuie sur deux de nos propres projets : Janus Observatory, une expérience dans le navigateur qui compte dix mondes en 3D, et dardo.studio, dont la page d'accueil s'ouvre sur une scène 3D en temps réel.

Quand la 3D mérite sa place

• Le visiteur doit voir quelque chose sous plusieurs angles : un produit, un bâtiment, un équipement.
• L'espace est le sujet : une carte, un plan de site, un parcours d'un lieu à l'autre.
• L'interaction explique un système plus vite que le texte, par exemple pour comparer des scénarios ou explorer des données.
• L'expérience de marque est le produit : lancements, expositions et campagnes où l'atmosphère compte et où les visiteurs s'attendent à explorer.

Quand elle ne la mérite pas

• La scène 3D répète ce qu'un titre et une image disent déjà.
• La plupart des visiteurs arrivent sur des téléphones de milieu de gamme, en données mobiles, et ont besoin d'une information rapidement : un prix, une adresse ou des horaires d'ouverture.
• Personne dans l'équipe ne maintiendra les modèles, le code et les solutions de repli après la mise en ligne.

3D, vidéo ou images ?

WebGL fonctionne dans tous les navigateurs modernes. WebGPU est plus récent et plus rapide pour certaines tâches, mais sa prise en charge varie encore : prévoyez une solution de repli. L'entrée en 3D de dardo.studio essaie d'abord WebGPU et se rabat sur WebGL 2, tandis que les pages de services, de réalisations et de contact sont en HTML simple et n'attendent jamais de scène 3D.

Ce que nous a appris la construction de Janus Observatory

Janus Observatory transforme dix scénarios publiés sur l'avenir de la Terre en un récit de 17 chapitres, un atlas et un observatoire, avec dix mondes low poly originaux et un astronome extraterrestre articulé. Il tourne sur l'offre gratuite de Cloudflare Workers, qui plafonne la taille de l'application. Le rapport de version du projet, daté du 27 septembre 2026, consigne ce qu'il a fallu faire pour le garder rapide :

• Compresser les modèles et garder une solution de repli. Les 59 modèles 3D sont livrés en variantes gzip totalisant 8,2 Mo au lieu de 15,8 Mo, soit 47,9 % de moins à télécharger. Les navigateurs qui ne savent pas les décompresser reçoivent les fichiers d'origine.
• Décoder hors du thread principal, puis s'arrêter. Le décodage Meshopt s'exécute dans un seul worker en arrière-plan, qui s'arrête après cinq secondes d'inactivité.
• Fixer un budget JavaScript et le faire respecter. Le JavaScript initial de la page d'accueil pèse 197 059 octets compressés en gzip, pour un budget de 256 000 octets, et le build le vérifie.
• Surveiller les avalanches de requêtes. Une boucle de préchargement spéculatif dans la stack Next.js et OpenNext a envoyé 11 704 requêtes lors d'une seule trace de navigateur en échec. La correction a consisté à désactiver le préchargement pour ces liens, et les tests exigent désormais zéro requête spéculative.
• Fixer la résolution plutôt que courir après les images par seconde. Les canvas sont rendus avec un device pixel ratio fixé entre 1 et 1,5. Le rapport a aussi retiré un chiffre d'images par seconde publié plus tôt, qui dépendait d'une baisse de la résolution : nous n'en citons donc aucun.

Le construire pour qu'il fonctionne sans 3D

Janus suit une règle qui détermine tout le reste : l'expérience principale doit fonctionner sans WebGL et sans IA. Les dix fiches de scénarios se chargent avec JavaScript désactivé, les commandes fonctionnent sans WebGL, et la rotation au clavier, le focus visible et la réduction des animations ont été intégrés à chaque fonctionnalité. Sa page d'accessibilité liste les commandes, les équivalents non visuels et les limites connues. L'objectif est le niveau AA des WCAG 2.2, vérifié par des tests automatisés dans Chromium, Firefox et WebKit.

Cette règle aide aussi les moteurs de recherche et les assistants IA : les textes, les noms et les données se trouvent dans le HTML, pas dans un canvas.

Checklist pour une page 3D rapide et accessible

1. Écrivez d'abord la page sans 3D. Si la version HTML n'a pas de sens, la 3D n'y changera rien.
2. Décidez ce que la 3D explique, et supprimez tout ce qui n'est là que pour impressionner.
3. Fixez des budgets pour le JavaScript, le poids des modèles et la taille des textures avant le début de la modélisation, et vérifiez-les dans le build.
4. Compressez les modèles avec des outils comme meshoptimizer, servez-les au format glTF et gardez une version non compressée en repli quand vous dépendez de fonctionnalités récentes des navigateurs comme DecompressionStream.
5. Chargez la scène après le contenu, et seulement quand elle est sur le point d'être vue.
6. Plafonnez le ratio de pixels pour que les écrans haute densité ne calculent pas quatre fois plus de pixels.
7. Respectez prefers-reduced-motion, donnez à chaque interaction un équivalent au clavier et placez un équivalent textuel à côté de chaque canvas.
8. Testez sur de vrais téléphones de milieu de gamme et dans plus d'un moteur de navigateur, puis suivez les Core Web Vitals après la mise en ligne.

Combien ça coûte

La 3D ajoute du temps de modélisation, d'optimisation et de tests au design et au développement, et les solutions de repli font partie du travail, ce n'est pas un supplément. Quand nous la chiffrons, elle correspond à la ligne « animations sur mesure, 3D ou données interactives » des facteurs de coût décrits dans notre guide sur le prix d'un site web en Colombie.

Comment Dardo conçoit des sites web 3D

Nous concevons et développons des expériences 3D avec notre service de sites web 3D interactifs, et des animations plus légères ou liées au défilement avec le développement créatif. Pour Hyper, nous avons construit avec React Three Fiber un récit 3D piloté par le défilement, qui rassemble des signaux épars en un seul profil client. Si vous avez une idée qui a besoin d'espace pour être comprise, parlez-nous-en.