Site internet 3D immersif

La 3D n'est pas un décor. Elle se justifie quand elle montre quelque chose qu'une photo ou une vidéo montre moins bien.

Un objet que l'on fait tourner pour en voir les détails, un espace que l'on parcourt, une marque qui veut marquer les esprits dès le premier écran : dans ces cas, une scène en trois dimensions apporte une information ou une émotion qu'un visuel plat ne transmet pas.

Elle a aussi un coût : du poids à charger, du calcul pour l'appareil du visiteur, du temps de conception. Le premier travail consiste donc à décider où elle sert le propos, et où une page classique fait mieux. Pour une entreprise locale dont les clients cherchent « un métier + une ville », un site vitrine rapide reste souvent le meilleur choix ; une animation légère suffit à le rendre mémorable.

• 01

  Ouverture de page

  Une entrée en matière marquante sur la page d'accueil, puis un site qui se lit normalement.

• 02

  Récit au défilement

  La caméra et les objets avancent avec la lecture : chaque section fait évoluer la scène.

• 03

  Présentation de produit

  Un objet à observer sous tous les angles, ses matières, ses détails, ses variantes.

• 04

  Identité en volume

  Un logo ou un monogramme mis en scène, des transitions qui prolongent la charte graphique.

• 05

  Espaces

  Un lieu, une maquette ou un aménagement que l'on découvre en se déplaçant.

• 06

  Séquence d'images

  Une alternative plus légère : des images précalculées, jouées au rythme du défilement.

Toutes les ambitions immersives ne demandent pas de 3D temps réel. Une séquence d'images dessinée sur un canvas et pilotée par le défilement produit un effet proche pour un poids maîtrisé. Les images sont alors chargées progressivement, pour que la page reste rapide.

Le rendu repose sur WebGL2, l'interface graphique des navigateurs, et sur Three.js, la bibliothèque 3D open source de référence sur le web. Les modèles sont livrés au format glTF, compressés, puis chargés à la demande. Les objets répétés en grand nombre sont dessinés en une seule passe (instanciation) pour ménager la carte graphique.

Les calculs lourds, comme une simulation physique, peuvent être réalisés à l'avance : le résultat est enregistré dans un fichier compact, puis rejoué dans le navigateur. L'appareil du visiteur n'a plus qu'à lire une trajectoire, au lieu de la calculer. La page d'accueil de ScaleCrew repose sur ces choix.

• Modèles glTF compressés et textures dimensionnées au plus juste
• Animations synchronisées avec le défilement de la page
• Simulation physique précalculée, rejouée sans calcul côté visiteur
• Résolution plafonnée et niveaux de qualité selon l'appareil
• Rendu mis en pause hors de l'écran et quand l'onglet est masqué

Le contenu s'affiche d'abord : titres, textes et boutons sont en HTML et apparaissent sans attendre la scène. La 3D arrive ensuite, chargée progressivement, avec un indicateur de progression et un délai maximal au-delà duquel la page reste utilisable sans elle.

Avant de charger quoi que ce soit de lourd, le site vérifie que l'appareil s'y prête : prise en charge de WebGL2, mode économie de données, réglage de réduction des animations. Les objectifs restent ceux de tout site performant : affichage du contenu principal (LCP) en 2,5 secondes au plus, réactivité (INP) sous 200 millisecondes et stabilité visuelle (CLS) sous 0,1.

Quand le système demande de réduire les animations, quand WebGL n'est pas disponible ou quand l'appareil est trop limité, la scène laisse place à des images fixes. Le contenu, la navigation et les appels à l'action restent identiques.

Le texte n'est jamais dessiné dans la scène : il reste du HTML, lisible au clavier et par les lecteurs d'écran. Le canvas est traité comme un élément décoratif, et un lien permet de passer l'animation d'ouverture pour aller directement au contenu.

Un moteur de recherche n'interprète pas une scène WebGL. Un site entièrement dessiné dans un canvas, sans texte ni structure, est presque invisible. La 3D se pose donc au-dessus d'une page complète : H1, intertitres, paragraphes, liens internes et données structurées, comme sur n'importe quel site bien construit.

Chaque intention de recherche dispose de sa propre page, avec une adresse stable et un titre précis. Le socle de référencement est le même que pour un site vitrine : la 3D attire l'attention, le contenu fait le travail de positionnement.

1. Intention

   Ce que la scène doit montrer, à quel moment de la lecture, et ce qu'elle remplace. Sans réponse claire, la 3D n'est pas proposée.

2. Prototype

   Un premier essai testé sur de vrais appareils, dont un téléphone de milieu de gamme, pour valider le rendu et la fluidité avant la production.

3. Production

   Modèles, matières, lumière, chorégraphie au défilement, puis optimisation du poids et de la mémoire utilisée.

4. Intégration & repli

   Intégration dans le site, version sans 3D, mesures de performance sur ordinateur et sur mobile, puis mise en ligne.