C’est quoi Three.js ?

Three.js est une bibliothèque JavaScript qui simplifie l’affichage de 3D dans le navigateur. Elle s’appuie sur WebGL (et WebGPU) et évite d’écrire soi-même les shaders et la gestion bas niveau.

Les trois briques de base

Tout projet Three.js repose sur trois éléments :

• une scène (Scene) qui contient les objets et les lumières ;
• une caméra (PerspectiveCamera) qui définit le point de vue ;
• un renderer (WebGLRenderer) qui dessine la scène dans un <canvas>.

Un objet visible (Mesh) associe une géométrie (la forme) et un matériau (l’aspect).

Exemple minimal

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
camera.position.z = 5;

const mesh = new THREE.Mesh(
	new THREE.TorusKnotGeometry(1, 0.32, 160, 24),
	new THREE.MeshStandardMaterial({ color: 0x7c8cff }),
);
scene.add(mesh, new THREE.DirectionalLight(0xffffff, 2));

function render() {
	requestAnimationFrame(render);
	mesh.rotation.y += 0.01;
	renderer.render(scene, camera);
}
render();

La démo

Voici le résultat : un nœud torique en rotation. Le bouton permet de passer en mode filaire pour voir le maillage.

Avec Astro

Three.js est lourd : pour garder le site rapide, charge-le avec un import() dynamique, uniquement quand le canvas est visible. C’est ce que fait cette démo.

À retenir

Avec une scène, une caméra et un renderer, on obtient de la 3D en quelques lignes. Pour aller plus loin : lumières, textures, modèles glTF et contrôles de caméra (OrbitControls).