Création de formes avec les géométries primitives Three.js

Introduction

Aujourd'hui, nous passons de la relation entre les objets à la création des objets eux-mêmes. L'objectif de cette leçon est d'apprendre à créer des formes variées à l'aide des géométries primitives de Three.js. Nous allons peupler nos scènes avec des boîtes, des sphères, des tores et d'autres formes de base qui sont les briques de construction de tout univers 3D.

Nous verrons que chaque objet visible dans Three.js, appelé un Mesh, est l'association d'une forme (une Geometry) et d'une apparence (un Material). Cette leçon se concentre sur la première partie : la géométrie.

1. Le trio fondamental : Géométrie, Matériau et Maillage (Mesh)

Vous l'avez déjà aperçu dans les exercices précédents, mais il est temps de le formaliser. Pour faire apparaître un objet à l'écran, vous avez toujours besoin de trois choses :

1. La Géométrie (Geometry) : C'est la structure de l'objet, sa forme en 3D. Elle est définie par un ensemble de sommets (les points dans l'espace) et de faces (les triangles qui relient ces points). Pensez-y comme au squelette ou à l'armature d'une sculpture.
2. Le Matériau (Material) : C'est l'apparence de l'objet. Il définit la couleur, la texture, la brillance, etc. C'est la peinture ou l'argile que vous appliquez sur le squelette. Pour l'instant, nous utiliserons le matériau le plus simple, MeshBasicMaterial, qui n'est pas affecté par les lumières.
3. Le Maillage (Mesh) : C'est l'objet final, l'association d'une géométrie et d'un matériau. C'est la sculpture terminée, prête à être ajoutée à la scène.

Le processus est toujours le même :

// 1. Créer la géométrie
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 2. Créer le matériau
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Vert

// 3. Créer le maillage
const cube = new THREE.Mesh(geometry, material);

// 4. L'ajouter à la scène
scene.add(cube);

Pour approfondir ce concept de base, je vous invite à lire les premières sections de ce guide de Mozilla Developer Network.

2. Exploration des géométries primitives

Three.js nous évite d'avoir à définir manuellement chaque sommet et chaque face pour des formes courantes. Il propose une bibliothèque de "géométries primitives" prêtes à l'emploi. Voyons les plus utiles.

La Boîte : BoxGeometry

C'est la plus simple. Vous l'avez déjà vue.
new THREE.BoxGeometry(width, height, depth)

• width: largeur (sur l'axe X)
• height: hauteur (sur l'axe Y)
• depth: profondeur (sur l'axe Z)

Le Plan : PlaneGeometry

Parfait pour créer des sols, des murs ou des surfaces planes.
new THREE.PlaneGeometry(width, height)

• width: largeur (sur l'axe X)
• height: hauteur (sur l'axe Y)

Par défaut, un plan est créé dans le plan XY. Pour en faire un sol, il faut généralement le faire pivoter de 90 degrés sur l'axe X : plane.rotation.x = -Math.PI / 2;.

La Sphère : SphereGeometry et la notion de "Segments"

Ici, les paramètres deviennent plus intéressants.
new THREE.SphereGeometry(radius, widthSegments, heightSegments)

• radius: le rayon de la sphère.
• widthSegments: le nombre de segments horizontaux (comme les méridiens d'une carte).
• heightSegments: le nombre de segments verticaux (comme les parallèles).

Les paramètres de segments sont cruciaux : ils définissent le niveau de détail de la forme. Un nombre faible de segments créera une sphère facettée et "low-poly", ce qui est performant mais peu réaliste. Un nombre élevé créera une sphère très lisse, mais plus coûteuse à calculer pour le processeur graphique.

C'est un arbitrage constant en 3D : qualité visuelle vs. performance.

Le Tore (Donut) : TorusGeometry

Une forme amusante avec plusieurs paramètres.
new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments)

• radius: le rayon du tore lui-même (du centre du trou au centre du tube).
• tube: le rayon du tube.
• radialSegments: le nombre de segments pour le "grand cercle" du tore.
• tubularSegments: le nombre de segments pour la section transversale du tube.

3. Créer une scène avec plusieurs formes

Maintenant que vous connaissez les briques, construisons quelque chose ! L'article suivant vous montre des exemples de code concis pour plusieurs de ces géométries.

4. Exercice pratique : Votre première composition

Mettons tout cela en pratique. Votre mission est de créer une scène simple composée d'un sol, d'une boîte, d'une sphère et d'un tore.

1. Initialisez votre projet comme vous l'avez appris (scène, caméra perspective, renderer, boucle animate). Positionnez votre caméra pour bien voir l'origine, par exemple : camera.position.set(5, 5, 10); camera.lookAt(0, 0, 0);. N'oubliez pas d'ajouter des contrôles (OrbitControls) pour pouvoir naviguer.

2. Créez un matériau commun que vous réutiliserez pour tous les objets pour commencer.

   const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x6495ED, wireframe: true }); // Bleu acier, en fil de fer pour bien voir la structure
   

3. Ajoutez les objets suivants à votre scène :

   • Un sol :

     • Utilisez PlaneGeometry avec une taille de 10x10.
     • Appliquez-lui le matériau.
     • Faites-lui une rotation de -90 degrés sur l'axe X pour qu'il soit horizontal.
     • Ajoutez-le à la scène.

   • Une boîte :

     • Utilisez BoxGeometry de taille 1x1x1.
     • Appliquez le matériau.
     • Positionnez-la à (-2, 0.5, 0) pour qu'elle repose sur le sol (sa hauteur est 1, donc son centre est à 0.5 au-dessus du sol).
     • Ajoutez-la à la scène.

   • Une sphère :

     • Utilisez SphereGeometry avec un rayon de 0.7. Choisissez un nombre de segments raisonnable (ex: 32x32).
     • Appliquez le matériau.
     • Positionnez-la à (0, 0.7, 0).
     • Ajoutez-la à la scène.

   • Un tore :

     • Utilisez TorusGeometry avec un rayon de 0.8, un tube de 0.3, et des segments (ex: 16, 100).
     • Appliquez le matériau.
     • Positionnez-le à (2.5, 1, 0). Vous pouvez aussi lui appliquer une petite rotation pour le rendre plus intéressant.
     • Ajoutez-le à la scène.

Prenez le temps d'expérimenter avec les paramètres de chaque géométrie et de voir comment cela affecte leur apparence. Le mode wireframe est parfait pour ça !

Conclusion

Excellent travail ! Vous savez maintenant comment créer la structure de base de n'importe quel objet 3D en utilisant les géométries primitives de Three.js.

Points clés à retenir :

• Un objet visible (Mesh) est une combinaison d'une forme (Geometry) et d'une apparence (Material).
• Three.js offre de nombreuses géométries primitives prêtes à l'emploi : BoxGeometry, PlaneGeometry, SphereGeometry, TorusGeometry, et bien d'autres.
• Les paramètres de segments (ex: widthSegments) contrôlent le niveau de détail d'une géométrie, impactant à la fois la qualité visuelle et la performance.
• La composition de scènes en assemblant et en transformant ces formes simples est une technique fondamentale en 3D.

Aperçu de la prochaine leçon :
Nous avons passé cette leçon à créer des formes avec un matériau très basique. Mais que se passe-t-il si nous voulons des objets qui réagissent à la lumière, qui ont l'air métalliques ou rugueux ? Dans la prochaine leçon, nous nous plongerons dans le monde des matériaux, en différenciant les matériaux simples comme MeshBasicMaterial des matériaux physiquement réalistes (PBR) qui permettent des rendus beaucoup plus convaincants.