"Configuration de Base : Scène, Caméra, Rendu"

Introduction

Aujourd'hui, nous allons dessiner les fondations de notre première scène. Pour qu'une image 3D apparaisse à l'écran, Three.js a besoin de trois éléments absolument essentiels. Cette leçon a pour but de vous apprendre à initialiser ces trois piliers : la Scène, la Caméra et le Moteur de Rendu (Renderer).

Nous aborderons d'abord ces concepts d'un point de vue théorique à l'aide d'une analogie simple, puis nous passerons à l'écriture du code dans le projet que vous avez déjà préparé. À la fin de cette leçon, vous aurez un espace 3D fonctionnel, même s'il est encore vide.

1. Comprendre les Trois Piliers : L'Analogie du Cinéma

Avant de coder, il est crucial de bien comprendre le rôle de chaque élément. L'analogie la plus simple est celle d'un réalisateur de film.

• La Scène (Scene) : C'est votre plateau de tournage, votre monde virtuel. C'est un conteneur dans lequel vous placerez tous vos objets (acteurs), vos lumières (projecteurs) et vos caméras.
• La Caméra (Camera) : C'est l'œil à travers lequel le monde est vu. Elle définit le point de vue, la perspective et ce qui est visible dans le "cadre". Sans caméra, même la scène la plus riche reste invisible.
• Le Moteur de Rendu (Renderer) : C'est l'équipe technique qui prend ce que la caméra filme et le projette sur un écran. Dans notre cas, il "dessine" la vue de la caméra dans un élément <canvas> de notre page HTML.

Pour approfondir cette analogie, je vous propose de lire cet article qui l'explique de manière très intuitive.

Voici un diagramme qui résume bien cette structure. Vous pouvez y voir comment le Renderer utilise une Scene et une Camera pour produire une image.

2. Mise en Place dans le Code

Maintenant que les concepts sont clairs, passons à la pratique. Ouvrez votre projet dans votre éditeur de code et concentrons-nous sur le fichier main.js, qui est actuellement vide. Nous allons y ajouter notre code, étape par étape.

D'abord, importons la bibliothèque Three.js au début de votre fichier main.js :

import * as THREE from 'three';

La vidéo suivante montre l'ensemble du processus que nous allons suivre. Vous pouvez la regarder en premier pour avoir une vue d'ensemble, puis suivre les étapes détaillées ci-dessous pour bien comprendre chaque ligne de code.

Étape 1 : Le Moteur de Rendu (Renderer)

Le Renderer est le lien entre Three.js et votre page web. Il va créer un élément <canvas> HTML et y dessiner votre scène.

L'article suivant de MDN (une référence pour les développeurs web) explique très bien comment l'initialiser.

Votre code dans main.js devrait maintenant ressembler à ceci :

import * as THREE from 'three';

// 1. Le Moteur de Rendu (Renderer)
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight); // Définit la taille du renderer à la taille de la fenêtre
renderer.setClearColor(0x111111, 1); // Définit une couleur de fond (ici, un gris très foncé)
document.body.appendChild(renderer.domElement); // Ajoute le canvas à la page

Note : antialias: true permet de lisser les bords des objets, ce qui améliore la qualité visuelle.

Étape 2 : La Scène (Scene)

La scène est l'objet le plus simple à créer. C'est le conteneur qui attendra nos futurs objets.

// 2. La Scène
const scene = new THREE.Scene();

Ajoutez cette ligne à la suite de votre code. C'est tout ! Nous avons maintenant un "monde" virtuel prêt à être peuplé.

Étape 3 : La Caméra (Camera)

Il existe plusieurs types de caméras. Pour un rendu 3D réaliste, on utilise presque toujours une PerspectiveCamera. Elle simule la façon dont l'œil humain perçoit la profondeur : les objets éloignés apparaissent plus petits que les objets proches.

La configuration de la caméra est l'étape la plus détaillée, car ses paramètres définissent entièrement notre "point de vue".

Voici le code que vous devriez avoir :

// ... code du renderer et de la scène ...

// 3. La Caméra
const camera = new THREE.PerspectiveCamera(
    75, // Champ de vision (Field of View, fov) en degrés
    window.innerWidth / window.innerHeight, // Rapport d'aspect (aspect ratio)
    0.1, // Plan de coupe proche (near clipping plane)
    1000 // Plan de coupe éloigné (far clipping plane)
);
camera.position.z = 5; // On recule la caméra de 5 unités sur l'axe Z

Pour aller plus loin, vous pouvez regarder ce court extrait qui mentionne une autre caméra importante, la OrthographicCamera, souvent utilisée pour des vues techniques ou des jeux 2D/isométriques.

Étape 4 : Le Premier Rendu

Nous avons maintenant nos trois piliers. Il ne reste plus qu'à dire au Renderer de prendre une "photo" de la Scene du point de vue de la Camera.

Ajoutez cette ligne à la toute fin de votre main.js :

renderer.render(scene, camera);

Si vous regardez votre navigateur (assurez-vous que votre serveur npm run dev est toujours lancé), vous devriez voir une page entièrement noire (ou de la couleur que vous avez définie avec setClearColor). C'est un succès ! Vous contemplez un espace 3D vide, rendu par Three.js.

3. Gérer le Redimensionnement de la Fenêtre

Actuellement, si vous redimensionnez la fenêtre de votre navigateur, le rendu sera déformé. Un bon projet 3D doit s'adapter. Pour cela, nous devons écouter l'événement resize de la fenêtre et mettre à jour la caméra et le renderer en conséquence.

Ajoutez ce bloc de code juste avant l'appel à renderer.render() :

// Gérer le redimensionnement de la fenêtre
window.addEventListener('resize', () => {
    // 1. Mettre à jour la taille du renderer
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 2. Mettre à jour le rapport d'aspect de la caméra
    camera.aspect = window.innerWidth / window.innerHeight;

    // 3. Mettre à jour la matrice de projection de la caméra
    // (Cette ligne est essentielle après avoir modifié les paramètres de la caméra)
    camera.updateProjectionMatrix();
    
    // (Nous ajouterons un appel à render ici dans la prochaine leçon)
});

Ce code assure que votre scène restera toujours bien proportionnée, quelle que soit la taille de la fenêtre.

Conclusion

Félicitations ! Vous avez assemblé les trois piliers de toute application Three.js. Même si le résultat visuel est minimaliste (une simple couleur de fond), le code que vous avez écrit est la base de toutes les expériences 3D que vous créerez.

Points clés à retenir :

• Une application Three.js nécessite au minimum une Scene, une Camera et un Renderer.
• La Scene est le conteneur pour tous les objets 3D.
• La PerspectiveCamera est la plus courante et simule la vision humaine. Ses paramètres (fov, aspect, near, far) définissent ce que l'on voit.
• Le WebGLRenderer dessine le résultat dans un élément <canvas> et l'ajoute à la page web.
• Il est essentiel de gérer le redimensionnement de la fenêtre pour que l'affichage reste correct.

Aperçu de la prochaine leçon :
Notre scène est prête, mais elle est vide. Dans la prochaine leçon, nous allons explorer le système de coordonnées 3D pour comprendre comment se repérer dans cet espace. Ensuite, nous apprendrons à appliquer des transformations de base (position, rotation, échelle), ce qui nous permettra enfin de placer et de manipuler notre premier objet