premiers pas avec three js

Posted on By LMS Pro No Comments on premiers pas avec three js
Bonus Module
YouTubethree jsthree js tutorialwhat is three jsthree js in 100 seconds

premiers pas avec three js

Three.js est une bibliothèque JavaScript révolutionnaire qui démocratise la création d’expériences 3D interactives dans le navigateur. À travers une série d’exemples graphiques progressifs, découvrez comment donner vie à vos projets architecturaux et créer des visualisations immersives qui captivent vos utilisateurs.

Module: Module 6: Bonus Module

Level : Beginner

Duration : 20 minutes

Prerequisites: None

Educational objectives

  • Comprendre les concepts fondamentaux de Three.js et de la 3D dans le navigateur
  • Créer une scène 3D basique avec des objets géométriques simples
  • Maîtriser l’ajout d’éclairage et de matériaux réalistes
  • Implémenter des interactions utilisateur et des animations fluides
  • Développer des visualisations architecturales interactives

Qu’est-ce que Three.js ?

Three.js est une bibliothèque JavaScript qui simplifie énormément la création d’applications 3D dans le navigateur web. Imaginez que vous vouliez construire une maison : sans Three.js, vous devriez fabriquer chaque brique à la main (c’est ce qu’on appelle WebGL natif), tandis qu’avec Three.js, vous disposez déjà de briques prêtes à l’emploi et d’outils pour les assembler facilement.

Les trois piliers fondamentaux

Toute application Three.js repose sur trois éléments essentiels, comme les trois pieds d’un tabouret : la scène (l’espace 3D où tout se passe), la caméra (votre point de vue sur cette scène), et le renderer (le moteur qui dessine tout à l’écran). Sans l’un de ces éléments, votre application 3D ne peut pas fonctionner.

Key point : Three.js utilise WebGL en arrière-plan, mais vous cache toute la complexité technique pour vous permettre de vous concentrer sur la créativité.

Key points to remember

Three.js est une bibliothèque qui simplifie la 3D web en s’appuyant sur trois éléments essentiels : scène, caméra et renderer.

🎯 Mini-exercice : Première scène 3D

Créez votre première scène 3D avec un cube coloré qui tourne lentement sur lui-même.

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>
    <script>
        // Le code JavaScript sera ici
    </script>
</body>
</html>
// Création de la scène, de la caméra et du renderer
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 });

// Configuration du renderer
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x2c3e50);
document.body.appendChild(renderer.domElement);

// Création d'un cube
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x3498db });
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);
}

// Lancement de l'animation
animate();


Result
● Ready
Monaco Editor v0.45

Les géométries de base

Dans Three.js, une géométrie définit la forme d’un objet 3D, comme le moule définit la forme d’un gâteau. Three.js propose une riche collection de géométries prêtes à l’emploi : des formes simples comme les cubes (BoxGeometry) et les sphères (SphereGeometry), jusqu’aux formes plus complexes comme les tores ou les cylindres. Chaque géométrie peut être personnalisée avec des paramètres spécifiques.

Applications en architecture

Pour un architecte ou un designer, ces géométries sont des outils précieux. Un BoxGeometry peut représenter un bâtiment ou une pièce, un CylinderGeometry peut modéliser une colonne ou un pilier, tandis qu’un PlaneGeometry est parfait pour créer des murs, des sols ou des toitures plates. La combinaison de plusieurs géométries permet de construire des structures architecturales complexes.

Key point : Une géométrie seule n’est pas visible ; elle doit être associée à un matériau pour créer un « Mesh » (objet 3D complet).

Key points to remember

Les géométries définissent les formes 3D et doivent être combinées avec des matériaux pour devenir des objets visibles dans la scène.

🎯 Mini-exercice : Composition architecturale

Créez une composition avec différentes formes géométriques pour représenter un bâtiment moderne simple.

Reference code:


<!DOCTYPE html>
<html>
<head>
    <title>Composition architecturale</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #87CEEB; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
    <script>
        // Le code JavaScript sera ici
    </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); // Bleu ciel
