Site Three.js
Sites web Three.js : scènes 3D interactives, animations, effets visuels immersifs.
Point de repere
Quand cette page est utile
Votre produit perd son intérêt en photo plate.
Votre site tourne hors React et doit le rester.
Vous voulez une seule scène forte, pas une application.
Three.js, la bibliothèque qui rend la 3D accessible au navigateur
Three.js est une bibliothèque JavaScript libre qui pilote WebGL à votre place. Elle gère la caméra, les lumières, les matériaux et le rendu image par image. Sans elle, afficher un simple cube texturé demande des centaines de lignes de code bas niveau.
Nous l'utilisons pour des sites où la scène 3D porte le message principal. Le visiteur tourne autour d'un objet, survole un décor ou déclenche une animation au défilement. Le reste du site reste en HTML classique, lisible par Google et par les lecteurs d'écran.
Quand un site Three.js se justifie vraiment
Présenter un objet que la photo trahit
Un meuble en marbre, une montre, une pièce mécanique : certaines matières se comprennent mieux quand on les fait pivoter. La scène Three.js montre les reflets et les volumes sous plusieurs angles.
Un site vitrine avec une scène signature
Une seule scène forte en haut de page suffit souvent. Elle installe l'univers de la marque, puis laisse place à des sections textuelles rapides à charger.
Un projet en JavaScript pur, sans React
Si votre site tourne sur WordPress, Shopify ou un HTML statique, Three.js s'intègre directement dans un bloc de page. Aucune refonte de l'architecture n'est nécessaire.
De la maquette à la scène en ligne
- 01
Story-board de la scène
Nous fixons ce que le visiteur voit, ce qu'il peut toucher et ce qui se passe au défilement. Ce document évite les allers-retours coûteux une fois la modélisation lancée.
- 02
Préparation des modèles
Les objets sont modélisés ou nettoyés dans Blender, puis exportés en glTF binaire. Nous réduisons le nombre de polygones et regroupons les textures avant toute intégration.
- 03
Intégration et éclairage
La scène est montée dans le navigateur avec un éclairage par carte d'environnement HDR. Nous réglons l'exposition et le rendu des couleurs pour coller aux photos produit.
- 04
Tests sur appareils réels
Nous vérifions la fluidité sur des téléphones d'entrée de gamme, pas seulement sur un poste de développeur. Les effets trop lourds sont désactivés selon la puissance détectée.
Nos réglages Three.js par défaut
Compression des géométries et des textures
Draco compresse les maillages et KTX2 réduit le poids des textures en mémoire graphique. Le fichier téléchargé reste léger et le téléphone ne sature pas.
Chargement différé de la scène
Le canvas ne se charge qu'à l'approche de la zone visible. Le texte et les images de la page s'affichent d'abord, ce qui préserve les indicateurs de vitesse de Google.
Rendu à la demande
Quand rien ne bouge, nous arrêtons la boucle de rendu. La batterie du visiteur est épargnée et le ventilateur de son ordinateur reste silencieux.
Image de repli
Si WebGL est indisponible ou bloqué, une image fixe du même objet prend le relais. Personne ne tombe sur un cadre vide.
Ce que Three.js ne règle pas tout seul
Le contenu d'un canvas n'est pas indexé
Google ne lit pas ce qui est dessiné dans la scène. Les titres, descriptions et arguments commerciaux doivent exister en texte HTML autour du canvas.
La qualité dépend des modèles fournis
Un fichier CAO industriel n'est pas prêt pour le web. Sa conversion demande un vrai travail de retopologie, à prévoir dans le budget.
Une référence et une démonstration
Montecarlo Designs, Monaco
Pour cette marque de mobilier de luxe, les tables en marbre ont été modélisées sous Blender puis servies au format GLB sur la boutique, avec Three.js côté navigateur.
Lire l'étude de cas Montecarlo DesignsVidéo d'Albert Lanne
Albert montre comment il a relié Claude Code à Blender pour piloter la modélisation par une IA de code, une piste pour produire des modèles plus vite.
Voir l'expérience Claude Code et Blender
Pages voisines à consulter
- développement React Three Fiber pour Next.jsVotre site est déjà construit en React ? La version déclarative de Three.js s'y intègre plus proprement.
- expériences WebGL avec shaders sur mesurePour des effets de matière ou de particules qui dépassent les matériaux standards.
- création de site WordPressSi la scène doit vivre dans un site éditable par votre équipe.
Questions fréquentes
Les questions qu'on nous pose le plus sur site three.js.
Oui. La bibliothèque est publiée sous licence MIT. Vous pouvez l'utiliser sur un site commercial sans redevance. Seuls les modèles et textures achetés à des tiers peuvent avoir leurs propres conditions.
Elle pèse si elle est mal préparée. Avec des modèles compressés, un chargement différé et un rendu à la demande, le reste de la page s'affiche normalement avant la 3D.
Non. La scène peut être insérée dans une page existante, que le site tourne sous WordPress, Shopify ou un autre outil. Nous vérifions simplement les conflits de scripts.
Oui, à condition de pouvoir les ouvrir dans Blender. Nous les allégeons et les réexportons en glTF. Un fichier de fabrication très détaillé demande souvent une reprise complète.
Extensions utiles
Pour aller plus loin
Expérience WebGL
Expériences WebGL immersives. Shaders custom, particle systems, effets post-processing.
React Three Fiber
Développement React Three Fiber. 3D déclarative dans React/Next.js avec Drei et postprocessing.
Animation 3D Web
Animations 3D pour le web. Motion design 3D, transitions, effets scroll-driven.
On parle de votre projet site three.js ?
Envoyez-nous une photo ou un fichier de votre objet, nous vous dirons ce qu'une scène Three.js peut en tirer.