Ajouter un objet maillé à la scène

Introduction

Cette leçon est consacrée à l'un des concepts les plus fondamentaux de Three.js. L'objectif est de vous apprendre à ajouter un objet (Mesh) à la scène en combinant une géométrie et un matériau.

Nous allons décortiquer la "recette" pour créer n'importe quel objet visible dans votre scène. Vous découvrirez que chaque objet est le résultat de l'association d'une forme (sa Geometry) et de son apparence (son Material). À la fin de cette leçon, vous saurez créer des objets 3D simples et les ajouter à votre monde virtuel.

1. La Recette d'un Objet 3D : Le Mesh

En 3D, un objet visible est appelé un Mesh (maillage en français). Un Mesh est toujours la combinaison de deux éléments indissociables :

1. Une Geometry (Géométrie) : C'est le squelette de l'objet, l'ensemble des points (sommets ou vertices) et des faces qui définissent sa forme. Est-ce un cube ? Une sphère ? Un personnage complexe ? C'est la géométrie qui le détermine.
2. Un Material (Matériau) : C'est la "peau" ou la "peinture" qui recouvre la géométrie. Le matériau définit l'apparence de surface de l'objet : sa couleur, sa texture, s'il est brillant, transparent, métallique, etc.

L'image suivante illustre parfaitement cette idée :

Cette équation, Mesh = Geometry + Material, est la pierre angulaire de la création d'objets dans Three.js. Gardez-la en tête.

Pour comprendre ce concept en action, nous allons suivre le processus de création d'un cube, étape par étape.

2. Créer un Objet : de la Théorie à la Pratique

La vidéo suivante, issue de la chaîne Grafikart.fr, explique très clairement comment créer un Mesh en pratique. Elle résume tout le processus que nous allons détailler.

Maintenant, décomposons ce processus en code.

Étape 1 : Définir la Géométrie

Three.js nous facilite la vie en fournissant une série de géométries "primitives" prêtes à l'emploi. Pour notre premier objet, nous allons utiliser une BoxGeometry, qui, comme son nom l'indique, génère un parallélépipède rectangle.

Le code pour créer une géométrie de boîte est simple :

// Les arguments sont : largeur, hauteur, profondeur
const geometry = new THREE.BoxGeometry(1, 1, 1);

Ici, nous créons une boîte qui forme un cube parfait d'une unité de côté.

Étape 2 : Définir le Matériau

Ensuite, il nous faut son apparence. Il existe de nombreux types de matériaux dans Three.js, des plus simples aux plus complexes qui simulent des réactions physiques à la lumière. Pour commencer, nous utiliserons le plus basique : MeshBasicMaterial.

Ce matériau applique une couleur unie à l'objet, sans être affecté par les lumières de la scène. C'est parfait pour débuter et vérifier que notre objet s'affiche correctement.

// On passe les propriétés du matériau dans un objet de configuration
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Couleur rouge

Ici, nous créons un matériau d'un rouge vif. La couleur est définie en hexadécimal, un format que vous connaissez bien en tant que développeur web. Pour plus d'informations sur les formats de couleur, la ressource suivante est très utile.

Étape 3 : Créer le Mesh et l'ajouter à la Scène

Maintenant que nous avons notre Geometry et notre Material, il ne reste plus qu'à les assembler pour former notre Mesh.

// On passe la géométrie et le matériau au constructeur du Mesh
const cube = new THREE.Mesh(geometry, material);

Notre objet cube est prêt ! La dernière étape consiste à l'ajouter à notre scène pour qu'il devienne visible.

// Ajoute le cube à la scène, à l'origine (0, 0, 0)
scene.add(cube);

L'article suivant de MDN Web Docs récapitule ces trois étapes de manière très structurée. C'est une excellente lecture pour renforcer votre compréhension.

3. Application Pratique

Mettons tout cela en pratique dans notre code. Reprenez le fichier main.js de la leçon précédente et mettons-le à jour. Le code ci-dessous est presque identique, mais la section de création du cube est maintenant correctement structurée et commentée selon ce que nous venons d'apprendre.

import * as THREE from 'three';

// 1. Le Moteur de Rendu (Renderer)
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

// 3. La Caméra
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.z = 5;

// --- CONTENU DE LA LEÇON D'AUJOURD'HUI ---

// Étape 1 : Créer la forme (Géométrie)
const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); // Un cube un peu plus grand

// Étape 2 : Créer l'apparence (Matériau)
const material = new THREE.MeshBasicMaterial({ color: 0x0095dd }); // Une couleur bleue

// Étape 3 : Assembler la forme et l'apparence (Mesh)
const cube = new THREE.Mesh(geometry, material);

// Étape 4 : Ajouter le Mesh à la scène
scene.add(cube);

// On peut toujours appliquer les transformations vues précédemment
cube.position.set(-2, 0, 0);
cube.rotation.y = Math.PI / 6; // Petite rotation sur Y

// ------------------------------------------

// Rendu de la scène
renderer.render(scene, camera);

// Gérer le redimensionnement
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.render(scene, camera);
});

Exercice :
Pour vérifier votre compréhension, essayez d'ajouter un deuxième objet à la scène. Par exemple, une sphère verte à droite du cube. Voici les classes dont vous aurez besoin :

• THREE.SphereGeometry(radius)
• THREE.MeshBasicMaterial({ color: 'green' })

Ajoutez le code nécessaire juste après la création du cube, appliquez-lui une position pour qu'il ne chevauche pas le cube, et voyez le résultat !

Conclusion

Vous venez de maîtriser une étape cruciale. Vous n'ajoutez plus des "boîtes noires" à votre scène, vous comprenez la recette fondamentale pour construire n'importe quel objet visible.

Points clés à retenir :

• Un objet 3D visible est un Mesh.
• La recette est simple : Mesh = Geometry + Material.
• La Geometry définit la forme de l'objet (ex: BoxGeometry, SphereGeometry).
• Le Material définit l'apparence de l'objet (ex: MeshBasicMaterial pour une couleur simple).
• On ajoute un Mesh à la scène avec la méthode scene.add().

Aperçu de la prochaine leçon :
Actuellement, notre scène est statique. C'est une photographie 3D. Pour donner vie à nos créations, il faut du mouvement. Dans la prochaine leçon, nous allons implémenter la boucle d'animation avec requestAnimationFrame. Cela nous permettra de mettre à jour et de redessiner la scène des dizaines de fois par seconde, créant ainsi des animations fluides.