Apprendre Three.js 1

Créez votre premier univers 3D en cinq minutes avec Three.js ! La 3D sur le Web vous fascine, mais vous ne savez pas par où commencer ? Three.js est la solution idéale : une bibliothèque JavaScript simple et puissante qui transforme vos idées en expériences immersives, même si vous débutez.

Aujourd'hui, passons à l'action : en quelques lignes de code, nous allons créer une scène 3D avec un cube flottant dans l'espace. Pas de théorie interminable, juste du concret.

Ce que vous allez apprendre :

initialiser une scène 3D avec Three.js
ajouter un cube et le faire flotter
afficher le tout dans votre navigateur

Prêt à coder ? C’est parti, on y va étape par étape ! Si vous voulez voir ce que vous allez obtenir c'est ici (j'ai ajouté la possibilité de faire varier certains paramètres avec lil-gui, un outil standard utilisé par les développeurs Three.js pour "debugger" leurs scènes).

Installation : simple, rapide et sans prise de tête

Pas de configurations interminables, pas de dépendances compliquées. Avec Three.js, un seul fichier HTML suffit pour démarrer. Il suffit d'utiliser un CDN pour importer la bibliothèque en une ligne. Créez un fichier index.html et copiez-collez le code de base suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon premier univers 3D</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; width: 100%; height: 100%; }
    </style>
</head>
<body>
<script type="module">
    import * as THREE from 'https://unpkg.com/three@0.183.2/build/three.module.js';

    // Votre code ira ici

</script>
</body>
</html>

Le « grand trio » de la 3D : Scène, Caméra, Rendu

Pour afficher de la 3D avec Three.js, trois éléments fondamentaux sont nécessaires, à l'instar des piliers d'un film :

Élément	Rôle	Analogie cinématographique
Scène	Conteneur où sont placés tous vos objets, lumières et éléments 3D.	Le plateau de tournage.
Caméra	Définit le point de vue : d’où et comment on observe la scène.	L’objectif de la caméra du réalisateur.
Moteur de rendu	Transforme la scène et la caméra en une image affichée à l’écran.	Le projecteur qui diffuse le film

sans scène, il n’y a rien à afficher
sans caméra, on ne sait pas d’où regarder
sans moteur de rendu, la scène reste invisible

Prenons un exemple concret avec Three.js :

const scene = new THREE.Scene();       // Votre plateau
const camera = new THREE.PerspectiveCamera(); // Votre objectif
const renderer = new THREE.WebGLRenderer();   // Votre projecteur

Initialisation de la scène et de la caméra

Objectif : créer l’espace 3D et définir le point de vue.

// 1. La Scène : le conteneur principal pour tous vos objets 3D
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111); // Fond sombre pour un meilleur contraste

// 2. La Caméra : définit ce que l'utilisateur voit
const camera = new THREE.PerspectiveCamera(
    75, // Champ de vision (en degrés)
    window.innerWidth / window.innerHeight, // Ratio d'aspect (adapté à la fenêtre)
    0.1, // Distance minimale de rendu
    1000 // Distance maximale de rendu
);
camera.position.z = 5; // On recule la caméra pour voir l'objet

Un champ de vision de 75° offre un bon équilibre entre immersion et distorsion
Le ratio d’aspect s’adapte automatiquement à la taille de la fenêtre
La position z=5 permet de voir le cube sans le couper

Configuration du moteur de rendu (renderer)

Objectif : transformer la scène en image visible à l’écran.

// 3. Le Renderer : convertit la scène en pixels
const renderer = new THREE.WebGLRenderer({ antialias: true }); // Active l'antialiasing pour des bords lisses
renderer.setSize(window.innerWidth, window.innerHeight); // Taille du rendu = taille de la fenêtre
renderer.setPixelRatio(window.devicePixelRatio); // Adaptation à la densité de pixels de l'écran
document.body.appendChild(renderer.domElement); // Intègre le canvas au DOM

Sans le rendu, votre scène n'existe que dans la mémoire de l'ordinateur : c'est lui qui fait le lien entre le monde virtuel et votre écran. L’option antialias : true améliore la qualité visuelle en lissant les bords des objets.

Ajout d’un objet 3D (le cube)

Objectif : créer un objet visible dans la scène.

// 4. Le Cube : un objet 3D = une forme (Geometry) + un matériau (Material)
const geometry = new THREE.BoxGeometry(1, 1, 1); // Cube de 1x1x1 unité
const material = new THREE.MeshBasicMaterial({
    color: 0x008800, // Vert
    wireframe: false // Désactive le mode "fil de fer" (optionnel)
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // Ajoute le cube à la scène

BoxGeometry : définit la forme du cube (1 unité de côté)
MeshBasicMaterial : applique une couleur uniforme (ici, le vert)
wireframe : false : affiche le cube en entier (et non en squelette)

Animation du cube

Pour donner vie à votre cube, ajoutez cette boucle d'animation :

// 5. Animation : fait tourner le cube en continu
function animate() {
    requestAnimationFrame(animate); // Boucle l'animation
    cube.rotation.x += 0.01; // Rotation sur l'axe X
    cube.rotation.y += 0.01; // Rotation sur l'axe Y
    renderer.render(scene, camera); // Met à jour l'affichage
}
animate(); // Lance l'animation

Résumé visuel des étapes

Étape	Code clé	Rôle
Scène	`const scene = new THREE.Scene();`	Conteneur pour tous les objets.
Caméra	`new THREE.PerspectiveCamera(...)`	Définit le point de vue.
Renderer	`new THREE.WebGLRenderer({ antialias: true })`	Affiche la scène à l’écran.
Cube	`new THREE.Mesh(geometry, material)`	Objet 3D visible.
Animation	`requestAnimationFrame(animate)`	Donne du mouvement à la scène.

Bonne pratique : CDN ou installation en production

Pour ce tutoriel, nous utilisons un CDN (Unpkg) pour importer Three.js :

import * as THREE from 'https://unpkg.com/three@0.183.2/build/three.module.js' ;

C'est idéal pour les tests : simple, rapide, pas d'installation nécessaire. Mais en production, privilégiez une installation locale pour :

éviter les dépendances externes (risque de latence ou de blocage si le CDN est indisponible)
contrôler la version avec précision (via npm ou un bundle statique)
optimiser les performances (fichiers minifiés, tree-shaking)

Pour plus d'informations le manuel officiel est très bien fait et vous pourrez y trouver en détail l'installation avec npm.

Félicitations, vous êtes désormais un créateur 3D !

En quelques lignes de code, vous avez :

construit un univers 3D complet avec une scène, une caméra et un rendu
ajouté un objet animé (votre cube vert) et lui avoir donné vie
compris les bases de la manipulation d'une scène interactive

Petit défi pour aller plus loin : modifiez la valeur de camera.position.z (par exemple, passez de 5 à 2 ou 10). Que constatez-vous ?

à 2, le cube semble plus gros (la caméra est plus proche)
à 10, il paraît minuscule (la caméra s'éloigne)

C'est ça, la magie de la 3D : vous contrôlez le point de vue de votre spectateur ! Et ce n'est qu'un début…

Dans les prochains articles, nous passerons à l’étape supérieure :

ajouter des lumières et des ombres pour un rendu ultra-réaliste
charger des textures pour personnaliser vos objets
créer des interactions (clics, déplacements) pour une expérience immersive

Vous êtes prêt à continuer l’aventure ? Votre univers 3D n’attend que vous.