Dans cette introduction à Three.js, vous allez créer de zéro votre première scène en trois dimensions qui tourne dans le navigateur. Quand on parle de 3D sur le web, la technologie sous-jacente est le WebGL ; mais travailler avec le WebGL brut, c'est se battre avec des centaines de lignes de shaders et de matrices. C'est précisément là que Three.js intervient et réduit ce même travail à quelques lignes lisibles.
Qu'est-ce que le WebGL ?
Le WebGL (Web Graphics Library) est une API graphique appelée depuis JavaScript qui donne au navigateur un accès direct à la carte graphique (GPU). Il repose sur le standard OpenGL ES et dessine des graphismes accélérés par le matériel sur un élément <canvas> sans aucun plugin. Cela signifie que les modèles 3D, les systèmes de particules et l'éclairage en temps réel ne sont plus réservés aux applications de bureau ; ils sont aussi possibles sur une page web.
Le hic, c'est que le WebGL est de très bas niveau. Pour dessiner ne serait-ce qu'un seul triangle, il faut écrire des vertex et fragment shaders, créer des buffers et calculer à la main les matrices de projection. Une couche d'abstraction est essentielle pour être productif, et Three.js fournit exactement cette couche.
Qu'est-ce que Three.js simplifie ?
Three.js est une bibliothèque JavaScript open source qui s'appuie sur le WebGL. Elle fonctionne selon un modèle de graphe de scène (scene graph) : au lieu de transformer vous-même chaque objet en shaders, vous raisonnez selon une hiérarchie logique. Elle vous offre d'emblée :
- Des géométries : des formes prêtes à l'emploi comme le cube, la sphère, le plan ou le cylindre.
- Des matériaux : des définitions de surface qui réagissent ou non à la lumière.
- Des lumières et des caméras : caméra en perspective, lumière directionnelle, lumière d'ambiance.
- Des chargeurs : des outils prêts pour les formats de modèles 3D comme
.glb/.gltf.
Trois concepts essentiels : scène, caméra, renderer
Au cœur de chaque application Three.js vivent trois objets. La scène (Scene) est le conteneur dans lequel on place tous les objets. La caméra (Camera) définit l'angle sous lequel on regarde la scène. Le renderer prend la scène du point de vue de la caméra et la dessine sur le canvas. Une fois ce trio en place, le squelette est prêt :
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, // champ de vision (degrés)
window.innerWidth / window.innerHeight, // rapport largeur/hauteur
0.1, // plan de coupe proche
1000 // plan de coupe lointain
);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);La PerspectiveCamera imite l'œil humain en faisant paraître plus petits les objets éloignés. Si l'on ne recule pas la caméra sur l'axe z, elle reste à l'intérieur de l'objet et l'on ne voit rien.
Créer le premier cube
Ajoutons maintenant un objet à la scène. Dans Three.js, un objet visible est généralement un Mesh ; un Mesh est la combinaison d'une géométrie (forme) et d'un matériau (surface).
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00aaff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);Le MeshBasicMaterial n'est pas affecté par la lumière ; il affiche toujours une couleur plate, ce qui le rend idéal pour les premiers essais. Quand vous passerez à l'éclairage, vous devrez utiliser MeshStandardMaterial et ajouter une DirectionalLight à la scène, sinon l'objet apparaîtra tout noir.
La boucle d'animation
Dessiner une seule image ne suffit pas ; pour une animation fluide, il faut rendre la scène à chaque rafraîchissement de l'écran. La bonne manière de le faire est d'utiliser requestAnimationFrame, car il reste synchronisé avec la fréquence de rafraîchissement de l'écran (généralement 60 FPS) et ralentit automatiquement quand l'onglet est en arrière-plan.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Quand cette boucle s'exécute, vous verrez le cube bleu tourner lentement sur deux axes. Félicitations, vous venez de mettre en place votre première scène 3D en temps réel dans le navigateur.
Adapter la taille de la fenêtre et étapes suivantes
Dans un vrai projet, vous devez mettre à jour la caméra et le renderer lorsque la fenêtre est redimensionnée, afin que l'image ne soit pas déformée :
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});À partir de là, les sujets à explorer incluent : faire pivoter la scène à la souris avec OrbitControls, charger des modèles 3D prêts à l'emploi avec GLTFLoader, ainsi que les ombres, les textures et les effets de post-traitement. Le squelette de base reste toujours le même ; seuls les objets que vous ajoutez à la scène s'enrichissent.
Questions fréquentes
Faut-il des maths avancées pour apprendre Three.js ?
Pas pour débuter. Comprendre la logique de la scène, de la caméra et du mesh suffit. Plus tard, quand vous voudrez écrire des shaders personnalisés ou des mouvements de caméra complexes, des notions de vecteurs et de trigonométrie aident, mais ce n'est pas indispensable pour vos premiers projets.
Puis-je ajouter Three.js à un projet React ?
Oui. La bibliothèque react-three-fiber vous permet d'écrire Three.js sous forme de composants React et gère le graphe de scène via l'arbre de composants. Comme la logique sous-jacente reste du pur Three.js, comprendre d'abord la bibliothèque brute est un grand avantage.
Pourquoi mon cube apparaît-il noir ?
Vous utilisez très probablement un matériau qui réagit à la lumière (comme MeshStandardMaterial) alors qu'il n'y a aucune lumière dans la scène. Ajoutez une lumière à la scène, ou passez à MeshBasicMaterial pour un test rapide.
Vous rêvez d'une expérience web en 3D ? Visualisations de produits interactives, scènes d'introduction animées ou portfolios basés sur le WebGL : nous pouvons y travailler ensemble. Contactez-moi et donnons vie à votre idée.