"Coordonnées 3D et Transformations de Base"

Introduction

Aujourd'hui, nous allons donner vie à cet espace en y plaçant notre premier objet et en apprenant à le manipuler. L'objectif de cette leçon est de comprendre le système de coordonnées 3D et d'appliquer les transformations de base (position, rotation, échelle).

Nous commencerons par visualiser le système de coordonnées pour bien nous repérer. Ensuite, nous créerons un objet simple et explorerons comment modifier sa place, son orientation et sa taille dans notre scène. À la fin de cette leçon, vous saurez positionner n'importe quel objet dans votre univers 3D.

1. Se Repérer dans l'Espace : Le Système de Coordonnées 3D

En développement web 2D, vous êtes habitué à un système à deux axes : X (horizontal) et Y (vertical). En 3D, nous ajoutons un troisième axe, Z, pour représenter la profondeur.

Three.js utilise un système de coordonnées droit. C'est une convention importante à mémoriser :

• L'axe X positif va vers la droite.
• L'axe Y positif va vers le haut.
• L'axe Z positif sort de l'écran, vers vous.

Pour nous aider à visualiser ce système directement dans notre scène, Three.js fournit un outil très pratique : AxesHelper.

Modifions notre fichier main.js pour l'inclure. Reprenez le code de la leçon précédente et ajoutez ces lignes juste après l'initialisation de la scène :

// ... code du renderer, de la scène et de la caméra ...

// Aide visuelle pour les axes
const axesHelper = new THREE.AxesHelper(3); // Le chiffre 3 définit la longueur des axes
scene.add(axesHelper);

// ...
renderer.render(scene, camera);

Si vous actualisez votre navigateur, vous devriez maintenant voir les trois axes colorés au centre de votre scène (le point d'origine, où X, Y et Z valent 0). Cela vous servira de point de repère constant.

2. Manipuler les Objets : Position, Rotation et Échelle

Avant de pouvoir manipuler un objet, nous devons en créer un. Pour l'instant, nous allons créer un simple cube. Ne vous préoccupez pas des détails de BoxGeometry ou MeshBasicMaterial ; nous les étudierons en profondeur dans un prochain module.

Ajoutez ce code juste avant votre AxesHelper :

// Création d'un objet visible (un cube rouge)
const geometry = new THREE.BoxGeometry(1, 1, 1); // Une boîte de 1x1x1 unité
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Un matériau rouge simple
const cube = new THREE.Mesh(geometry, material);

// Ajout du cube à la scène
scene.add(cube);

Dans Three.js, tous les objets que l'on peut placer dans une scène (comme notre cube, mais aussi la camera ou les lumières) héritent d'une classe de base appelée Object3D. C'est cette classe qui leur fournit trois propriétés essentielles pour les transformer : position, rotation, et scale.

Pour une référence rapide sur les propriétés de Object3D, vous pouvez consulter la documentation suivante.

Explorons maintenant ces trois transformations en pratique.

a) La Position

La propriété .position contrôle l'emplacement de l'objet dans la scène. C'est un Vector3, un objet avec trois composantes : x, y, et z. Par défaut, tout objet est créé à la position (0, 0, 0), le centre de notre monde.

Pour déplacer notre cube, vous pouvez modifier ses coordonnées une par une :

// Déplace le cube de 1.5 unité vers la droite
cube.position.x = 1.5;

// Le descend de 0.5 unité
cube.position.y = -0.5;

Ou, de manière plus concise, avec la méthode .set() :

// Positionne le cube aux coordonnées (1.5, -0.5, -2)
cube.position.set(1.5, -0.5, -2);

Expérimentez ! Changez ces valeurs dans votre code et observez comment le cube se déplace par rapport aux axes que nous avons ajoutés.

b) La Rotation

La propriété .rotation contrôle l'orientation de l'objet. Comme pour la position, elle possède des composantes x, y, et z.

Attention : Les rotations dans Three.js s'expriment en radians, et non en degrés.
Pour convertir des degrés en radians, utilisez la formule : radians = degrés * Math.PI / 180.

Par exemple, pour faire pivoter notre cube de 45 degrés autour de l'axe Y :

// Rotation de 45 degrés autour de l'axe Y
cube.rotation.y = Math.PI / 4; // PI correspond à 180 degrés

// Rotation de 90 degrés autour de l'axe X
cube.rotation.x = Math.PI / 2;

Comme pour la position, vous pouvez utiliser la méthode .set() en fournissant les rotations pour les trois axes en radians.

c) L'Échelle (Scale)

La propriété .scale contrôle la taille de l'objet. C'est également un Vector3 (x, y, z).
Par défaut, l'échelle est de (1, 1, 1), ce qui correspond à la taille originale de l'objet.

• Une valeur supérieure à 1 agrandit l'objet sur cet axe.
• Une valeur inférieure à 1 le rétrécit sur cet axe.

// Double la taille du cube uniformément sur tous les axes
cube.scale.set(2, 2, 2);

Vous pouvez aussi appliquer une échelle non uniforme pour déformer l'objet.

// Rend le cube deux fois plus large, mais deux fois moins haut
cube.scale.set(2, 0.5, 1);

L'image ci-dessous illustre parfaitement ce concept.

3. Appliquons nos connaissances

Voyons un exemple complet. Remplacez le contenu de votre fichier main.js par ce code. Il rassemble tout ce que nous avons vu : la configuration de la scène, l'ajout d'un cube et d'un repère, et l'application des trois transformations.

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
);
// On recule la caméra pour bien voir la scène
camera.position.z = 5; 

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

// Ajout d'un cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Rouge
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Ajout d'un repère visuel (AxesHelper)
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

// Appliquons quelques transformations au cube
// Position
cube.position.set(1, 1, 0);

// Rotation (45 degrés sur Y)
cube.rotation.set(0, Math.PI / 4, 0);

// Échelle (le rend 1.5 fois plus grand)
cube.scale.set(1.5, 1.5, 1.5);

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

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

// 5. Gérer le redimensionnement
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    // On refait un rendu après redimensionnement
    renderer.render(scene, camera); 
});

Note : J'ai ajouté un appel à renderer.render() dans la fonction de redimensionnement pour que la scène se redessine correctement.

Conclusion

Félicitations ! Vous maîtrisez maintenant les manipulations les plus fondamentales en 3D. Vous savez comment vous repérer dans l'espace et comment donner à n'importe quel objet une position, une orientation et une taille spécifiques.

Points clés à retenir :

• Three.js utilise un système de coordonnées droit : X (droite), Y (haut), Z (vers vous).
• L'AxesHelper est votre meilleur ami pour visualiser ce système.
• Tout objet hérite de Object3D et possède les propriétés :
  • .position pour le déplacer (Vector3).
  • .rotation pour l'orienter (en radians).
  • .scale pour changer sa taille (Vector3).
• La méthode .set(x, y, z) est un raccourci pratique pour modifier ces trois propriétés.

Aperçu de la prochaine leçon :
Pour l'instant, notre scène est statique. Nous appliquons des transformations, puis nous faisons un "rendu" unique, comme une photographie. Mais la 3D sur le web est surtout puissante quand elle est animée ! Dans la prochaine leçon, nous allons mettre en place la boucle d'animation avec requestAnimationFrame pour faire bouger nos objets en temps réel.