document.body.appendChild(renderer.domElement);

// Groupe pour contenir le bâtiment
const building = new THREE.Group();

// Sol/fondation (plan rectangulaire)
const groundGeometry = new THREE.PlaneGeometry(8, 6);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x8FBC8F, side: THREE.DoubleSide });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -2;
building.add(ground);

// Corps principal du bâtiment (cube)
const mainGeometry = new THREE.BoxGeometry(4, 3, 3);
const mainMaterial = new THREE.MeshBasicMaterial({ color: 0xDEB887 });
const mainBuilding = new THREE.Mesh(mainGeometry, mainMaterial);
mainBuilding.position.y = 0;
building.add(mainBuilding);

// Tour/extension (cylindre)
const towerGeometry = new THREE.CylinderGeometry(0.8, 0.8, 4, 8);
const towerMaterial = new THREE.MeshBasicMaterial({ color: 0x696969 });
const tower = new THREE.Mesh(towerGeometry, towerMaterial);
tower.position.set(2.5, 0.5, 0);
building.add(tower);

// Toit (cône)
const roofGeometry = new THREE.ConeGeometry(1.2, 1.5, 8);
const roofMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.set(2.5, 2.75, 0);
building.add(roof);

// Ajout du bâtiment à la scène
scene.add(building);

// Position de la caméra
camera.position.set(6, 4, 8);
camera.lookAt(0, 0, 0);

// Animation douce
function animate() {
    requestAnimationFrame(animate);
    
    // Rotation lente du bâtiment
    building.rotation.y += 0.005;
    
    renderer.render(scene, camera);
}

animate();


Result
● Ready
Monaco Editor v0.45

Types de matériaux

Les matériaux dans Three.js définissent l’apparence visuelle des objets, comme la peinture définit l’aspect d’un mur. Il existe plusieurs types principaux : MeshBasicMaterial (couleur unie, non affecté par l’éclairage), MeshLambertMaterial (surface mate qui réagit à la lumière), MeshPhongMaterial (surface brillante avec reflets), et MeshStandardMaterial (rendu réaliste basé sur la physique). Chaque matériau a ses propres propriétés et cas d’usage.

L’importance de l’éclairage

L’éclairage transforme complètement l’atmosphère d’une scène 3D, exactement comme l’éclairage naturel ou artificiel transforme un espace architectural. Three.js propose différents types de lumières : AmbientLight (éclairage global uniforme), DirectionalLight (comme le soleil, rayons parallèles), PointLight (comme une ampoule, rayonne dans toutes les directions), et SpotLight (projecteur directionnel). Sans éclairage approprié, même les plus beaux matériaux perdent leur impact visuel.

Key point : Les matériaux comme MeshBasicMaterial ne réagissent pas à l’éclairage, tandis que MeshLambertMaterial et MeshPhongMaterial en ont besoin pour révéler leurs propriétés.

Key points to remember

Les matériaux définissent l’apparence des objets et certains nécessitent un éclairage approprié pour révéler leurs propriétés visuelles.

🎯 Mini-exercice : Éclairage architectural

Créez une scène avec différents matériaux et sources lumineuses pour simuler l’éclairage d’un espace architectural.

Reference code:


<!DOCTYPE html>
<html>
<head>
    <title>Éclairage architectural</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #1a1a2e; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
    <script>
        // Le code JavaScript sera ici
    </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(0x1a1a2e);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// Éclairage ambiant (éclairage global doux)
const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
scene.add(ambientLight);

// Lumière directionnelle (simule le soleil)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);

// Lumière ponctuelle (lampe d'intérieur)
const pointLight = new THREE.PointLight(0xffaa00, 1, 100);
pointLight.position.set(-3, 3, 2);
scene.add(pointLight);

// Sol avec matériau réfléchissant
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -2;
floor.receiveShadow = true;
scene.add(floor);

