Scène statique : assemblage d'objets variés

1. Qu'est-ce que la composition de scène ?

La composition de scène, c'est l'art d'arranger différents éléments dans un espace 3D pour créer une image cohérente et intentionnelle. Pensez à un photographe qui arrange des objets pour une nature morte ou à un architecte d'intérieur qui place des meubles dans une pièce.

Une scène bien composée repose sur trois piliers :

1. Variété des objets : Utiliser un assortiment de géométries différentes (Sphere, Box, Plane, Torus, etc.) pour créer un intérêt visuel.
2. Variété des apparences : Appliquer des matériaux distincts à chaque objet pour simuler des surfaces différentes (métal, plastique, sol, etc.).
3. Arrangement spatial : Placer et orienter les objets les uns par rapport aux autres en utilisant les transformations position, rotation, et scale que nous avons vues au début du cours.

L'image ci-dessous illustre parfaitement ce concept. Il ne s'agit pas d'un seul objet, mais d'un assemblage de plusieurs éléments (un sol, un buste, des tables, des pots) pour former une scène complète.

2. Rappel des outils de composition

Pour assembler notre scène, nous allons réutiliser des concepts que vous connaissez déjà :

• Géométries Primitives : THREE.PlaneGeometry, THREE.SphereGeometry, THREE.BoxGeometry, THREE.TorusGeometry, etc. Elles sont nos formes de base.
• Matériaux : Principalement le THREE.MeshStandardMaterial, que nous configurerons avec les "recettes" que vous avez apprises (plastique brillant, métal brossé, etc.).
• Transformations : Les propriétés position, rotation, et scale de chaque Mesh nous permettent de les placer précisément dans la scène.

Si vous avez besoin de vous rafraîchir la mémoire sur la création d'objets ou sur les transformations, vous pouvez consulter le document "Objets et scène" de David Gayerie, qui détaille ces concepts.

3. Exercice pratique : Votre première nature morte

Mettons ces principes en pratique en construisant une scène simple, étape par étape. L'objectif est de créer une composition avec un sol, un objet principal et quelques objets secondaires.

Assurez-vous d'avoir un éclairage de base dans votre scène, sans quoi les matériaux PBR resteront noirs !

// Lumières essentielles pour les matériaux PBR
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(2, 3, 4); // Positionne la lumière pour éclairer la scène
scene.add(directionalLight);

Étape 1 : Créer le sol

Le sol ancre la scène et donne une surface de référence. Nous utiliserons une PlaneGeometry.

// Création du matériau pour le sol (aspect béton mat)
const floorMaterial = new THREE.MeshStandardMaterial({
    color: 0x808080,
    metalness: 0.0,
    roughness: 0.8
});

// Création du mesh pour le sol
const floor = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10),
    floorMaterial
);

// Pour que le plan soit horizontal, on le fait pivoter
floor.rotation.x = -Math.PI / 2; // Rotation de -90 degrés autour de l'axe X
floor.position.y = -1.5; // On le descend un peu pour que les objets posés à y=0 soient dessus
scene.add(floor);

Étape 2 : Ajouter l'objet principal

Plaçons un objet plus complexe au centre pour attirer le regard. Un TorusKnotGeometry est parfait pour cela.

// Matériau "or poli" de la leçon précédente
const goldMaterial = new THREE.MeshStandardMaterial({
    color: 0xffd700,
    metalness: 1.0,
    roughness: 0.2
});

// Création du mesh principal
const mainObject = new THREE.Mesh(
    new THREE.TorusKnotGeometry(0.7, 0.2, 100, 16),
    goldMaterial
);

// On le positionne au-dessus du sol
mainObject.position.y = -0.4;
scene.add(mainObject);

Étape 3 : Ajouter des objets de soutien

Pour équilibrer la composition, ajoutons quelques objets plus simples avec des matériaux différents.

// Géométrie de sphère qu'on pourra réutiliser
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);

// Matériau "plastique rouge brillant"
const redPlasticMaterial = new THREE.MeshStandardMaterial({
    color: 0xff0000,
    metalness: 0.0,
    roughness: 0.1
});

const sphere1 = new THREE.Mesh(sphereGeometry, redPlasticMaterial);
sphere1.position.set(-2, -1, 0.5); // Position x, y, z
scene.add(sphere1);

// Matériau "caoutchouc mat"
const rubberMaterial = new THREE.MeshStandardMaterial({
    color: 0x111111,
    metalness: 0.0,
    roughness: 0.9
});

const sphere2 = new THREE.Mesh(sphereGeometry, rubberMaterial);
// On change un peu la taille de cette sphère pour plus de variété
sphere2.scale.set(0.6, 0.6, 0.6);
sphere2.position.set(1.5, -1.2, -0.8);
scene.add(sphere2);

Lancez votre projet. Vous devriez voir une scène composée de plusieurs objets distincts. Utilisez vos OrbitControls pour tourner autour et observer comment les différents matériaux interagissent avec la lumière. N'hésitez pas à modifier les positions, les échelles et les couleurs pour créer votre propre composition !

4. Étude de cas : Composer un système planétaire

L'exercice que nous venons de faire est une excellente base. Pour aller plus loin et voir un exemple de composition plus thématique, la ressource suivante contient une série d'exercices qui vous guident dans la création d'un mini-système solaire.

Conclusion

Félicitations ! Vous avez fait un grand pas en passant de la création d'objets individuels à la composition de scènes entières. Vous savez maintenant comment agencer plusieurs objets, chacun avec sa forme et son apparence propres, pour créer un ensemble visuellement riche et cohérent.

Points clés à retenir :

• Composer une scène, c'est assembler des Mesh (géométrie + matériau) de manière intentionnelle.
• La variété des formes, des matériaux et des transformations (position, rotation, scale) est la clé d'une scène intéressante.
• Commencez par un élément de base (comme un sol) pour ancrer votre scène.
• L'éclairage est indispensable pour révéler les propriétés des matériaux PBR et donner vie à la composition.

Aperçu de la prochaine leçon :
Maintenant que nos scènes sont peuplées d'objets, il est temps de les mettre en valeur. Dans le prochain module, nous plongerons dans le monde de l'éclairage et des ombres. Vous apprendrez à ajouter différents types de lumières pour créer des ambiances variées et, surtout, à faire en sorte que vos objets projettent des ombres réalistes les uns sur les autres, ajoutant une profondeur et un réalisme spectaculaires à vos créations. Le sol que nous avons créé aujourd'hui sera la surface parfaite pour recevoir ces ombres