Présentation

Three.js est une bibliothèque JavaScript consacrée à la 3D dans le navigateur. Son objectif est de rendre plus accessible l’utilisation des API graphiques du Web en fournissant des abstractions pour créer des scènes, caméras, lumières, objets, matériaux, animations et interactions sans manipuler directement toute la complexité de WebGL ou WebGPU.

Une scène Three.js repose généralement sur trois éléments fondamentaux : une Scene, une Camera et un renderer. À partir de cette base, le développeur ajoute des géométries, modèles importés, textures, lumières, effets ou interfaces puis anime et met à jour la scène avec JavaScript.

Three.js ne doit pas être confondu avec un moteur de jeu complet comme Godot, Unity ou Unreal Engine. Il ne fournit pas par défaut un système de gameplay, un éditeur de niveaux complet, une architecture d’entités imposée, un moteur physique généraliste ou un pipeline de publication vers consoles. Il s’agit avant tout d’une bibliothèque de rendu et d’outils 3D Web, laissant au développeur beaucoup plus de liberté sur l’architecture de son application.

Cette approche rend Three.js particulièrement adaptée aux configurateurs de produits, visualisations scientifiques, portfolios interactifs, expériences Web créatives, applications pédagogiques, mini-jeux, interfaces 3D ou expériences AR/VR accessibles depuis un navigateur.

Le projet est entièrement open source sous licence MIT. Son code peut être utilisé, modifié et intégré dans des projets personnels ou commerciaux sans royalties.

Lors de cette vérification, la version publiée la plus récente est 0.186.0, correspondant à la révision r186. Three.js évolue régulièrement et son API peut changer entre les révisions, ce qui rend la consultation du guide de migration importante lors de la mise à jour de projets anciens.

Fonctionnalités

Scènes, caméras et graphe d’objets

Three.js structure les scènes sous forme de hiérarchie d’objets.

Une Scene peut contenir meshes, lumières, caméras, groupes et autres objets dérivés de Object3D. Chaque élément peut avoir une position, rotation, échelle et relation parent-enfant.

Cette organisation permet par exemple de regrouper plusieurs composants d’un véhicule, d’attacher une caméra à un personnage ou de déplacer tout un ensemble d’objets à partir d’un seul groupe.

Les principales caméras comprennent notamment PerspectiveCamera, adaptée aux scènes 3D classiques, et OrthographicCamera, utile pour certaines interfaces, visualisations techniques ou jeux à projection orthographique.

Three.js fournit également raycasting, frustum culling, layers et différents outils facilitant la sélection, la visibilité et les interactions avec la scène.

WebGLRenderer et nouvelle génération WebGPURenderer

Three.js s’est historiquement construit autour de WebGLRenderer, qui reste un renderer largement utilisé et compatible avec un très grand nombre de navigateurs et d’appareils.

Le projet développe désormais également WebGPURenderer, présenté comme son renderer de nouvelle génération.

WebGPU donne un accès plus moderne au GPU et ouvre la voie à des techniques graphiques et de calcul plus avancées. Three.js a toutefois conçu WebGPURenderer comme un renderer universel : lorsqu’un navigateur ou un appareil ne prend pas WebGPU en charge, il peut utiliser automatiquement un backend WebGL 2 de repli.

Cela permet de commencer à exploiter WebGPU sans réserver nécessairement l’application aux machines les plus récentes.

Les builds principaux actuels de Three.js comprennent WebGL et WebGPU. D’autres approches, comme les renderers CSS3D ou SVG, restent disponibles sous forme d’addons pour des usages plus spécifiques.

Matériaux PBR, lumières, ombres et environnements

Three.js propose de nombreux matériaux allant du simple affichage non éclairé aux matériaux physiquement basés.

MeshStandardMaterial et MeshPhysicalMaterial permettent notamment de gérer des workflows PBR avec propriétés métalliques, roughness, transmission, clear coat, iridescence, dispersion et différents types de textures.

Plusieurs sources lumineuses sont disponibles : directionnelles, ponctuelles, spot, ambient ou hemisphere.

Le moteur de rendu prend également en charge les ombres, environment maps, HDR, tone mapping et différents espaces colorimétriques nécessaires pour obtenir un rendu cohérent.

Ces fonctions permettent d’afficher aussi bien une scène stylisée légère qu’un produit réaliste utilisant des textures et un environnement HDR.

WebGPU, TSL et système de matériaux par nœuds

Le développement de WebGPURenderer s’accompagne de TSL — Three.js Shading Language.

TSL permet de construire des matériaux et calculs graphiques sous forme de nœuds JavaScript plutôt que d’écrire directement tout le shader dans un langage bas niveau.

Cette architecture sert aussi bien à créer des matériaux personnalisés qu’à exploiter certains calculs GPU ou effets de post-traitement.