// Mur avec matériau mat
const wallGeometry = new THREE.PlaneGeometry(15, 8);
const wallMaterial = new THREE.MeshLambertMaterial({ color: 0xe6e6e6 });
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
wall.position.set(0, 2, -7);
wall.receiveShadow = true;
scene.add(wall);

// Colonne avec matériau brillant
const columnGeometry = new THREE.CylinderGeometry(0.5, 0.5, 6, 16);
const columnMaterial = new THREE.MeshPhongMaterial({ 
    color: 0xffffff, 
    shininess: 100 
});
const column = new THREE.Mesh(columnGeometry, columnMaterial);
column.position.set(3, 1, 0);
column.castShadow = true;
column.receiveShadow = true;
scene.add(column);

// Objet avec matériau standard (PBR)
const sphereGeometry = new THREE.SphereGeometry(1, 32, 16);
const sphereMaterial = new THREE.MeshStandardMaterial({ 
    color: 0x3498db,
    metalness: 0.7,
    roughness: 0.2 
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(-2, 0, 2);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere);

// Position de la caméra
camera.position.set(8, 5, 10);
camera.lookAt(0, 0, 0);

// Animation
function animate() {
    requestAnimationFrame(animate);
    
    // Animation de la lumière ponctuelle
    const time = Date.now() * 0.001;
    pointLight.position.x = Math.cos(time) * 4;
    pointLight.position.z = Math.sin(time) * 4;
    
    renderer.render(scene, camera);
}

animate();


Result
● Ready
Monaco Editor v0.45

Principe des animations

Les animations dans Three.js fonctionnent selon le même principe que le cinéma : en affichant une succession rapide d’images légèrement différentes, on crée l’illusion du mouvement. La fonction requestAnimationFrame est votre projecteur personnel, elle s’assure que chaque « image » (frame) est affichée au bon moment, généralement 60 fois par seconde. Vous pouvez animer n’importe quelle propriété d’un objet : position, rotation, échelle, couleur, ou même la géométrie elle-même.

Interactivité avec l’utilisateur

Rendre vos scènes interactives transforme une simple visualisation en expérience immersive. Three.js permet de détecter les clics de souris sur les objets 3D grâce au système de « raycasting » (lancer de rayons), d’écouter les mouvements de souris pour contrôler la caméra, ou de réagir aux touches du clavier. Ces interactions sont essentielles pour créer des visites virtuelles d’architectures, des configurateurs de produits, ou des présentations interactives.

Key point : Utilisez requestAnimationFrame plutôt que setInterval pour des animations fluides synchronisées avec le taux de rafraîchissement de l’écran.

Key points to remember

Les animations utilisent requestAnimationFrame pour créer des mouvements fluides, tandis que l’interactivité repose sur la détection d’événements et le raycasting.

🎯 Mini-exercice : Visite interactive

Créez une scène architecturale avec des objets animés et des interactions au clic pour simuler une visite virtuelle.

Reference code:


<!DOCTYPE html>
<html>
<head>
    <title>Visite interactive</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #000; }
        canvas { display: block; cursor: crosshair; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="info">Cliquez sur les objets pour les activer !</div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
    <script>
        // Le code JavaScript sera ici
    </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(0x000020);
document.body.appendChild(renderer.domElement);

// Éclairage
const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 10, 5);
scene.add(directionalLight);

// Variables pour l'interaction
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const interactiveObjects = [];

// Création d'objets interactifs
const objects = [];

// Porte (rectangle qui s'ouvre)
const doorGeometry = new THREE.BoxGeometry(2, 4, 0.2);
const doorMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(-4, 0, 0);
door.userData = { type: 'door', isOpen: false, originalRotation: 0 };
scene.add(door);
interactiveObjects.push(door);
objects.push(door);

// Fenêtre (change de couleur)
const windowGeometry = new THREE.BoxGeometry(3, 2, 0.1);
const windowMaterial = new THREE.MeshLambertMaterial({ color: 0x87CEEB });
const window = new THREE.Mesh(windowGeometry, windowMaterial);
window.position.set(0, 2, -5);
window.userData = { type: 'window', isLit: false };
scene.add(window);
interactiveObjects.push(window);
objects.push(window);

// Lampe (sphère qui clignote)
const lampGeometry = new THREE.SphereGeometry(0.5, 16, 8);
const lampMaterial = new THREE.MeshPhongMaterial({ 
    color: 0xffff00,
    emissive: 0x222200
});
const lamp = new THREE.Mesh(lampGeometry, lampMaterial);
lamp.position.set(4, 3, 2);
lamp.userData = { type: 'lamp', isOn: false, originalEmissive: 0x222200 };
scene.add(lamp);
interactiveObjects.push(lamp);
objects.push(lamp);

// Sol
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -2;
scene.add(floor);

// Position de la caméra
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

// Gestionnaire de clic
function onMouseClick(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(interactiveObjects);

    if (intersects.length > 0) {
        const object = intersects[0].object;
        
        switch(object.userData.type) {
            case 'door':
                object.userData.isOpen = !object.userData.isOpen;
                break;
            case 'window':
                object.userData.isLit = !object.userData.isLit;
                object.material.color.setHex(object.userData.isLit ? 0xFFFFAA : 0x87CEEB);
                break;
            case 'lamp':
                object.userData.isOn = !object.userData.isOn;
                object.material.emissive.setHex(object.userData.isOn ? 0xffff00 : 0x222200);
                break;
        }
    }
}

window.addEventListener('click', onMouseClick, false);

// Variables d'animation
let time = 0;

// Boucle d'animation
function animate() {
    requestAnimationFrame(animate);
    time += 0.01;

    // Animation de la porte
    objects.forEach(object => {
        if (object.userData.type === 'door') {
            const targetRotation = object.userData.isOpen ? -Math.PI / 2 : 0;
            object.rotation.y += (targetRotation - object.rotation.y) * 0.1;
        }
    });

    // Rotation lente de la caméra
    camera.position.x = Math.cos(time * 0.1) * 10;
    camera.position.z = Math.sin(time * 0.1) * 10;
    camera.lookAt(0, 0, 0);

    renderer.render(scene, camera);
}

animate();


Result
● Ready
Monaco Editor v0.45

Intégration des concepts

Un projet complet en Three.js combine tous les éléments que nous avons découverts : géométries variées, matériaux réalistes, éclairage soigné, animations fluides et interactions intuitives. Pour créer une visualisation architecturale convaincante, il faut penser comme un architecte ET comme un développeur. Chaque élément doit avoir un but : les textures doivent être cohérentes, l’éclairage doit créer l’ambiance désirée, et les interactions doivent guider naturellement l’utilisateur dans l’exploration de l’espace.

Optimisation et performance

Une visualisation architecturale complexe peut rapidement devenir gourmande en ressources. Il est crucial d’optimiser votre scène : utilisez des géométries simples quand c’est possible, réduisez le nombre de sources lumineuses, optimisez les textures, et employez des techniques comme le « level of detail » (LOD) qui affiche moins de détails pour les objets éloignés. Une expérience fluide à 60 FPS vaut mieux qu’une scène magnifique mais saccadée.

Key point : Un bon projet Three.js équilibre qualité visuelle et performance en optimisant chaque élément selon son importance dans l’expérience utilisateur.

Key points to remember

Un projet complet nécessite d’intégrer harmonieusement tous les concepts Three.js tout en optimisant les performances pour une expérience fluide.

🎯 Mini-exercice : Maison moderne interactive

Créez une visualisation complète d’une maison moderne avec éclairage jour/nuit, matériaux variés et contrôles de caméra.

Reference code:


<!DOCTYPE html>
<html>
<head>
    <title>Maison moderne interactive</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #87CEEB; font-family: Arial; }
        canvas { display: block; }
        #controls {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 15px;
            border-radius: 8px;
            min-width: 200px;
        }
        .control-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
        }
        input[type="range"] {
            width: 100%;
        }
        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
        }
        button:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <div id="controls">
        <div class="control-group">
            <label>Heure de la journée</label>
            <input type="range" id="timeSlider" min="0" max="24" value="12" step="0.1">
            <span id="timeDisplay">12:00</span>
        </div>
        <div class="control-group">
            <button id="autoRotate">Auto Rotation</button>
            <button id="resetView">Reset Vue</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150/build/three.min.js"></script>
    <script>
        // Le code JavaScript sera ici
    </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.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// Variables de contrôle
