Three.js : créer des scènes 3D interactives dans le navigateur

Le web 3D n'est plus réservé aux jeux vidéo et aux grandes productions hollywoodiennes. Three.js a démocratisé la création d'expériences 3D immersives directement dans le navigateur, sans plugin, sans installation. En 2026, une landing page avec une scène Three.js se distingue immédiatement d'un site plat — elle capte l'attention, communique l'innovation et reste en mémoire. Ce guide couvre les fondamentaux de Three.js : scène, caméra, renderer, lumières, matériaux et animation — pour passer de zéro à une scène interactive en production.

L'architecture fondamentale : scène, caméra, renderer

Toute application Three.js repose sur trois composants indissociables. La scène(THREE.Scene) est le graphe de la scène : le conteneur hiérarchique qui rassemble tous les objets 3D, les lumières et les caméras. La caméra définit le point de vue :THREE.PerspectiveCamera pour les scènes réalistes (avec perspective), ouTHREE.OrthographicCamera pour les projections isométriques. Le renderer(THREE.WebGLRenderer) est le moteur : il traduit la scène 3D en pixels 2D via WebGL et dessine le résultat dans un élément <canvas>.

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f0020);

const camera = new THREE.PerspectiveCamera(
  75,                          // FOV en degrés
  window.innerWidth / window.innerHeight,  // aspect ratio
  0.1,                         // near clipping plane
  1000                         // far clipping plane
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

Le setPixelRatio limité à 2 est une optimisation critique : les écrans Retina à 3x ou 4x de densité de pixels rendraient 9x à 16x plus de fragments sans ce plafond, écrasant les performances sur mobile sans gain visuel perceptible au-delà de 2x.

Géométries, matériaux et meshes

Un objet 3D dans Three.js est un Mesh: la combinaison d'une géométrie (la forme) et d'un matériau (l'apparence). Three.js fournit une bibliothèque riche de géométries primitives (BoxGeometry, SphereGeometry, TorusKnotGeometry,PlaneGeometry...) et de matériaux avec différents modèles d'illumination.

// Géométrie
const geometry = new THREE.IcosahedronGeometry(1.5, 3);

// Matériau PBR (Physically Based Rendering)
const material = new THREE.MeshStandardMaterial({
  color: 0xC026D3,
  metalness: 0.3,
  roughness: 0.4,
  wireframe: false,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Le choix du matériau est crucial pour les performances. MeshBasicMaterialn'est pas affecté par les lumières — le plus rapide, idéal pour les UI ou les objets non éclairés.MeshStandardMaterial implémente le rendu PBR (physically-based rendering) avec metalness et roughness — le standard pour les objets réalistes, mais plus coûteux en fragments shader.ShaderMaterial donne un contrôle total via GLSL — nous y reviendrons dans notre guide sur les shaders GLSL.

Lumières : éclairer une scène réaliste

Sans lumière, un MeshStandardMaterial ou MeshPhongMaterial apparaît entièrement noir. Three.js propose plusieurs types de lumières, chacune avec son coût GPU :

• AmbientLight : lumière uniforme qui illumine tous les objets équitablement, sans direction ni ombre. Coût quasi nul. À utiliser comme lumière de remplissage pour éviter les zones entièrement noires.
• DirectionalLight: simule le soleil — une source infinie à distance, avec des rayons parallèles. Supporte les ombres portées. C'est la lumière principale dans la majorité des scènes.
• PointLight: source omnidirectionnelle depuis un point précis (ampoule, torche). Coût élevé, car le renderer doit calculer l'éclairage dans toutes les directions.
• SpotLight : cône de lumière avec ombre portée. Le plus coûteux — à utiliser avec parcimonie.

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xC026D3, 2);
dirLight.position.set(5, 5, 5);
dirLight.castShadow = true;
scene.add(dirLight);

La boucle d'animation

Three.js ne dessine pas automatiquement — c'est au développeur de demander un rendu à chaque frame. requestAnimationFramesynchronise la boucle avec le taux de rafraîchissement de l'écran (60 Hz, 120 Hz ou plus) et met automatiquement en pause quand l'onglet est en arrière-plan, économisant CPU et batterie.

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const elapsed = clock.getElapsedTime();

  // Rotation douce indépendante du framerate
  mesh.rotation.x = elapsed * 0.3;
  mesh.rotation.y = elapsed * 0.5;

  renderer.render(scene, camera);
}

animate();

L'usage du Clock pour les animations est une bonne pratique : il produit des animations dont la vitesse est indépendante du framerate. Sur un écran 120 Hz, la rotation sera deux fois moins visible par frame que sur un écran 60 Hz — mais la vitesse angulaire par seconde sera identique.

OrbitControls : navigation intuitive

OrbitControls (du package three/examples/jsm) ajoute en quelques lignes la navigation souris/tactile : clic + glisser pour orbiter, scroll pour zoomer, clic droit pour déplacer. C'est l'outil indispensable pour les scènes interactives et les configurateurs.

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;    // inertie fluide
controls.dampingFactor = 0.05;
controls.minDistance = 2;
controls.maxDistance = 20;

// Dans la boucle d'animation :
controls.update(); // nécessaire avec enableDamping

Intégration dans Next.js et React

Three.js s'intègre dans React via un hook et un useEffect qui crée la scène côté client. La directive 'use client' est indispensable — Three.js dépend dewindow et document, absents lors du SSR. Le nettoyage dans le return du useEffect (dispose de la géométrie, du matériau, du renderer) est critique pour éviter les memory leaks lors des Hot Module Replacements en développement.

Pour les scènes complexes, React Three Fiber (@react-three/fiber) est une surcouche React qui permet de décrire la scène Three.js en JSX, avec une intégration native au cycle de vie React et au système de hooks. Ses utilitaires (@react-three/drei) encapsulent OrbitControls, loaders de modèles GLTF, environnements HDR et post-processing en composants réutilisables — voir notre article sur les optimisations WebGL en production pour les patterns avancés.

“Un site web en 3D qui charge en 3 secondes et tourne à 60 fps vaut mieux qu'une scène époustouflante qui fait ramer le navigateur. La performance est une fonctionnalité.”

Three.js est aujourd'hui mature, bien documenté et supporté par un écosystème riche. Créer une première scène interactive prend quelques heures ; créer une expérience immersive mémorable — avec des shaders sur mesure, une optimisation GPU rigoureuse et une intégration React performante — demande une expertise que nous développons depuis Brive-la-Gaillarde pour des clients en Corrèze, en Nouvelle-Aquitaine et en France entière. Pour concevoir votre site web immersif, parlons de votre projet.