Elle permet notamment de partager davantage de logique entre les backends WebGPU et WebGL 2 pris en charge par WebGPURenderer.

Pour des développeurs qui veulent aller au-delà des matériaux standards sans maintenir plusieurs versions de shaders, TSL représente une évolution importante de Three.js.

Post-traitement et RenderPipeline

Three.js permet d’ajouter des effets après le rendu principal : bloom, depth of field, anti-aliasing, color grading, ambient occlusion, réflexions ou effets stylisés.

Avec WebGPURenderer, la pile moderne de post-traitement repose sur RenderPipeline et le système de nœuds.

Le pipeline peut combiner plusieurs effets afin de réduire certains passages de rendu et prend en charge nativement les Multiple Render Targets — MRT, utiles pour des techniques plus avancées.

L’ancien écosystème WebGL dispose lui aussi de solutions de post-traitement basées notamment sur différents passes et EffectComposer.

Le choix dépend donc en partie du renderer utilisé et de la génération du projet.

Importer glTF, FBX, OBJ, STL et de nombreux autres formats

L’un des points forts de Three.js est son vaste ensemble de loaders.

La documentation actuelle fournit notamment des loaders pour :

  • glTF et GLB ;
  • FBX ;
  • OBJ et MTL ;
  • Collada ;
  • STL ;
  • PLY ;
  • 3MF ;
  • USD ;
  • Rhino 3DM ;
  • LDraw ;
  • VOX ;
  • BVH ;
  • SVG ;
  • HDR et EXR ;
  • différents formats de textures compressées.

Pour les scènes 3D temps réel modernes, glTF 2.0 constitue généralement le format privilégié.

GLTFLoader prend en charge de nombreuses extensions de glTF, notamment les matériaux avancés, Draco, Meshopt, textures KTX2/Basis, instancing GPU et plusieurs formats de textures modernes.

Cette prise en charge permet d’exporter un modèle depuis Blender ou un autre logiciel DCC puis de retrouver dans Three.js sa hiérarchie, ses matériaux et ses animations.

Draco, Meshopt et KTX2 pour alléger les scènes Web

Le poids des ressources constitue un problème majeur pour la 3D dans un navigateur.

Three.js fournit plusieurs outils pour réduire la quantité de données transférées.

Draco peut compresser fortement la géométrie d’un mesh. DRACOLoader utilise ensuite un décodeur JavaScript ou WebAssembly selon les capacités du navigateur.

Meshopt représente une autre méthode de compression et d’optimisation intégrable aux fichiers glTF.

Pour les textures, KTX2/Basis Universal permet de distribuer des textures compressées puis de les transcoder vers un format adapté au GPU de l’utilisateur.

Ces techniques sont particulièrement importantes pour une scène destinée au Web : un modèle qui fonctionne parfaitement sur un ordinateur local peut devenir inutilisable s’il nécessite plusieurs centaines de mégaoctets à chaque chargement.

Animation de modèles et systèmes de morphing

Three.js comprend un système d’animation permettant de lire et mélanger plusieurs clips.

AnimationMixer peut piloter animations squelettiques, transformations, morph targets et différentes propriétés animables.

Un personnage importé depuis un fichier glTF peut donc contenir plusieurs clips — marche, course, attaque, idle — qui seront ensuite activés ou mélangés selon l’état de l’application.

Les morph targets peuvent également être utilisés pour des expressions faciales, transformations progressives ou variations de géométrie.

Three.js fournit les briques nécessaires au rendu et au contrôle de ces animations, mais la logique de gameplay ou la machine d’état reste à construire par le développeur ou avec une bibliothèque complémentaire.

Contrôles, interactions et raycasting

Les addons fournissent différents systèmes de caméra et de navigation.

OrbitControls permet par exemple de faire tourner une caméra autour d’un objet avec souris, tactile ou trackpad. D’autres contrôles sont adaptés à la vue à la première personne, au déplacement libre ou à des interactions particulières.

Le raycasting permet de déterminer quel objet se trouve sous le pointeur ou dans la direction d’un rayon.

Cette fonction constitue la base de nombreuses interactions : sélectionner un produit, cliquer sur une pièce mécanique, viser un objet, afficher une infobulle ou déclencher une action dans une scène.

Three.js fournit donc les outils fondamentaux, mais laisse au développeur la responsabilité de construire l’interface et les règles correspondant à son projet.

WebXR pour réalité virtuelle et augmentée

Three.js prend en charge WebXR, l’API Web destinée aux expériences de réalité virtuelle et augmentée.

WebXRManager, utilisé par les renderers, permet de gérer l’activation XR, les caméras, contrôleurs et différents éléments nécessaires à une session immersive.