let autoRotateEnabled = false;
let currentTime = 12;

// Éclairage principal (soleil)
const sunLight = new THREE.DirectionalLight(0xffffff, 1);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 2048;
sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.camera.near = 0.5;
sunLight.shadow.camera.far = 50;
sunLight.shadow.camera.left = -10;
sunLight.shadow.camera.right = 10;
sunLight.shadow.camera.top = 10;
sunLight.shadow.camera.bottom = -10;
scene.add(sunLight);

// Éclairage ambiant
const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
scene.add(ambientLight);

// Création de la maison moderne
const house = new THREE.Group();

// Sol/terrain
const groundGeometry = new THREE.PlaneGeometry(30, 30);
const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x5d8a3a });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

// Structure principale
const mainStructure = new THREE.BoxGeometry(8, 4, 6);
const mainMaterial = new THREE.MeshLambertMaterial({ color: 0xf5f5f5 });
const mainBuilding = new THREE.Mesh(mainStructure, mainMaterial);
mainBuilding.position.set(0, 2, 0);
mainBuilding.castShadow = true;
mainBuilding.receiveShadow = true;
house.add(mainBuilding);

// Toit moderne (plat avec légère inclinaison)
const roofGeometry = new THREE.BoxGeometry(8.5, 0.3, 6.5);
const roofMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.set(0, 4.3, 0);
roof.castShadow = true;
house.add(roof);

