LARAVEL

Dans l'article précédent, nous avons donné vie à un cube vert. Un premier pas magique, mais un peu statique, non ? Pour créer des scènes 3D captivantes et réalistes, il faut comprendre comment Three.js construit les objets. Imaginez un objet 3D comme une sculpture : il se compose de deux éléments indissociables :

• une ossature (la géométrie), qui définit sa forme et sa structure
• une peau (le matériau), qui lui donne son apparence, ses couleurs et ses textures

Ensemble, ils forment un maillage (mesh), c'est-à-dire l'objet 3D que vous voyez à l'écran.

La géométrie : l’ossature de votre objet 3D

La géométrie est le squelette mathématique de votre objet. Elle définit :

• les sommets, c'est-à-dire les points dans l’espace 3D
• les faces (qui définissent la manière dont ces points sont connectés pour former des surfaces)

Three.js simplifie la création de formes grâce à des primitives prêtes à l’emploi :

Plus une géométrie a de sommets (ou de segments), plus elle est lisse et détaillée, mais plus elle sollicite les ressources de votre ordinateur. L’optimisation consiste à trouver l’équilibre entre qualité visuelle et performance !

Dans cette illustration :

• les points rouges représentent les sommets
• les lignes bleues relient les sommets pour former les arêtes
• les surfaces vertes semi-transparentes sont les faces du cube.

Le matériau : enveloppe visuelle de votre géométrie 

C’est ici que vous définissez :

• la couleur (rouge, bleu, dégradé, etc.)
• la texture (bois, métal, pierre, etc.)
• les effets visuels (brillance, transparence, réflexion, etc.)

Voici deux matériaux essentiels pour débuter :

• MeshBasicMaterial : parfait pour tester rapidement une géométrie ou créer des éléments stylisés (par exemple, pour un jeu rétro)
• MeshStandardMaterial : idéal pour des rendus photoréalistes (scène avec ombres, reflets ou matériaux tels que le métal ou le verre)

Astuce : avec ce dernier, jouez avec les paramètres « roughness » (rugosité) et « metalness » (effet métallique) pour créer des matières variées !