Les exemples officiels couvrent notamment la VR, l’AR, les contrôleurs, le hand tracking et différents modes d’interaction.

Une expérience compatible peut donc fonctionner directement depuis un navigateur prenant en charge WebXR, notamment sur certains casques autonomes.

Les capacités disponibles dépendent néanmoins fortement du navigateur, de l’appareil et des API exposées par la plateforme.

Installation avec npm, modules ES ou CDN

Three.js peut être intégré de plusieurs manières.

Pour un projet moderne, la documentation recommande généralement l’installation via npm et l’utilisation d’un outil de build comme Vite :

npm install --save three

Les addons sont ensuite importés séparément depuis three/addons/.

Une intégration par CDN reste possible, notamment avec des modules ES et une import map.

Cette modularité permet d’utiliser seulement les composants nécessaires plutôt que de considérer Three.js comme une application monolithique.

La bibliothèque peut également être hébergée directement avec le projet, sans dépendre d’un service distant à l’exécution.

Un vaste ensemble d’addons et d’exemples officiels

Three.js conserve volontairement son cœur relativement généraliste.

De nombreuses fonctions supplémentaires sont fournies sous forme d’addons : contrôles caméra, loaders, exporters, post-traitement, utilitaires géométriques, outils WebXR, CSS3D, courbes, effets, helpers et autres composants.

Le site officiel contient également une très grande collection d’exemples fonctionnels.

Ces exemples sont particulièrement importants dans l’écosystème Three.js : ils servent à la fois de démonstration des capacités de la bibliothèque et de référence technique pour intégrer certaines fonctions avancées.

Une partie importante de l’apprentissage consiste donc à associer documentation API, manuel et exemples existants.

Un éditeur Web, mais pas un moteur visuel complet

Three.js propose également un éditeur Web permettant de créer une scène, ajouter des objets, lumières et caméras, modifier leurs propriétés et importer différents assets.

Cet outil est pratique pour expérimenter, préparer une scène ou comprendre la structure du moteur.

Il ne faut cependant pas le considérer comme l’équivalent de l’éditeur Unreal, Unity ou Godot.

Dans un projet Three.js classique, l’essentiel de la logique, des interactions et du pipeline reste construit en JavaScript ou TypeScript dans un environnement de développement externe.

TypeScript possible avec des définitions communautaires

Le code de Three.js est écrit principalement en JavaScript.

Les projets TypeScript peuvent néanmoins utiliser la bibliothèque grâce aux définitions @types/three, maintenues par la communauté dans le projet three-types puis distribuées via DefinitelyTyped.

Cette solution offre autocomplétion, vérification des types et meilleure intégration avec les IDE modernes.

Il faut toutefois garder à l’esprit que les définitions TypeScript constituent un projet distinct du code principal Three.js. Lors d’une nouvelle révision, un léger décalage peut parfois exister avant la mise à jour correspondante des types.

Cas d’usage

Créer un configurateur de produit en 3D

Un site e-commerce peut charger un produit en glTF puis permettre au visiteur de le tourner, zoomer et modifier sa couleur ou certains matériaux.

Les interactions sont gérées avec le raycasting et l’interface HTML, tandis que Three.js prend en charge le rendu temps réel.

Le même principe peut servir pour des meubles, véhicules, chaussures, équipements industriels ou objets personnalisables.

L’avantage principal est de conserver l’expérience directement dans la page Web sans imposer l’installation d’une application 3D.

Construire un portfolio ou une expérience Web créative

Un artiste ou designer peut créer une page entièrement animée dans laquelle les projets prennent la forme d’objets, environnements ou transitions 3D.

Three.js peut se combiner avec HTML, CSS, vidéo, audio et les autres technologies front-end.

Cette capacité à mélanger DOM traditionnel et rendu GPU explique son utilisation fréquente sur des sites expérimentaux, portfolios, campagnes interactives et expériences de marque.

Le développeur garde un contrôle beaucoup plus direct sur l’interface qu’avec un moteur de jeu embarqué dans une page.

Visualiser des données scientifiques ou techniques

Une application peut représenter des molécules, bâtiments, nuages de points, trajectoires, réseaux ou ensembles de données dans un espace 3D navigable.

Les objets peuvent être générés dynamiquement en JavaScript plutôt que chargés uniquement depuis des modèles préparés à l’avance.

Three.js devient alors une couche de visualisation connectée aux données de l’application.

Pour les ensembles très importants, des techniques d’instancing, de niveaux de détail et d’optimisation GPU deviennent cependant indispensables.

Développer un jeu Web ou un prototype interactif

Three.js peut parfaitement servir de base à un jeu exécuté dans le navigateur.

Le développeur dispose du rendu, des animations, du raycasting, de l’audio Web, du chargement de modèles et des entrées navigateur.