// Extension latérale
const extensionGeometry = new THREE.BoxGeometry(4, 3, 4);
const extension = new THREE.Mesh(extensionGeometry, mainMaterial);
extension.position.set(6, 1.5, 2);
extension.castShadow = true;
extension.receiveShadow = true;
house.add(extension);

// Fenêtres principales
const windowGeometry = new THREE.PlaneGeometry(1.5, 2);
const windowMaterial = new THREE.MeshPhongMaterial({ 
    color: 0x87ceeb, 
    transparent: true, 
    opacity: 0.7,
    shininess: 100
});

// Fenêtres façade
for(let i = 0; i < 3; i++) {
    const window = new THREE.Mesh(windowGeometry, windowMaterial);
    window.position.set(-2.5 + i * 2.5, 2, 3.01);
    house.add(window);
}

// Porte d'entrée
const doorGeometry = new THREE.PlaneGeometry(1.2, 2.5);
const doorMaterial = new THREE.MeshLambertMaterial({ color: 0x4a4a4a });
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(2, 1.25, 3.01);
house.add(door);

// Cheminée moderne
const chimneyGeometry = new THREE.BoxGeometry(1, 2, 1);
const chimneyMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
const chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
chimney.position.set(-2, 5.5, -1);
chimney.castShadow = true;
house.add(chimney);

// Éclairage intérieur (fenêtres)
const interiorLights = [];
for(let i = 0; i < 3; i++) {
    const light = new THREE.PointLight(0xffaa00, 0, 10);
    light.position.set(-2.5 + i * 2.5, 2, 2.5);
    house.add(light);
    interiorLights.push(light);
}

scene.add(house);

// Position initiale de la caméra
camera.position.set(15, 8, 15);
camera.lookAt(0, 2, 0);

// Variables pour la rotation automatique
let cameraAngle = 0;
const cameraRadius = 20;