• à gauche, un cube avec un MeshBasicMaterial (couleur unie, pas d'effet de lumière)
• à droite, un cube avec un MeshStandardMaterial (effet métallique réaliste, avec reflets et ombres)

Cette comparaison illustre clairement la manière dont chaque matériau interagit avec la lumière. 

J'ai créé une page pour visualiser les différences avec quelques réglages possibles ici.

Créer un mesh en quatre étapes

Pour qu’un objet prenne vie dans votre scène Three.js, il faut assembler une géométrie et un matériau dans un mesh. Pensez-y comme à un mariage :

• la géométrie correspond au squelette en fil de fer
• Le matériau est le tissu qui habille ce squelette

Voyons comment le coder étape par étape :

1. Créer la géométrie (le squelette)

Définissez la forme de votre objet. Ici, il s'agit d'une sphère de rayon 1 avec 32 segments pour un rendu lisse :

const geometry = new THREE.SphereGeometry(1, 32, 32);

2. Créer le matériau (la peau)

Choisissez un MeshStandardMaterial pour un rendu réaliste. Personnalisez ensuite sa couleur, sa brillance (metalness) et sa rugosité (roughness).

const material = new THREE.MeshStandardMaterial({
    color: 0xff4444,    // Rouge vif
    metalness: 0.7,    // Effet métallique prononcé
    roughness: 0.2     // Surface plutôt lisse
});

Attention : ce matériau a besoin d'une source de lumière dans la scène pour être visible !

3. Assembler le Mesh

Fusionnez la géométrie et le matériau pour créer l’objet final :

const sphere = new THREE.Mesh(geometry, material);

4. Ajoutez le mesh à la scène

Placez votre objet dans la scène pour qu’il apparaisse à l’écran :

scene.add(sphere);

• la géométrie détermine la position dans l’espace
• le matériau définit l'apparence des points (couleur, texture, effets)
• le mesh est le résultat de cette combinaison : un objet visible et interactif dans votre scène.

Piège : l’obscurité totale ! (et comment l'éviter) 

Vous utilisez un MeshStandardMaterial, mais votre objet est invisible ou complètement noir à l’écran. Pas de panique, c'est normal !

Contrairement au MeshBasicMaterial, qui affiche une couleur uniforme sans lumière, le MeshStandardMaterial est réaliste : sans source de lumière, il reste dans l’ombre… littéralement.

La solution (en deux lignes de code) : ajoutez une lumière ambiante à votre scène avant le rendu pour éclairer uniformément tous les objets.

const light = new THREE.AmbientLight(0xffffff, 1); // Lumière blanche, intensité = 1
scene.add(light);

AmbientLight simule une lumière diffuse, similaire à un éclairage d'ambiance dans une pièce. Sans elle, votre objet est plongé dans l'obscurité, même s'il est bien présent dans la scène.

Pour peaufiner, on peut ajouter une lumière ponctuelle pour mettre en évidence l'effet de brillance :

const pointLight = new THREE.PointLight(0xffffff, 50);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

Code final

Voilà notre code d'exemple final :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo Mesh Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #111; }
        canvas { display: block; }
    </style>
</head>
<body>

<script type="module">
    import * as THREE from 'https://unpkg.com/three@0.183.2/build/three.module.js';

    // --- CONFIGURATION DE BASE ---
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // --- LES ÉTAPES ---

    // 1. Créer la géométrie (le squelette)
    const geometry = new THREE.SphereGeometry(1, 32, 32);

    // 2. Créer le matériau (la peau)
    const material = new THREE.MeshStandardMaterial({
        color: 0xff4444,    // Rouge vif
        metalness: 0.7,    // Effet métallique prononcé
        roughness: 0.2     // Surface plutôt lisse
    });

    // 3. Assembler le Mesh
    const sphere = new THREE.Mesh(geometry, material);

    // 4. Ajouter le mesh à la scène
    scene.add(sphere);

    // ÉVITER LE PIÈGE : Ajouter de la lumière
    const light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);

    // Ajout d'une petite lumière ponctuelle pour voir l'effet métallique/brillant
    const pointLight = new THREE.PointLight(0xffffff, 50);
    pointLight.position.set(5, 5, 5);
    scene.add(pointLight);

    // Position de la caméra
    camera.position.z = 3;

    // Rendu
    renderer.render(scene, camera);

    // Ajustement si on redimensionne la fenêtre
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
</script>
</body>
</html>

Avec ce résultat :

Allons plus loin : animons notre mesh !

Maintenant que votre objet 3D est visible, donnons-lui vie ! Three.js vous permet de manipuler les propriétés de votre maillage en temps réel. Voici quelques idées pour aller plus loin :

1. Modifier la géométrie dynamiquement

Vous pouvez ajuster les paramètres de votre géométrie après sa création. Par exemple, pour une sphère, vous pouvez changer son rayon ou le nombre de segments afin de voir l’impact sur le rendu :

sphere.geometry.dispose(); // Libère la mémoire de l’ancienne géométrie
sphere.geometry = new THREE.SphereGeometry(1.5, 64, 64); // Nouvelle géométrie plus détaillée

2. Animer le matériau

Les matériaux peuvent également évoluer ! Modifiez la couleur, la transparence, les effets en fonction du temps ou des interactions de l'utilisateur :

// Dans votre boucle d’animation (animate())
material.color.set(Math.random() * 0xffffff); // Couleur aléatoire
material.roughness = 0.5 + Math.sin(Date.now() * 0.001) * 0.5; // Rugosité variable

3. Déplacer ou faire tourner le mesh

Utilisez les propriétés Position, Rotation et Échelle pour animer votre objet :

sphere.position.x = Math.sin(Date.now() * 0.001) * 2; // Mouvement de gauche à droite
sphere.rotation.y += 0.01; // Rotation continue autour de l’axe Y

Conclusion

Dans cet article, nous avons vu la géométrie, les matériaux, le mesh comme résultat et la base des éclairages. Le sujet est encore vaste pour les prochains articles !