Three.js – Lumière et Intéraction

Dans notre dernier article, nous avons créé une scène simple avec un cube en rotation. Maintenant, nous allons améliorer notre scène en ajoutant de la lumière et des interactions utilisateur.

Ajout de la lumière

Three.js propose plusieurs types de lumières qui influencent l'apparence des objets. Pour ce tutoriel, nous utiliserons une lumière directionnelle et une lumière ambiante.

Ajoutons ces lumières dans main.js :

// Lumière ambiante pour un éclairage général
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// Lumière directionnelle simulant une source lumineuse forte
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

La lumière ambiante éclaire toute la scène de manière uniforme, tandis que la lumière directionnelle crée des ombres et des effets plus réalistes.

Interaction avec la souris

Ajoutons maintenant un effet interactif : lorsque l'utilisateur clique sur le cube, sa couleur change aléatoirement.

Détection des clics

Pour détecter les interactions, nous utilisons Raycaster et Mouse de Three.js :

// Création du raycaster et du vecteur souris
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// Fonction de gestion du clic
function onMouseClick(event) {
    // Conversion des coordonnées de la souris
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // Mise à jour du raycaster
    raycaster.setFromCamera(mouse, camera);

    // Vérification de l'intersection avec le cube
    const intersects = raycaster.intersectObject(cube);
    if (intersects.length > 0) {
        // Changer la couleur du cube aléatoirement
        cube.material.color.set(Math.random() * 0xffffff);
    }
}

// Écouteur d'événements pour le clic
window.addEventListener('click', onMouseClick);

Explication

• Le Raycaster envoie un rayon depuis la caméra en direction du pointeur de la souris.
• Si le rayon touche un objet (ici le cube), nous changeons sa couleur.

Résultat et améliorations

Avec ces ajouts, notre scène devient plus dynamique ! Vous pouvez essayer de :

• Modifier l'intensité des lumières.
• Ajouter d'autres sources lumineuses, comme une lumière ponctuelle (THREE.PointLight).
• Appliquer d'autres interactions, comme un changement de taille du cube au survol.

Dans le prochain article, nous explorerons l'ajout de textures et matériaux avancés pour donner plus de réalisme à nos objets 3D !

Défi

• Ajoutez un effet de survol où le cube grossit lorsqu'on passe la souris dessus.
• Expérimentez avec d'autres types de lumières pour voir leurs effets.
• Ajoutez plusieurs objets interactifs dans la scène.

Sources

Documentation officielle de Three.js threejs.org (Page consultée le 1er mars 2025).
Tutoriel sur la sélection d'objets avec Raycaster RipTutorial (Page consultée le 1er mars 2025).
Tutoriel sur les sommets cliquables avec Three.js ryanschiang.com (Page consultée le 1er mars 2025).

À bientôt pour la suite de notre aventure en Three.js !