// Fonction pour mettre à jour l'éclairage selon l'heure
function updateLighting(timeOfDay) {
    // Position du soleil selon l'heure
    const sunAngle = (timeOfDay - 6) * Math.PI / 12; // 6h = lever, 18h = coucher
    sunLight.position.set(
        Math.cos(sunAngle) * 20,
        Math.sin(sunAngle) * 20,
        10
    );

    // Intensité et couleur selon l'heure
    let intensity, color, ambientColor;
    
    if (timeOfDay >= 6 && timeOfDay <= 18) {
        // Jour
        intensity = Math.max(0.3, Math.sin(sunAngle) * 0.8);
        color = 0xffffff;
        ambientColor = 0x404040;
        
        // Éteindre les lumières intérieures
        interiorLights.forEach(light => light.intensity = 0);
    } else {
        // Nuit
        intensity = 0.1;
        color = 0x4444ff;
        ambientColor = 0x222222;
        
        // Allumer les lumières intérieures
        interiorLights.forEach(light => light.intensity = 0.5);
    }

    sunLight.intensity = intensity;
    sunLight.color.setHex(color);
    ambientLight.color.setHex(ambientColor);

    // Couleur du ciel
    if (timeOfDay >= 5 && timeOfDay <= 19) {
        const skyIntensity = Math.max(0.2, Math.sin((timeOfDay - 5) * Math.PI / 14));
        const skyColor = new THREE.Color().setHSL(0.6, 0.8, 0.3 + skyIntensity * 0.4);
        renderer.setClearColor(skyColor);
    } else {
        renderer.setClearColor(0x000011);
    }
}

// Contrôles
document.getElementById('timeSlider').addEventListener('input', function(e) {
    currentTime = parseFloat(e.target.value);
    updateLighting(currentTime);
    
    const hours = Math.floor(currentTime);
    const minutes = Math.floor((currentTime - hours) * 60);
    document.getElementById('timeDisplay').textContent = 
        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
});

document.getElementById('autoRotate').addEventListener('click', function() {
    autoRotateEnabled = !autoRotateEnabled;
    this.textContent = autoRotateEnabled ? 'Stop Rotation' : 'Auto Rotation';
});

document.getElementById('resetView').addEventListener('click', function() {
    camera.position.set(15, 8, 15);
    camera.lookAt(0, 2, 0);
    cameraAngle = 0;
});

// Contrôles souris simples
let mouseX = 0;
let mouseY = 0;
let isMouseDown = false;

document.addEventListener('mousedown', () => isMouseDown = true);
document.addEventListener('mouseup', () => isMouseDown = false);
document.addEventListener('mousemove', (event) => {
    if (isMouseDown) {
        mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        
        camera.position.x = mouseX * 20;
        camera.position.y = 5 + mouseY * 10;
        camera.lookAt(0, 2, 0);
    }
});

// Initialisation
updateLighting(currentTime);

// Boucle d'animation
function animate() {
    requestAnimationFrame(animate);

    // Rotation automatique de la caméra
    if (autoRotateEnabled) {
        cameraAngle += 0.005;
        camera.position.x = Math.cos(cameraAngle) * cameraRadius;
        camera.position.z = Math.sin(cameraAngle) * cameraRadius;
        camera.lookAt(0, 2, 0);
    }

    renderer.render(scene, camera);
}

animate();


Result
● Ready
Monaco Editor v0.45

Summary

Key points to remember

  • Les trois piliers : Toute application Three.js repose sur une scène, une caméra et un renderer
  • Géométries modulaires : Les formes de base se combinent pour créer des structures architecturales complexes
  • Matériaux et éclairage : L’association judicieuse de matériaux et de sources lumineuses crée des rendus réalistes
  • Interactivité fluide : RequestAnimationFrame et le raycasting permettent des animations et interactions naturelles
  • Optimisation nécessaire : Équilibrer qualité visuelle et performance pour une expérience utilisateur optimale

Sources

To deepen your knowledge:

Validate your knowledge

Test your understanding with this 10-question quiz:

Loading quiz...

See also

Bonus Module
Learn how to generate abstract and geometric wallpapers
February 14, 2026
Bonus Module
Create your own UX/UI design tools using AI
January 27, 2026