Premiers pas avec Three.js
Three.js est une bibliothèque JavaScript révolutionnaire qui permet de créer facilement des graphiques 3D dans le navigateur web. Cette fiche vous accompagne dans la découverte de cette technologie passionnante à travers une série d’exemples graphiques et interactifs adaptés aux débutants.
Educational objectives
- Comprendre les concepts fondamentaux de Three.js et de la 3D dans le web
- Créer votre première scène 3D avec des objets géométriques simples
- Manipuler les caméras, l’éclairage et les matériaux de base
- Ajouter de l’interactivité à vos créations 3D
- Intégrer Three.js dans vos projets web et architecturaux
Qu’est-ce que Three.js ?
Three.js est une bibliothèque JavaScript open-source qui simplifie énormément la création de contenu 3D dans les navigateurs web. Imaginez-la comme un traducteur universel : alors que votre navigateur ne comprend que le langage WebGL (très complexe), Three.js vous permet d’écrire du JavaScript simple pour créer des scènes 3D époustouflantes. C’est comme utiliser une télécommande simple au lieu de devoir programmer directement les circuits électroniques de votre télévision.
Pourquoi Three.js est révolutionnaire ?
Avant Three.js, créer de la 3D pour le web nécessitait des connaissances approfondies en WebGL et en mathématiques 3D. Three.js a démocratisé cette technologie en proposant une API intuitive et bien documentée. Pour les architectes et designers, c’est un outil précieux qui permet de présenter des projets de manière immersive, de créer des visites virtuelles ou de développer des configurateurs 3D interactifs sans avoir besoin d’un diplôme en informatique graphique.
Key point : Three.js fonctionne directement dans le navigateur, sans plugin ni installation supplémentaire pour l’utilisateur final.
Key points to remember
Three.js est un pont entre le JavaScript simple et la 3D complexe, permettant de créer facilement des expériences visuelles immersives dans le navigateur web.
🎯 Mini-exercice : Votre première scène 3D
Créez une scène 3D basique avec un cube coloré qui tourne automatiquement pour découvrir les fondamentaux de Three.js.
Reference code:
<!DOCTYPE html>
<html>
<head>
<title>Ma première scène Three.js</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
</body>
</html>
// Création de la scène, caméra et rendu
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// Configuration du rendu
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x222222);
document.body.appendChild(renderer.domElement);
// Création d'un cube coloré
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({
color: 0x00ff88,
wireframe: false
});
const cube = new THREE.Mesh(geometry, material);
// Ajout du cube à la scène
scene.add(cube);
// Position de la caméra
camera.position.z = 5;
// Fonction d'animation
function animate() {
requestAnimationFrame(animate);
// Rotation du cube
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Rendu de la scène
renderer.render(scene, camera);
}
// Démarrage de l'animation
animate();
Monaco Editor v0.45
La trinité de Three.js : Scène, Caméra, Rendu
Chaque création Three.js repose sur trois piliers fondamentaux, comme les trois pieds d’un trépied. La scène (Scene) est votre monde virtuel, un conteneur invisible qui accueille tous vos objets 3D. Imaginez-la comme un plateau de théâtre où vous placez décors, acteurs et éclairages. La caméra (Camera) est votre œil numérique, déterminant ce que voit le spectateur et sous quel angle. Enfin, le rendu (Renderer) est le projecteur qui transforme votre scène 3D en image 2D sur l’écran, comme un appareil photo qui capture un instant.
Les types de caméras et leurs usages
Three.js propose principalement deux types de caméras. La PerspectiveCamera simule la vision humaine avec un effet de perspective naturel : les objets proches paraissent plus grands que ceux éloignés. C’est parfait pour des scènes réalistes ou des visites architecturales virtuelles. L’OrthographicCamera offre une vue sans perspective, idéale pour des plans techniques ou des vues isométriques d’architecte où les dimensions doivent rester proportionnelles quelle que soit la distance.
Key point : Le ratio d’aspect de la caméra (largeur/hauteur) doit correspondre aux dimensions de votre canvas pour éviter les déformations.
Key points to remember
Scène = conteneur, Caméra = point de vue, Rendu = transformation en image. Ces trois éléments forment la base obligatoire de toute création Three.js.
🎯 Mini-exercice : Comparer les types de caméras
Créez une scène avec plusieurs cubes et basculez entre caméra perspective et orthographique pour comprendre leur différence visuelle.
Reference code:
<!DOCTYPE html>
<html>
<head>
<title>Comparaison des caméras</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background: #111; font-family: Arial; }
canvas { display: block; }
.controls { position: absolute; top: 20px; left: 20px; z-index: 100; }
button { background: #0066cc; color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; }
button:hover { background: #0088ff; }
</style>
</head>
<body>
<div class="controls">
<button onclick="switchToPerspective()">Caméra Perspective</button>
<button onclick="switchToOrthographic()">Caméra Orthographique</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
</body>
</html>
// Configuration de base
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x111111);
document.body.appendChild(renderer.domElement);
// Création des deux types de caméras
const perspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const orthographicCamera = new THREE.OrthographicCamera(
window.innerWidth / -100, window.innerWidth / 100,
window.innerHeight / 100, window.innerHeight / -100,
0.1, 1000
);
// Caméra active (par défaut perspective)
let activeCamera = perspectiveCamera;
// Position des caméras
perspectiveCamera.position.set(8, 6, 10);
orthographicCamera.position.set(8, 6, 10);
// Création de plusieurs cubes à différentes distances
const cubes = [];
const colors = [0xff6b6b, 0x4ecdc4, 0x45b7d1, 0xf9ca24, 0xf0932b];
for (let i = 0; i < 5; i++) {
const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
const material = new THREE.MeshBasicMaterial({ color: colors[i] });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(i * 2 - 4, 0, -i * 2);
cubes.push(cube);
scene.add(cube);
}
// Fonctions de basculement des caméras
function switchToPerspective() {
activeCamera = perspectiveCamera;
}
function switchToOrthographic() {
activeCamera = orthographicCamera;
}
// Animation
function animate() {
requestAnimationFrame(animate);
// Rotation de tous les cubes
cubes.forEach((cube, index) => {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01 * (index + 1);
});
// Rendu avec la caméra active
renderer.render(scene, activeCamera);
}
animate();
Monaco Editor v0.45
Les formes géométriques fondamentales
Three.js offre une riche bibliothèque de formes préconçues appelées géométries. Les plus utilisées sont BoxGeometry (cubes/parallélépipèdes), SphereGeometry (sphères), CylinderGeometry (cylindres), et PlaneGeometry (surfaces planes). Chaque géométrie se personnalise avec des paramètres : un BoxGeometry(2, 3, 1) crée un parallélépipède de 2 unités de large, 3 de haut, et 1 de profondeur. Pour l’architecture, ces formes constituent les briques élémentaires pour modéliser des bâtiments, meubles ou éléments décoratifs.
Les types de matériaux et leurs applications
Un matériau détermine l’apparence de surface de vos objets 3D. Le MeshBasicMaterial est le plus simple : il affiche une couleur unie sans réagir à l’éclairage, parfait pour débuter. Le MeshStandardMaterial simule des surfaces réalistes en réagissant à la lumière, idéal pour des matériaux architecturaux comme le bois, métal ou béton. Vous pouvez contrôler la rugosité (roughness) pour des effets mat ou brillant, et la métallicité (metalness) pour simuler des surfaces métalliques.
Key point : Un Mesh = Géométrie + Matériau. C’est l’objet final visible que vous ajoutez à votre scène.
Key points to remember
Géométrie = forme 3D, Matériau = apparence de surface. Leur combinaison forme un Mesh, l’objet visible dans votre scène.
🎯 Mini-exercice : Collection de formes architecturales
Créez une composition avec différentes géométries et matériaux pour simuler des éléments architecturaux simples.
Reference code:
<!DOCTYPE html>
<html>
<head>
<title>Éléments architecturaux 3D</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background: #87CEEB; font-family: Arial; }
canvas { display: block; }
.info { position: absolute; bottom: 20px; left: 20px; color: white; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 10px; }
</style>
</head>
<body>
<div class="info">
<h3 style="margin: 0 0 10px 0;">Éléments architecturaux</h3>
<p style="margin: 0; font-size: 14px;">Fondation (cube) • Colonne (cylindre) • Dôme (sphère) • Sol (plan)</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
</body>
</html>
// Configuration de la scène
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);
renderer.setClearColor(0x87CEEB); // Bleu ciel
document.body.appendChild(renderer.domElement);
// Éclairage ambiant pour voir les matériaux
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);
// 1. Fondation en béton (cube)
const foundationGeometry = new THREE.BoxGeometry(6, 0.5, 6);
const foundationMaterial = new THREE.MeshStandardMaterial({
color: 0x888888,
roughness: 0.8
});
const foundation = new THREE.Mesh(foundationGeometry, foundationMaterial);
foundation.position.y = -0.25;
scene.add(foundation);
// 2. Sol en pierre (plan)
const floorGeometry = new THREE.PlaneGeometry(12, 12);
const floorMaterial = new THREE.MeshStandardMaterial({
color: 0x654321,
roughness: 0.9
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1;
scene.add(floor);
// 3. Colonnes en marbre (cylindres)
const columnGeometry = new THREE.CylinderGeometry(0.3, 0.3, 4, 8);
const columnMaterial = new THREE.MeshStandardMaterial({
color: 0xF5F5DC,
roughness: 0.3
});
const positions = [
{ x: -2, z: -2 },
{ x: 2, z: -2 },
{ x: -2, z: 2 },
{ x: 2, z: 2 }
];
positions.forEach(pos => {
const column = new THREE.Mesh(columnGeometry, columnMaterial);
column.position.set(pos.x, 1.75, pos.z);
scene.add(column);
});
// 4. Dôme central (sphère)
const domeGeometry = new THREE.SphereGeometry(1.2, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2);
const domeMaterial = new THREE.MeshStandardMaterial({
color: 0xCD853F,
roughness: 0.4
});
const dome = new THREE.Mesh(domeGeometry, domeMaterial);
dome.position.y = 4;
scene.add(dome);
// Position de la caméra
camera.position.set(8, 6, 8);
camera.lookAt(0, 2, 0);
// Animation douce
function animate() {
requestAnimationFrame(animate);
// Rotation lente de la scène pour admirer sous tous les angles
scene.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
Monaco Editor v0.45
Les différents types d’éclairage
L’éclairage transforme radicalement l’atmosphère de vos scènes 3D. L’AmbientLight éclaire uniformément tous les objets, comme la lumière diffuse d’un jour nuageux, sans créer d’ombres. La DirectionalLight simule le soleil avec des rayons parallèles venant d’une direction, parfaite pour l’éclairage naturel extérieur. La PointLight rayonne dans toutes les directions depuis un point, comme une ampoule, créant des ombres réalistes. Enfin, la SpotLight projette un cône de lumière, idéale pour mettre en valeur des éléments architecturaux spécifiques.
Créer des ambiances avec la couleur et l’intensité
Chaque source lumineuse accepte deux paramètres cruciaux : la couleur et l’intensité. Une lumière blanche (0xffffff) à intensité 1 simule un éclairage neutre. Une teinte dorée (0xffd700) avec intensité 0.8 évoque un coucher de soleil chaleureux. Pour l’architecture d’intérieur, combinez plusieurs sources : une AmbientLight bleutée faible (0.2) pour simuler la lumière du ciel, plus des PointLights jaunes (0.6) pour les luminaires artificiels. Cette stratification crée une hiérarchie visuelle et guide naturellement l’œil.
Key point : Les matériaux MeshBasicMaterial ignorent l’éclairage. Utilisez MeshStandardMaterial ou MeshPhongMaterial pour voir les effets lumineux.
Key points to remember
L’éclairage définit l’ambiance de votre scène. Combinez plusieurs sources lumineuses pour créer des atmosphères réalistes et émotionnellement engageantes.
🎯 Mini-exercice : Évolution de l’éclairage naturel
Simulez le passage du jour à la nuit en animant couleur et position d’une DirectionalLight sur une scène architecturale.
Reference code:
<!DOCTYPE html>
<html>
<head>
<title>Cycle jour/nuit architectural</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; font-family: Arial; }
canvas { display: block; }
.time-info { position: absolute; top: 20px; right: 20px; color: white; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 10px; text-align: center; }
.controls { position: absolute; bottom: 20px; left: 20px; }
button { background: #4CAF50; color: white; border: none; padding: 10px 20px; margin: 5px; border-radius: 5px; cursor: pointer; }
button:hover { background: #45a049; }
</style>
</head>
<body>
<div class="time-info">
<div id="time-display">06:00 - Aube</div>
<div style="font-size: 12px; margin-top: 5px;">Simulation temporelle</div>
</div>
<div class="controls">
<button onclick="toggleAnimation()">⏯ Pause/Play</button>
<button onclick="resetTime()">🌅 Reset</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
</body>
</html>
// 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);
// Variables temporelles
let timeOfDay = 0; // 0 = minuit, 12 = midi, 24 = minuit suivant
let animationActive = true;
// Construction simple (maison)
const houseGroup = new THREE.Group();
// Base de la maison
const wallsGeometry = new THREE.BoxGeometry(4, 3, 4);
const wallsMaterial = new THREE.MeshStandardMaterial({ color: 0xDEB887 });
const walls = new THREE.Mesh(wallsGeometry, wallsMaterial);
walls.position.y = 1.5;
houseGroup.add(walls);
// Toit
const roofGeometry = new THREE.ConeGeometry(3, 2, 4);
const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = 4;
roof.rotation.y = Math.PI / 4;
houseGroup.add(roof);
// Sol
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
houseGroup.add(ground);
scene.add(houseGroup);
// Système d'éclairage dynamique
const ambientLight = new THREE.AmbientLight(0x404040, 0.2);
scene.add(ambientLight);
const sunLight = new THREE.DirectionalLight(0xffffff, 1);
scene.add(sunLight);
// Lumières artificielles (fenêtres)
const windowLight = new THREE.PointLight(0xffeb3b, 0, 10);
windowLight.position.set(0, 2, 2.1);
scene.add(windowLight);
// Position caméra
camera.position.set(8, 6, 8);
camera.lookAt(0, 2, 0);
// Fonctions de contrôle
function toggleAnimation() {
animationActive = !animationActive;
}
function resetTime() {
timeOfDay = 6; // Aube
}
// Fonction de mise à jour de l'éclairage
function updateLighting() {
// Position du soleil (arc de cercle)
const sunAngle = (timeOfDay - 6) * Math.PI / 12; // 6h = lever, 18h = coucher
sunLight.position.set(
Math.cos(sunAngle) * 15,
Math.sin(sunAngle) * 10,
5
);
// Couleur et intensité du soleil selon l'heure
let sunColor, sunIntensity, skyColor, ambientIntensity;
if (timeOfDay >= 5 && timeOfDay < 7) { // Aube
sunColor = 0xffa500;
sunIntensity = 0.6;
skyColor = 0x4169e1;
ambientIntensity = 0.3;
} else if (timeOfDay >= 7 && timeOfDay < 18) { // Jour
sunColor = 0xffffff;
sunIntensity = 1;
skyColor = 0x87ceeb;
ambientIntensity = 0.4;
} else if (timeOfDay >= 18 && timeOfDay < 20) { // Crépuscule
sunColor = 0xff6347;
sunIntensity = 0.4;
skyColor = 0x191970;
ambientIntensity = 0.2;
} else { // Nuit
sunColor = 0x4169e1;
sunIntensity = 0.1;
skyColor = 0x000000;
ambientIntensity = 0.1;
}
sunLight.color.setHex(sunColor);
sunLight.intensity = sunIntensity;
renderer.setClearColor(skyColor);
ambientLight.intensity = ambientIntensity;
// Éclairage artificiel (actif la nuit)
windowLight.intensity = timeOfDay < 6 || timeOfDay > 20 ? 0.8 : 0;
// Mise à jour de l'affichage du temps
const hour = Math.floor(timeOfDay);
const minute = Math.floor((timeOfDay - hour) * 60);
const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
let period;
if (timeOfDay >= 5 && timeOfDay < 7) period = "Aube";
else if (timeOfDay >= 7 && timeOfDay < 18) period = "Jour";
else if (timeOfDay >= 18 && timeOfDay < 20) period = "Crépuscule";
else period = "Nuit";
document.getElementById('time-display').textContent = `${timeString} - ${period}`;
}
// Animation
function animate() {
requestAnimationFrame(animate);
if (animationActive) {
timeOfDay += 0.02; // Vitesse du cycle
if (timeOfDay >= 24) timeOfDay = 0;
}
updateLighting();
renderer.render(scene, camera);
}
// Initialisation
updateLighting();
animate();
Monaco Editor v0.45
Les contrôles de caméra OrbitControls
L’interactivité transforme une simple démonstration 3D en expérience immersive. Les OrbitControls constituent l’outil le plus populaire pour permettre à l’utilisateur d’explorer librement votre scène. Ils autorisent la rotation autour d’un point central (orbite), le zoom avant/arrière avec la molette, et le déplacement latéral (pan) en maintenant le clic droit. Pour des projets architecturaux, c’est parfait pour des visites virtuelles où le client peut examiner un bâtiment sous tous les angles, zoomer sur les détails, et se déplacer intuitivement.
Détection de clics et interactions avec les objets
Three.js propose un système appelé Raycasting pour détecter les clics sur les objets 3D. Imaginez un rayon invisible partant de la souris vers la scène : le Raycaster calcule quels objets ce rayon traverse. Cela permet de créer des interactions sophistiquées : cliquer sur une porte pour l’ouvrir, sélectionner une pièce pour afficher ses informations, ou modifier la couleur d’un matériau au survol. Pour l’architecture, c’est essentiel pour créer des configurations interactives ou des visites guidées avec points d’intérêt cliquables.
Key point : Les OrbitControls nécessitent un import séparé depuis les exemples Three.js. Pensez à inclure le bon fichier CDN.
Key points to remember
L’interactivité rend vos créations 3D vivantes. OrbitControls pour l’exploration libre, Raycasting pour les interactions précises avec les objets.
🎯 Mini-exercice : Configurateur architectural interactif
Créez une scène où l’utilisateur peut cliquer sur différents éléments architecturaux pour changer leurs couleurs et naviguer librement avec OrbitControls.
Reference code:
<!DOCTYPE html>
<html>
<head>
<title>Configurateur architectural interactif</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; font-family: Arial; background: #f0f0f0; }
canvas { display: block; cursor: crosshair; }
.ui-panel { position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,0.95); padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.ui-panel h3 { margin: 0 0 15px 0; color: #333; }
.instructions { position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 15px; border-radius: 10px; max-width: 300px; }
.color-palette { display: flex; gap: 10px; margin-top: 10px; }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color 0.3s; }
.color-swatch:hover { border-color: #333; }
.selected-info { background: rgba(76, 175, 80, 0.9); color: white; padding: 10px; border-radius: 5px; margin-top: 10px; }
</style>
</head>
<body>
<div class="ui-panel">
<h3>🏠 Configurateur</h3>
<div>Cliquez sur un élément pour le personnaliser</div>
<div class="color-palette">
<div class="color-swatch" style="background: #ff6b6b;" onclick="applyColor(0xff6b6b)"></div>
<div class="color-swatch" style="background: #4ecdc4;" onclick="applyColor(0x4ecdc4)"></div>
<div class="color-swatch" style="background: #45b7d1;" onclick="applyColor(0x45b7d1)"></div>
<div class="color-swatch" style="background: #f9ca24;" onclick="applyColor(0xf9ca24)"></div>
<div class="color-swatch" style="background: #f0932b;" onclick="applyColor(0xf0932b)"></div>
</div>
<div id="selected-element"></div>
</div>
<div class="instructions">
<strong>Instructions:</strong><br>
• Clic gauche: sélectionner un élément<br>
• Clic droit + glisser: déplacer la vue<br>
• Molette: zoomer/dézoomer<br>
• Clic gauche + glisser: tourner autour
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.150/examples/js/controls/OrbitControls.js"></script>
</body>
</html>
// 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);
renderer.setClearColor(0x87CEEB);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// Contrôles OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Éclairage
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);
// Variables pour l'interactivité
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let selectedObject = null;
const interactiveObjects = [];
// Construction de la maison modulaire
const houseGroup = new THREE.Group();
// Murs
const wallsGeometry = new THREE.BoxGeometry(6, 4, 6);
const wallsMaterial = new THREE.MeshStandardMaterial({ color: 0xDEB887 });
const walls = new THREE.Mesh(wallsGeometry, wallsMaterial);
walls.position.y = 2;
walls.userData = { name: "Murs", type: "walls" };
walls.castShadow = true;
walls.receiveShadow = true;
interactiveObjects.push(walls);
houseGroup.add(walls);
// Toit
const roofGeometry = new THREE.ConeGeometry(4.5, 3, 8);
const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = 6.5;
roof.userData = { name: "Toit", type: "roof" };
roof.castShadow = true;
interactiveObjects.push(roof);
houseGroup.add(roof);
// Porte
const doorGeometry = new THREE.BoxGeometry(1.5, 3, 0.2);
const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x654321 });
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(0, 1.5, 3.1);
door.userData = { name: "Porte", type: "door" };
door.castShadow = true;
interactiveObjects.push(door);
houseGroup.add(door);
// Fenêtres
const windowGeometry = new THREE.BoxGeometry(1.2, 1.2, 0.1);
const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87CEEB });
// Fenêtre gauche
const windowLeft = new THREE.Mesh(windowGeometry, windowMaterial.clone());
windowLeft.position.set(-1.5, 2.5, 3.05);
windowLeft.userData = { name: "Fenêtre gauche", type: "window" };
interactiveObjects.push(windowLeft);
houseGroup.add(windowLeft);
// Fenêtre droite
const windowRight = new THREE.Mesh(windowGeometry, windowMaterial.clone());
windowRight.position.set(1.5, 2.5, 3.05);
windowRight.userData = { name: "Fenêtre droite", type: "window" };
interactiveObjects.push(windowRight);
houseGroup.add(windowRight);
// Sol
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
ground.userData = { name: "Pelouse", type: "ground" };
interactiveObjects.push(ground);
scene.add(ground);
scene.add(houseGroup);
// Position de la caméra
camera.position.set(10, 8, 10);
controls.target.set(0, 3, 0);
// Gestion des clics
function onMouseClick(event) {
// Calcul des coordonnées de la souris normalisées
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// Lancement du rayon
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(interactiveObjects);
if (intersects.length > 0) {
const clickedObject = intersects[0].object;
// Désélection de l'objet précédent
if (selectedObject && selectedObject !== clickedObject) {
selectedObject.material.emissive.setHex(0x000000);
}
// Sélection du nouvel objet
selectedObject = clickedObject;
selectedObject.material.emissive.setHex(0x444444);
// Mise à jour de l'interface
document.getElementById('selected-element').innerHTML =
`<div class="selected-info"><strong>Sélectionné:</strong> ${selectedObject.userData.name}</div>`;
}
}
// Fonction pour appliquer une couleur
function applyColor(color) {
if (selectedObject) {
selectedObject.material.color.setHex(color);
}
}
// Écouteurs d'événements
renderer.domElement.addEventListener('click', onMouseClick, false);
// Gestion du redimensionnement
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Boucle d'animation
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
Monaco Editor v0.45
Summary
Key points to remember
- Three.js simplifie la 3D web : Cette bibliothèque traduit le JavaScript simple en WebGL complexe pour créer des expériences 3D accessibles
- Trinité Scene-Camera-Renderer : Ces trois composants forment la base obligatoire de toute création Three.js
- Géométries + Matériaux = Mesh : La combinaison de formes 3D et d’apparences de surface crée les objets visibles
- L’éclairage définit l’atmosphère : Combiner plusieurs sources lumineuses crée des ambiances réalistes et émotionnellement engageantes
- Interactivité avec OrbitControls et Raycasting : Navigation libre et interactions précises transforment une démonstration en expérience immersive
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
