Accueil / Three.js et TSL
La bibliothèque de la 3D webThree.js : créer une scène 3D sans parler directement à la carte graphique.
Three.js est la bibliothèque la plus utilisée pour faire de la 3D sur le web. Elle transforme quelques lignes simples (un objet, une lumière, une caméra) en tout ce que WebGL ou WebGPU demandent. Et avec TSL, elle écrit même les shaders pour les deux.
Une scène, ce sont des briques.
Three.js existe depuis 2010, il est libre et gratuit. Son vocabulaire est celui d’un plateau de tournage : on pose des objets, on règle la lumière, on place la caméra.
Les objetsForme et matière
Un objet (mesh) associe une géométrie, la forme, et un matériau, l’aspect de sa surface : couleur, rugosité, reflet.
La lumièreLumières et ombres
Soleil, ampoule, projecteur, lumière d’ambiance : Three.js reproduit les éclairages classiques et calcule les ombres.
La caméraLe point de vue
La caméra décide de ce que l’on voit. On peut la laisser libre à la souris, la faire suivre un chemin ou la placer à l’intérieur d’un casque VR.
Une scène, en cinq étapes.
Faites avancer le curseur. Chaque cran ajoute une brique de Three.js, dans l’ordre où on les ajoute en vrai.
Ce que vous voyez
Un nœud et trois cubes sur un sol. Au départ, sans lumière, tout est plat. Puis la scène prend vie étape par étape.
Votre navigateur sera testé au lancement de la démo.
Dans le code, chaque étape tient en deux ou trois lignes. C’est ce qui rend Three.js si accessible, et si facile à faire écrire par une IA.
Écrire un shader une fois, l’obtenir pour WebGL et WebGPU.
WebGL comprend les shaders écrits en GLSL, WebGPU ceux écrits en WGSL. Écrire chaque effet deux fois serait pénible. TSL (Three.js Shading Language) règle le problème : on décrit l’effet en JavaScript, sous forme de blocs que l’on combine, et Three.js produit lui-même le bon langage selon le moteur disponible.
Concrètement, au lieu d’écrire un programme dans un autre langage, on assemble des opérations : prendre la position, ajouter une ondulation qui dépend du temps, mélanger deux couleurs selon la hauteur. C’est plus lisible, et les erreurs sont détectées plus tôt.
La démo de la page WebGPU, où 200 000 cubes sont placés par la carte graphique, et celle de la page Shaders sont écrites en TSL.
WebGPURenderer, le moteur de rendu qui fait les deux
Depuis 2024, Three.js propose WebGPURenderer : il utilise WebGPU quand le navigateur le permet, et bascule tout seul sur WebGL 2 sinon. C’est lui qui fait tourner toutes les démos de ce site.
Three.js n’est pas seul.
Chaque outil a son terrain de prédilection. Tous sont gratuits pour démarrer.
| Outil | Esprit | Idéal pour |
|---|---|---|
| Three.js | Bibliothèque légère et souple, immense communauté. | Sites vitrines 3D, configurateurs, visualisations, expériences sur mesure. |
| Babylon.js | Moteur complet, soutenu par Microsoft, avec éditeur et physique. | Jeux, applications 3D riches, projets qui veulent tout en un. |
| PlayCanvas | Moteur avec éditeur collaboratif en ligne. | Équipes mixtes graphistes et développeurs, jeux web, publicités 3D. |
| A-Frame | Surcouche de Three.js où l’on écrit la scène comme du HTML. | Prototypes de réalité virtuelle rapides, pédagogie. |
| React Three Fiber | Three.js piloté depuis React. | Applications web modernes déjà construites avec React. |
Three.js, les questions courantes.
Three.js est-il gratuit pour un usage commercial ?
Oui. Il est publié sous licence MIT : on peut l’utiliser, le modifier et l’intégrer à un produit commercial, en conservant simplement la mention de la licence.
Faut-il apprendre WebGL avant Three.js ?
Non. On peut commencer directement par Three.js. Comprendre ce qui se passe dessous (triangles, shaders, carte graphique) aide ensuite à optimiser : c’est l’objet de la page WebGL.
Comment importer un modèle 3D dans Three.js ?
Le format recommandé est le glTF, et sa version binaire GLB. Presque tous les logiciels 3D savent l’exporter, et Three.js le charge en quelques lignes.
À lire ensuite.
Parlons de ce que la 3D temps réel peut faire pour vous.
Configurateur, visite, carte interactive, formation en réalité virtuelle : je vous dis franchement si la 3D web est la bonne réponse.