Il doit en revanche construire ou intégrer lui-même une grande partie des systèmes que fournirait un moteur de jeu : physique, navigation, sauvegarde, entités, comportement IA ou outils de level design.

Three.js convient donc particulièrement aux jeux Web personnalisés et aux expériences interactives où cette liberté est un avantage.

Créer une expérience VR ou AR accessible par navigateur

Une application WebXR peut afficher un environnement Three.js dans un casque compatible ou superposer certains contenus à l’environnement réel.

Le même graphe de scène, les mêmes modèles et une grande partie de la même logique peuvent être réutilisés entre l’affichage classique et la session XR.

Cela permet de diffuser certaines expériences immersives directement par URL.

La compatibilité WebXR reste toutefois dépendante des navigateurs et appareils utilisés, ce qui impose de prévoir des solutions de repli lorsque l’expérience cible un large public.

Conclusion

Three.js reste l’une des bibliothèques fondamentales de la 3D sur le Web.

Sa force principale est de fournir une couche suffisamment haut niveau pour éviter de gérer directement toutes les subtilités de WebGL ou WebGPU, tout en laissant au développeur beaucoup plus de contrôle qu’un moteur de jeu complet.

Le projet couvre désormais une grande partie des besoins du rendu 3D moderne : PBR, HDR, animations, glTF, compression, post-traitement, WebXR et désormais un travail important autour de WebGPU et de TSL.

L’arrivée de WebGPURenderer montre également la direction prise par le projet. Three.js ne se contente plus de maintenir son historique WebGL : il construit progressivement une architecture capable d’exploiter les nouvelles API GPU du navigateur tout en conservant un backend WebGL 2 pour les appareils qui n’ont pas encore WebGPU.

Cette flexibilité a une contrepartie. Three.js fournit des briques et non un workflow complet de production. Il n’impose ni système de gameplay, ni moteur physique complet, ni éditeur de niveaux comparable à Godot ou Unreal. Les projets importants demandent donc davantage de décisions d’architecture et souvent plusieurs bibliothèques complémentaires.

Les mises à jour sont également fréquentes. Certaines API évoluent ou disparaissent au fil des révisions, et un vieux projet ne doit pas nécessairement passer directement à la toute dernière version sans consulter le guide de migration.

Pour un développeur qui veut intégrer une vraie scène 3D directement à une application Web, garder le contrôle sur son code et exploiter WebGL, WebGPU, glTF ou WebXR sans adopter un moteur de jeu complet, Three.js reste une référence particulièrement solide.

Points d’attention

  • Three.js est une bibliothèque JavaScript et non un moteur de jeu complet. Gameplay, architecture applicative, physique avancée et outils de production doivent souvent être ajoutés séparément.

  • La version actuelle vérifiée est 0.186.0 / r186. Le projet évolue régulièrement et de nouvelles révisions peuvent modifier certaines API.

  • Three.js est entièrement gratuit et open source sous licence MIT, y compris pour les projets commerciaux.

  • Les builds principaux actuels comprennent WebGLRenderer et WebGPURenderer. SVGRenderer et CSS3DRenderer restent disponibles sous forme d’addons.

  • WebGPURenderer peut utiliser WebGPU puis revenir à un backend WebGL 2 lorsque WebGPU n’est pas disponible, ce qui facilite une transition progressive.

  • glTF 2.0 est généralement le format recommandé pour les assets 3D modernes. Three.js prend néanmoins en charge de nombreux autres formats grâce à ses loaders.

  • Draco, Meshopt et KTX2 peuvent réduire fortement le poids des modèles et textures, mais ajoutent des étapes de compression et de décodage au pipeline.

  • Le poids et la complexité des scènes restent critiques sur le Web. Une scène parfaitement fluide sur un PC puissant peut devenir trop lourde sur smartphone ou appareil intégré.

  • Three.js ne fournit pas de moteur physique généraliste intégré comparable à celui d’un moteur de jeu. Des bibliothèques externes comme Rapier ou d’autres solutions peuvent être associées au projet.

  • Le support WebXR dépend fortement du navigateur et de l’appareil, en particulier pour la réalité augmentée.

  • Les types TypeScript sont maintenus séparément par la communauté via @types/three, et peuvent exceptionnellement être légèrement décalés par rapport à une toute nouvelle révision.

  • Les projets anciens doivent être mis à jour avec prudence. Le guide de migration Three.js recommande notamment d’éviter les sauts trop importants afin de mieux gérer les API dépréciées.

  • Three.js fonctionne principalement dans le navigateur et peut être installé avec npm, chargé depuis un CDN ou hébergé directement avec le projet.

  • L’éditeur Web Three.js existe mais ne remplace pas un éditeur complet comme ceux de Godot, Unity ou Unreal Engine. La majorité du travail reste orientée code.