Tutoriel Three.js
Deux niveaux, plus le catalogue des formes. Sur chaque page, le bouton
</> Voir le code en bas à droite affiche le source commenté de la démo en cours.
À ouvrir via http://localhost/3D_simulator/ (pas en double-cliquant le fichier).
✎L'atelier — un script qui pilote la page
La scène tourne déjà : votre script agit dessus au lieu de la remplacer.
scene, camera, ajouter(),
chaqueImage() — vous écrivez une ligne, l'écran change. On n'apprend pas
à programmer en lisant du code : en le cassant.
▶Bac à sable — éditer le code en direct
Le code à gauche, le rendu à droite, la console en bas. Cinq exemples finis,
à démonter.
Sur chaque leçon, le bouton </> Éditer le code permet la même chose,
sans quitter la page.
Niveau 1 — Premiers pas Commencez ici
Douze micro-étapes. Chacune n'ajoute qu'une seule idée par rapport à la précédente.
Les étapes marquées d'une lettre (0b, 1b, 1c, 4b, 5b) sont
des détours : elles ne font avancer aucune démo, elles s'arrêtent sur une notion que
le fil principal survole. Celles marquées d'un point (3.1…) sont des
simulations : elles n'apprennent rien de neuf, elles font
servir l'étape dont elles portent le numéro. Sautez-les si vous êtes pressé,
revenez-y quand quelque chose vous échappe.
Le socle
0Un écran vide (mais qui marche)
Scène, caméra, renderer. Le socle de tout le reste.
0bLa couleur du fond
L'hexadécimal expliqué, THREE.Color, fond transparent,
et pourquoi votre couleur s'affiche exactement telle que demandée.
Le premier objet
1Mon premier cube
Géométrie + matériau = mesh. Et pourquoi il faut reculer la caméra.
1bLa couleur du cube
Pourquoi il était arc-en-ciel. material.color, wireframe,
opacité, et les faces qu'on ne dessine pas.
Se repérer, placer, animer
1cLe repère 3D et les unités
X, Y, Z : où pointe chacun. Le « Y en haut », les radians,
et pourquoi un cube posé au sol est en y = 0.5.
2Placer un objet
position, rotation, scale — pilotées par des curseurs.
2bLa caméra
Ses quatre arguments, présents depuis l'étape 0 et jamais expliqués. Trois
focales à sujet identique : le FOV n'est pas un zoom. Et pourquoi
near = 0.001 est exactement le contraire de ce qu'il faut faire.
3Faire bouger
La boucle de rendu et requestAnimationFrame.
3.1Simulation — la chute et le rebond
Lune, Terre et Jupiter côte à côte, lâchées ensemble. Gravité, rebond,
amortissement. Pourquoi Jupiter n'est pas 15× plus rapide que la Lune alors que sa
gravité l'est.
3.2Simulation — le pendule
Trois pendules identiques, seule la gravité change. Et la preuve, chiffrée,
que le T = 2π√(L/g) du lycée se trompe de 144 % à grand angle.
3.3Simulation — le ressort
Sous-amorti · critique · sur-amorti, lâchés ensemble. Les maths de tout
mouvement lissé — et le piège du x += (cible − x) * 0.1 que tout le
monde écrit, et qui dépend des images par seconde.
Chaque régime, seul — avec sa loi, vérifiable à l'écran
La page 3.3 compare les trois. Celles-ci les isolent, avec ζ réglable
librement — parce que c'est un continuum, pas trois objets différents.
Chaque astre, seul — la même physique, sans rien pour distraire
Les pages ci-dessus comparent les trois astres. Celles-ci font l'inverse :
un seul astre à l'écran, ses chiffres, et ce qu'on sait de lui. Les deux servent —
aucune ne remplace l'autre.
La Lune — g = 1.62 m/s²
La Terre — g = 9.81 m/s²
Jupiter — g = 24.79 m/s²
3.4Simulation — l'écrasement au sol
Trois cubes, même chute, trois matières : rigide, mou, cassant. Le
squash & stretch de Disney, et une fracture en 125 morceaux qui sont
le cube — volume conservé, gerbe plate. Impact vérifié à √(2gh).
3.4bSimulation — la déformation maillée
Le même écrasement, mais sommet par sommet : le cube ne s'échelonne plus, il se
renfle comme un tonneau. Choisissez le nombre de carreaux — à 1, il n'a
que 8 coins et n'en est pas capable. Volume mesuré à 1,000000, pas supposé.
Chaque matière, seule — avec sa loi, vérifiable à l'écran
La page ci-dessus compare les trois. Celles-ci font l'inverse : une matière à
l'écran, ses réglages à elle, et une loi que le compteur vérifie sous vos yeux.
La lumière et le décor
4La lumière
Pourquoi votre objet est tout noir, et comment l'éclairer.
4.1Simulation — le cycle jour / nuit
Le soleil tourne, le ciel suit. Ambiante seule · directionnelle seule · les deux,
côte à côte au même instant : on voit enfin ce que chaque lumière fait, et ne fait pas.
4bCe qui entoure le cube
Le sol, la grille, le brouillard, l'environnement reflété.
Pourquoi une scène vide ne donne aucun repère — ni aucun reflet.
Les formes
5Plusieurs objets
Cube, sphère, tore. Le repère des axes X / Y / Z.
5.1Simulation — le système solaire
Six planètes, la Lune, les anneaux de Saturne. La Lune n'est jamais calculée :
elle est enfant de la Terre, donc elle suit. Et pourquoi toute maquette ment.
5.1bSimulation — le système solaire, en vol libre
Le même système, mais vous pilotez : ZQSD, souris, et un suivi de planète.
Allez voir les anneaux de Saturne de près. Le piège d'OrbitControls qui
casse toute navigation, et getWorldPosition pour retrouver un enfant.
5.3Simulation — mille objets
1000 Mesh contre un InstancedMesh, images identiques,
appels de dessin mesurés : 2 000 contre 1, et 27× moins de temps processeur.
La leçon de performance n°1 de toute la 3D.
5.3bSimulation — mille objets, en vol libre
Entrez dans le tas de cubes : le compteur tombe de 2 000 à 997 appels selon
où vous regardez. C'est le frustum culling qui travaille sous vos yeux — et la
limite de l'InstancedMesh, testé en bloc.
5bToutes les formes — le catalogue
Les 19 géométries de Three.js côte à côte, avec le nombre de triangles
de chacune. Et le compromis segments / triangles, en direct.
Les 19 formes, une par une — un sous-chapitre par géométrie
Le catalogue montre qu'elles existent ; ces pages apprennent à s'en servir. Chacune est
seule à l'écran avec tous ses paramètres en curseurs, son appel de constructeur
qui s'écrit en direct, son compte de triangles, et ses pièges propres.
Les primitives
Tores et surfaces plates
Les polyèdres
Les génératives
La navigation
6La souris et la fenêtre
OrbitControls et redimensionnement. Le squelette est complet.
6.1Simulation — le tir
Visez à la souris, cliquez pour tirer. Trois billes, même vitesse, même
direction — trois trajectoires. Tout se rejoint : boucle, gravité, caméra libre.
Niveau 2 — Les leçons Une fois le niveau 1 digéré
Chaque page combine désormais plusieurs notions et va plus loin dans le détail.
Les fondamentaux
01Scène, caméra, renderer
Le trio minimal, revu proprement, avec les commentaires complets.
02Géométries & matériaux
Cube, sphère, tore, plan. Basic vs Lambert vs Standard vs Wireframe.
03Lumières & ombres
Ambient, directional, point, spot. Activer les ombres portées.
04Textures & PBR
Map, normalMap, roughness, metalness. Textures générées en canvas.
Interaction, modèles, physique
05Interaction
OrbitControls, raycaster (cliquer un objet), survol, redimensionnement.
06Charger un modèle glTF
GLTFLoader, barre de progression, centrage automatique du modèle.
07Animation & physique
Delta time, gravité, rebonds, collisions simples sans moteur externe.
Les projets complets
08Mini-simulateur
Tout combiné : scène éclairée, objets cliquables, panneau de réglages.
09Votre modèle Blender
Déposez votre propre .glb sur la page : cadrage automatique, ombres,
et lecture de vos animations.
10Se déplacer au clavier
ZQSD ou flèches, monter, descendre, courir. Comment translater la caméra
sans casser OrbitControls.