Bienvenue dans la sixiéme semaine de notre blogue sur Three.js! Avant de plonger dans l'ajout des ombres dynamiques, commençons par un petit rappel sur la manière de démarrer un projet Three.js et de créer une scène vide. Si tu nous rejoins pour la première fois ou si tu as besoin d'un rappel, voici comment initialiser un projet et une scène simple :
Rappel : Comment démarrer un projet Three.js et initialiser une scène vide
- Créer un nouveau fichier index.html et y inclure deux scripts. Le premier sera app.js, qui servira de fichier JavaScript dans lequel nous écrirons notre code Three.js, et le deuxième sera simplement le CDN pour inclure la bibliothèque Three.js.
Voici a quoi resemblera le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premier Projet Three.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
- Ensuite, ouvrez le fichier JavaScript que nous avons nommé app.js et insérez le code suivant pour créer une scène basique avec Three.js :
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Avec cette structure de base, nous sommes prêts à commencer la leçon d'aujourd'hui ! Les ombres sont un élément clé pour renforcer la profondeur et l'interaction des objets avec la lumière, ce qui rendra votre scène beaucoup plus réaliste.
Étape 1 : Activer les ombres dans le moteur de rendu
Pour que les ombres soient visibles dans ta scène, tu dois d'abord activer les ombres sur le moteur de rendu. Ajoutez le code suivant dans le fichier app.js :
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
L'option shadowMap.enabled = true permet à Three.js de calculer et de rendre les ombres. La ligne suivante, PCFSoftShadowMap, permet de lisser les ombres pour éviter qu'elles ne soient trop dures et pixélisées.
Étape 2 : Configurer les lumières pour qu'elles génèrent des ombres
Ensuite, il est important de configurer les lumières pour qu'elles puissent projeter des ombres. Par exemple, si tu utilises une lumière directionnelle (comme un soleil), tu peux activer l'ombre pour cette lumière avec la propriété castShadow.
Voici le code a ajouter :
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
scene.add(directionalLight);
Ici, nous avons ajouté une lumière directionnelle avec castShadow = true, ce qui permet à cette lumière de projeter des ombres. Nous ajustons également les paramètres de la caméra de l'ombre pour contrôler la qualité et la portée des ombres.
Si vous avez encore des difficultés avec les lumières directionnelles, n'hésitez pas à revenir sur le blog de la semaine 3 où nous avons abordé ce thème.
Étape 3 : Configurer les objets pour qu'ils reçoivent et projettent des ombres
Non seulement les lumières doivent être configurées pour projeter des ombres, mais les objets eux-mêmes doivent être configurés pour les projeter et les recevoir. Voici comment tu peux configurer ton cube pour qu'il interagisse avec les ombres :
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
Dans cet exemple, castShadow = true permet au cube de projeter des ombres sur d'autres objets, tandis que receiveShadow = true permet au cube de recevoir des ombres des autres objets.
Étape 4 : Ajouter un plan pour visualiser les ombres
Pour que les ombres soient visibles, il est souvent utile d'ajouter un plan sous les objets pour que les ombres puissent s'y projeter. Voici comment ajouter un plan qui recevra les ombres de notre cube et d'autres objets :
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1;
plane.receiveShadow = true;
scene.add(plane);
Avec ce code, nous créons un plan sous le cube qui est capable de recevoir des ombres, permettant ainsi de visualiser les ombres projetées par notre cube ou d'autres objets dans la scène.
Étape 5 : Résultat
Une fois que tu as activé les ombres dans le moteur de rendu, configuré tes lumières et objets, et ajouté un plan pour les recevoir, tu devrais voir des ombres dynamiques projetées dans ta scène. Les ombres changeront automatiquement en fonction de la position de la lumière et de la caméra, ce qui ajoutera un niveau supplémentaire de réalisme à ta scène 3D.
Prochaines étapes
Maintenant que tu sais comment ajouter des ombres dynamiques à ta scène, il est temps d'aller encore plus loin. La semaine prochaine, nous allons explorer l'animation des objets pour ajouter du mouvement à ta scène et rendre ton projet encore plus interactif !
Commentaires