Three.js – "Hello Cube"

Dans le dernier article, nous avons mis en place l'environnement de travail pour utiliser Three.js. Maintenant, passons à la création d'une première scène 3D avec un cube animé.

Prérequis

Avant de commencer, assurez-vous d’avoir configuré votre environnement de développement. Si ce n’est pas encore fait, consultez ce dernier blog. Vous aurez besoin d’un projet structuré avec un fichier index.html et un fichier main.js. Vous pouvez utiliser un serveur local ou un CDN pour importer Three.js.

Mise en place de la scène

Pour afficher une scène en Three.js, nous avons besoin de trois éléments essentiels :

1. Une scène qui contiendra tous les objets 3D.

2. Une caméra qui définira la perspective et la vision de l'utilisateur.

3. Un rendu qui affichera la scène sur la page web.

• La scène est l’endroit où nous ajoutons tous nos objets.

• La caméra définit la manière dont nous allons voir cette scène.

• Le moteur de rendu (renderer) est ce qui transforme les objets 3D en images visibles à l’écran.

Commençons par modifier notre fichier main.js :

import * as THREE from 'three';

// Création de la scène
const scene = new THREE.Scene();

// Création de la caméra avec un champ de vision de 75 degrés,
// un ratio largeur/hauteur basé sur la taille de l'écran,
// et des plans de découpage définissant la distance de rendu.
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Création du moteur de rendu et définition de sa taille
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Ajout d'un cube

Un cube est une forme géométrique composée de sommets (points) et de faces (surfaces). Pour le créer, nous avons besoin :

• D’une géométrie (THREE.BoxGeometry) qui définit la forme du cube.

• D’un matériau (THREE.MeshBasicMaterial) qui détermine son apparence (couleur, texture, etc.).

• D’un maillage (Mesh) qui combine la géométrie et le matériau pour créer un objet visible dans la scène.

// Création de la géométrie du cube (dimensions 1x1x1)
const geometry = new THREE.BoxGeometry(1, 1, 1);

// Création du matériau du cube avec une couleur rouge
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// Création du maillage combinant la géométrie et le matériau
const cube = new THREE.Mesh(geometry, material);

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

// Positionnement de la caméra pour voir le cube
camera.position.z = 5;

Animation du cube

Si nous ne faisons rien d’autre, le cube restera statique. Pour l’animer :

• Nous créons une fonction appelée animate(), qui est exécutée à chaque frame (environ 60 fois par seconde).

• Dans cette fonction, nous modifions la rotation du cube petit à petit.

• Enfin, nous demandons au moteur de rendu d’afficher à nouveau la scène mise à jour.

// Fonction d'animation
function animate() {
    // Rotation du cube autour de l'axe X et Y
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    // Rendu de la scène avec la caméra
    renderer.render(scene, camera);
}

// Démarrage de la boucle d'animation
renderer.setAnimationLoop(animate);

Résultat et améliorations possibles

Après avoir écrit et exécuté ce code, nous obtenons un cube rouge en rotation. Vous pouvez modifier sa couleur, changer la vitesse de rotation ou ajouter d’autres objets pour explorer davantage Three.js.

Dans le prochain article, nous verrons comment ajouter de la lumière et interagir avec la scène !

Défis pour aller plus loin

• Changez la couleur du cube pour une autre couleur de votre choix.

• Modifiez la vitesse de rotation du cube.

• Ajoutez une autre forme, comme une sphère ou un cylindre.

• Expérimentez avec d'autres types de matériaux pour voir comment ils affectent l'apparence de votre cube.

Sources

Documentation officielle de Three.js threejs.org (Page consultée le 22 février 2025).

Tutoriel d'animation d'un cube en 3D avec Three.js dev.to (Page consultée le 22 février 2025).