Un site web 3D qui reste rapide

Ce qu’un site web 3D peut faire pour vous

Un site web 3D n’est pas un gadget quand il a un rôle. Il peut expliquer un produit plus vite qu’une photo, rendre une marque presque tangible, ou transformer une liste de projets en quelque chose que l’on a vraiment envie d’explorer. Tout ce site est construit ainsi — faites défiler la page d’accueil pour le voir.

Un site web interactif, pas seulement animé

Une animation se joue devant le visiteur. L’interaction lui répond. Sur un site WebGL, la scène peut réagir au curseur ou au doigt, suivre exactement la position du scroll et ouvrir du vrai contenu au clic.

• Des particules qui s’écartent au passage du curseur.
• Un globe qui suit le pointeur, avec des arcs tracés depuis un lieu réel.
• Des écrans de projets qui ouvrent le site en ligne quand on clique ou qu’on touche.
• Du chrome liquide qui ondule quand une carte fond dedans.

Conçu pour rester rapide

Avec un site web animé en 3D, les craintes portent d’habitude sur la vitesse et le SEO. Les deux font partie du développement dès le premier jour, ce n’est pas quelque chose que l’on corrige à la fin :

• Tout le texte reste en HTML simple. Les moteurs de recherche lisent chaque mot, et la page fonctionne même avec JavaScript désactivé.
• Le contenu d’abord, la 3D ensuite. Le texte s’affiche immédiatement ; les scènes plus lourdes se préparent en arrière-plan.
• Pas de saccades au scroll. Shaders et textures sont préparés à l’avance, pas au moment où ils apparaissent.
• S’adapte à l’appareil. La résolution baisse automatiquement quand un appareil est lent, et les téléphones reçoivent des versions allégées des mêmes scènes.
• Une solution de repli pour chaque visiteur. Si un appareil ne peut pas exécuter WebGL, une version statique propre s’affiche. Le réglage « réduire les animations » est respecté.

Ce site lui-même, mesuré avec Google Lighthouse avant sa mise en ligne : 100 en performance sur ordinateur et 87–88 sur mobile, et 100 en accessibilité, bonnes pratiques et SEO sur les deux.

Pour qui

• Fabricants et marques de produits qui doivent montrer comment un produit est construit ou comment il fonctionne.
• Entreprises du BTP, bureaux d’ingénierie et cabinets d’architecture dont les projets méritent mieux qu’une grille de photos — voir sites web pour le BTP et l’ingénierie.
• Lancements et campagnes — une landing page dont on se souvient et que l’on partage.
• Studios créatifs et agences qui ont besoin d’un développeur WebGL et Three.js pour un projet client, y compris en marque blanche, sous votre nom.

Des réalisations réelles

Je ne montre que ce qui existe. Les concepts sont indiqués comme tels.

• Ce site — particules, chrome liquide, galerie 3D et globe en temps réel, construits avec Three.js. Faites-le défiler.
• PPG — concept de refonte, pas un projet client : un site d’entreprise d’ingénierie avec un tunnel de particules et des scènes au scroll. Découvrir le concept.
• Class’Mat® — projet client au Luxembourg : le site multilingue (français, allemand, anglais) que vous voyez sur l’ordinateur portable 3D en haut de ce site. Lire l’étude de cas.

Délais, prix et ce qui est inclus

Une première version en quelques jours, pas en quelques mois. Un site web 3D ou interactif demande en général jusqu’à 7 jours une fois vos textes et images prêts ; une landing page 2 à 4 jours. Les projets plus importants et les boutiques en ligne se planifient ensemble. Ce sont des estimations, pas des garanties.

Prix à convenir — estimation gratuite sous 24 heures.

Inclus dans chaque projet :

• Design sur mesure et code écrit à la main — sans template, sans constructeur de pages.
• Pensé d’abord pour le mobile, optimisé pour la vitesse.
• SEO de base : HTML propre, titres et descriptions, sitemap, données structurées.
• Plusieurs langues si besoin, chacune avec sa propre adresse pour Google.
• Aide pour le nom de domaine et l’hébergement.
• 30 jours de corrections après la mise en ligne.

Vous fournissez les textes et les images — ainsi que des photos de produits ou des modèles 3D, si vous en avez.

Méthode

1. 01

   Échange

   Quel doit être le rôle de la 3D — expliquer un produit, créer une ambiance, porter un récit ? On se met d’accord avant d’écrire la moindre ligne de code.

2. 02

   Première scène

   Une scène est construite en premier, pour que vous voyiez et ressentiez le mouvement tôt, sur votre propre écran.

3. 03

   Développement

   Le site complet, avec des aperçus à ouvrir sur votre téléphone au fil du travail.

4. 04

   Mise en ligne

   Domaine, hébergement, vitesse et SEO vérifiés — puis mise en ligne, suivie de 30 jours de corrections.