1. Qu’est-ce que Three.js ?

Three.js est une bibliothèque JavaScript qui permet de créer de la 3D directement dans une page web. Elle s’appuie sur WebGL (la “machine 3D” du navigateur), mais elle simplifie le travail. Au lieu d’écrire du code WebGL très technique (bas niveau), Three.js fournit des objets à assembler pour créer une scène 3D :

• une scène (le monde)
• une caméra (le point de vue)
• des lumières (l’ambiance)
• des objets et des textures (formes, couleurs, matériaux)
• des modèles 3D qu’on peut importer

Code bas niveau (WebGL) : plus de contrôle, mais plus technique et plus long à écrire.
Code haut niveau (Three.js) : plus simple et plus rapide, car la bibliothèque gère les détails.
Beaucoup de projets web utilisent des modèles externes au format glTF / .glb, un format très courant et pratique sur le web.

2. À quoi ça sert ?

Three.js sert à créer des expériences 3D interactives dans un site web, par exemple :

• Découvrir un produit (tourner autour, zoomer, ouvrir/fermer…)
• Visualiser des objets, des lieux ou des données en 3D
• Faire des simulations (sciences, techno, apprentissage)
• Créer de l’art numérique et du creative coding
• Réaliser des visites virtuelles (architecture, expo, musée)

Idée clé : en 3D, on ne fait pas que regarder… on peut explorer et manipuler.

3. Les bases de la 3D

Quelques idées simples pour comprendre comment “fonctionne” la 3D :

• Se repérer dans l’espace avec x, y, z
• Comprendre la caméra et la perspective(plus c’est loin, plus ça paraît petit)
• Jouer avec l’échelle et les indices de profondeur
• Utiliser une boucle d’animation (temps + rafraîchissement des images)

Dans cet exercice : Reveal.js contrôle les slides, et Three.js fait vivre la 3D en arrière-plan.

4. Interagir avec une scène 3D

La 3D devient intéressante quand on peut interagir. Explorez la scène en 3D avec la souris (ou le doigt). Testez :

• Tourner autour : cliquer-glisser / toucher pour pivoter la vue
• Zoomer : molette / pincement
• Survoler : l’objet sous le curseur peut se mettre en évidence

La 3D sur le web, ce n’est pas juste une animation, c’est un espace qu’on explore.

5. Importer un modèle 3D (glTF)

On n’a pas toujours besoin de tout modéliser soi-même. Avec Three.js, on peut importer un modèle 3D (un asset) depuis des plateformes comme Sketchfab, puis l’intégrer dans une scène (lumière, décor, interactions…).

Tournez autour (cliquer-glisser) et zoomez (molette / pincement).

Important : si vous utilisez des ressources créées par d’autres (modèles, textures, sons…), pensez à créditer l’auteur et à vérifier la licence. Les licences Creative Commons indiquent clairement ce que vous avez le droit de faire (utilisation, modification, partage, usage commercial, etc.).

Ce travail est basé sur « Floating Fox » (lien du modèle) de Prinavu, sous licence CC BY 4.0.

6. Simuler la lumière (ambiance)

La lumière change tout : elle crée une ambiance et aide à comprendre les formes.

Essayez :

• K/I : changer la distance de la lumière
• ↑/↓ : augmenter / diminuer l’intensité
• C : changer la “température” (plus chaude / plus froide)

Comme en photo ou au cinéma : la lumière peut aussi raconter une histoire.

7. Architecture : vivre “dans” un espace

Ici, la caméra est placée à l’intérieur d’une structure, comme si vous étiez dans un couloir architectural.

• Explorer l’espace avec la caméra (impression immersive)
• Observer le rythme et la répétition des formes

Astuce : regardez autour avec la souris, comme si vous étiez dans un bâtiment.

8. Apprendre les formes en 3D : structure géodésique

Les structures géodésiques permettent de construire des dômes architecturaux, des halls d’exposition ou des abris. Composées de nombreux triangles, elles offrent une grande résistance tout en restant légères. Essayez au clavier, testez l’interactivité pour explorer la structure géodésique.
Mini-mission au clavier : appuie sur A, puis sur D, et enfin surH . Que remarques-tu ?

9. Animation 3D : un personnage “vivant”

Un personnage 3D peut bouger grâce à : un squelette (bones) qui déforme le corps (skinning) et des expressions du visage (morph targets). Cet exemple montre un robot qui boucle dans l’un de plusieurs états d’animation de base. Essayez au clavier :

Modèle RobotExpressive par Tomás Laulhé (Quaternius), modifications par Don McCurdy (CC0).

10. Aller plus loin : lumière & ambiance

En 3D, la lumière n’est pas seulement technique, c’est un langage visuel. Comme au cinéma, elle guide le regard, crée du contraste et transmet une émotion.

Cette présentation s’appuie sur l’exemple « webgl – animation – keyframes » de three.js, basé sur le modèle Littlest Tokyo de Glen Fox (licence CC BY 4.0).