1. Origine
Créée le 24 avril 2010 par Ricardo Cabello (mr.doob), développeur espagnol passé par la scène demo et Flash avant de se tourner vers le web, Three.js est devenue la couche d'abstraction WebGL la plus populaire au monde, avec une communauté massive et un écosystème riche d'exemples et d'extensions. L'objectif dès le départ : rendre la 3D dans le navigateur accessible sans écrire du GLSL et du WebGL brut. La librairie est open source (licence MIT), maintenue activement sur GitHub, et en est à sa release r184 en 2026.
2. Utilité
Intégrer de la 3D interactive dans Webflow sans maîtriser WebGL brut : des backgrounds animés aux configurateurs de produits en passant par les hero sections spectaculaires.
Pour les projets qui demandent un différenciateur visuel fort, Three.js permet d'aller au-delà des animations CSS/GSAP classiques : volumes, lumières, matériaux, caméras.
Chez Studio Relief, on l'intègre en code embed Webflow pour des hero sections sur-mesure et des backgrounds de particules, sur les projets où l'expérience visuelle est un argument commercial.
3. Fonctionnalités
Three.js couvre l'ensemble du pipeline 3D dans le navigateur, de la géométrie au rendu final.
- Rendu 3D : via WebGL (renderer principal) et WebGPU (renderer nouvelle génération, intégré officiellement)
- Géométries, matériaux, lumières et caméras : pipeline 3D complet
- Import de modèles 3D : GLTF, OBJ, FBX
- Shaders personnalisés en GLSL et post-processing (bloom, depth of field)
- Animations et morphing
- Contrôles de caméra intégrés : OrbitControls, FlyControls, etc.
- Écosystème étendu : React Three Fiber (intégration React), Drei (helpers prêts à l'emploi), compatible GSAP pour les timelines d'animation
4. Cas concrets
→ Un client veut une home page qui se distingue immédiatement de la concurrence. On intègre Three.js via un embed Webflow : un objet 3D, le logo de la marque retravaillé en volume, tourne progressivement au scroll. L'animation est synchronisée avec la position de défilement via GSAP. Le résultat est une expérience immersive dès l'arrivée sur le site, sans compromis sur les performances : le script est chargé en différé, l'objet est optimisé en polygones, et la version mobile affiche une alternative statique.
→ Un fabricant de mobilier veut permettre à ses prospects de visualiser les coloris et matériaux de ses produits avant de demander un devis. On intègre un viewer Three.js avec import du modèle GLTF fourni par le client : l'utilisateur fait pivoter la pièce à 360°, change le matériau au clic (tissu, cuir, bois), et visualise le rendu en temps réel. Le configurateur remplace les grilles de photos multiples et réduit les échanges commerciaux de qualification avant commande.
5. Prix
Gratuit et open source (licence MIT)
6. Questions fréquentes
Comment intégrer Three.js dans Webflow ?
Via un script CDN dans les paramètres du site ou via pnpm dans votre code source, puis avec du code custom dans un embed HTML.
Three.js vs GSAP ?
GSAP anime des éléments DOM/CSS, Three.js crée des scènes 3D : ils se complètent et s'utilisent souvent ensemble.
Compatible mobile ?
Oui, avec des optimisations de performance (limiter les polygones, textures compressées). Le renderer WebGPU offre de meilleures performances sur les appareils récents compatibles.
Three.js ou React Three Fiber ?
R3F est un wrapper React autour de Three.js. Si le projet est en React/Next.js, R3F simplifie l'intégration. Pour un embed Webflow en vanilla JS, Three.js directement est plus adapté.
