DUFOUR/INFOS.md

@@ -35,7 +35,7 @@ https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.htm
 *(ajouter X pour cocher)*
 - [X] Esthetisme
 - [x] Mise en page de la page web
-- [ ] Paragraphe(s) d'explications techniques
+- [X] Paragraphe(s) d'explications techniques
 - [ ] Légèreté du dossier (<2Mo)
 - [X] Géométrie
 - [X] Couleur
@@ -47,9 +47,7 @@ https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.htm
 - [X] Effet miroir
 - [X] Texture classique
 - [X] Texture avec transparence
-- [ ] Sprites
-- [ ] Environment map
+- [X] Sprites
 - [ ] Skybox
-- [ ] specular maps
 - [X] normal maps
 - [X] Interaction par GUI

DUFOUR/chambre.js

@@ -14,18 +14,17 @@ var clock = new THREE.Clock();
 var transparentCube;
 var light1, light2;
 var params = {
-    ambientLightIntensity: 0.2,
+    ambientLightIntensity: 3,
     light1Intensity: 4,
-    light2Intensity: 3,
     fogDensity: 0.001,
-    enableShadows: true,
+    enableShadows: false,
     enableFog: true,
     cameraX: -400,
     cameraY: 150,
     cameraZ: -20,
-    light1X: 200,
-    light1Y: 400,
-    light1Z: 400,
+    light1X: 0,
+    light1Y: 300,
+    light1Z: 0,
     shadowBias: -0.0005,
     shadowRadius: 2,
     showHelpers: false
@@ -37,7 +36,7 @@ function fillScene() {
     scene.fog = new THREE.FogExp2(0xB0BEC5, params.fogDensity);
 
     // LIGHTS avec configuration précise des ombres
-    const ambientLight = new THREE.AmbientLight(0x444444, params.ambientLightIntensity);
+    const ambientLight = new THREE.AmbientLight(0x888888, params.ambientLightIntensity);
     scene.add(ambientLight);
 
     // Lumière directionnelle principale pour les ombres
@@ -60,11 +59,7 @@ function fillScene() {
     light1.shadow.camera.top = 500;
     light1.shadow.camera.bottom = -500;
 
-    // Helper pour visualiser la zone d'ombre
-    const helper1 = new THREE.CameraHelper(light1.shadow.camera);
-    helper1.visible = params.showHelpers;
-    scene.add(helper1);
-
+   
 
     // Coordinates.drawGround({ size: 800 });
 
@@ -90,7 +85,8 @@ function fillScene() {
 
     // Murs
     var wallTexture = new THREE.TextureLoader().load('elements/mur_bleu.jpg');
-    var wallMaterial = new THREE.MeshStandardMaterial({ map: wallTexture });
+    var wallMaterial = new THREE.MeshStandardMaterial({ map: wallTexture
+    });
 
     var backWall = new THREE.Mesh(new THREE.PlaneGeometry(400, 300), wallMaterial);
     backWall.position.set(0, 50, -200);
@@ -248,7 +244,7 @@ objLoader.load('elements/wooden_bed.obj', function (object) {
                 teapot.position.set(100, 5, -110); // Même position X/Z que la table mais plus haut en Y
                 teapot.scale.set(10, 10, 10); // Échelle appropriée pour la théière
                 teapot.rotation.y = Math.PI / 4; // Même rotation que la table
-                
+                enableShadows(teapot);
                 // Ajouter la théière à la scène
                 scene.add(teapot);
 
@@ -260,13 +256,14 @@ objLoader.load('elements/wooden_bed.obj', function (object) {
                     vase.traverse(function (child) {
                         if (child instanceof THREE.Mesh) {
                             child.material = new THREE.MeshStandardMaterial({
-                                color: 0x0000FF, // Couleur orange-rouge
+                                color: 0x0000FF,
                                 roughness: 0.1,
                                 metalness: 0.2
                             });
                         }
                     });
-
+                    
+                    enableShadows(vase);
                     // Positionner le vase à côté de la théière sur la table
                     vase.position.set(80, -16, -130); // Position décalée par rapport à la théière
                     vase.scale.set(1, 1, 1); // Ajuster l'échelle selon la taille du modèle
@@ -292,7 +289,7 @@ objLoader.load('elements/wooden_bed.obj', function (object) {
                     // Positionner le verre à côté du vase sur la table
                     glass.position.set(65, -13, -130); // Ajusté pour être à côté du vase
                     glass.scale.set(1, 1, 1);
-                    
+                    enableShadows(glass);
                     // Ajouter le verre à la scène
                     scene.add(glass);
 
@@ -323,10 +320,28 @@ objLoader.load('elements/wooden_bed.obj', function (object) {
                         candle2.position.set(110, -16, -100); // Deuxième emplacement
                         candle2.scale.set(3, 3, 3);
                         candle2.rotation.y = -Math.PI / 8; // Rotation différente
-                        
+                        enableShadows(candle1);
+                        enableShadows(candle2);
                         // Ajouter les bougies à la scène
                         scene.add(candle1);
                         scene.add(candle2);
+
+                        // *** Ajouter des sprites de flamme au-dessus des bougies ***
+                        const flame1 = createFlameSprite(110, 8, -90);
+                        const flame2 = createFlameSprite(110, 8, -100);
+                        scene.add(flame1);
+                        scene.add(flame2);
+
+                        // Animation des flammes
+                        function animateFlames() {
+                            // Variation légère de la taille pour simuler le mouvement
+                            flame1.scale.x = 5 + Math.sin(Date.now() * 0.01) * 0.5;
+                            flame1.scale.y = 8 + Math.sin(Date.now() * 0.01) * 0.5;
+                            flame2.scale.x = 5 + Math.sin(Date.now() * 0.01 + 1.5) * 0.5;
+                            flame2.scale.y = 8 + Math.sin(Date.now() * 0.01 + 1.5) * 0.5;
+                            requestAnimationFrame(animateFlames);
+                        }
+                        animateFlames();
                     });                    
                 });
             });
@@ -359,41 +374,107 @@ objLoader.load('elements/wooden_bed.obj', function (object) {
     door2.receiveShadow = true; // Activer la réception d'ombre
     scene.add(door2);
 
-    // Premier tableau (celui d'origine)
-    const painting1 = createWallPainting(35, 25, 60, 80, 198, -Math.PI);
+    // droite 2
+    const painting1 = createWallPainting(35, 25, 60, 80, 198, -Math.PI, 0x427F22);
     scene.add(painting1);
 
-    // Deuxième tableau (duplicata à côté)
-    const painting2 = createWallPainting(35, 25, 120, 80, 198, -Math.PI);
+    // droite 1
+    const painting2 = createWallPainting(35, 25, 120, 80, 198, -Math.PI, 0x659A87);
     scene.add(painting2);
 
-    // Troisième tableau (plus large en haut)
-    const painting3 = createWallPainting(70, 40, 198, 100, 100, -Math.PI/2);
+    // au dessus lit
+    const painting3 = createWallPainting(70, 40, 198, 100, 100, -Math.PI/2, 0xf1aa9b);
     scene.add(painting3);
 
-    // Quatrième tableau (sur le mur de gauche)
-    const painting4 = createWallPainting(20, 70, 198, 80, -160, -Math.PI/2);
+    // gauche fenetre
+    const painting4 = createWallPainting(20, 70, 198, 80, -160, -Math.PI/2, 0xCDBC9D);
     scene.add(painting4);
+
+    //droite 3
+    const painting5 = createWallPainting(50, 20, 60, 20, 198, -Math.PI, 0xE3CF8F, false);
+    scene.add(painting5);
+
+    //droite 4
+    const painting6 = createWallPainting(20, 30, 120, 20, 198, -Math.PI, 0xE3CF8F, false);
+    scene.add(painting6);
+
+    // porte manteau
+    const painting7 = createWallPainting(150, 10, 198, 40, 120, -Math.PI/2, 0x8B4513, false);
+    scene.add(painting7);
+
+   // Remplacer le cube blanc par un cube avec specular maps
+    var cubeGeometry = new THREE.BoxGeometry(30, 200, 30); // Dimensions du cube long avec plus de profondeur
+
+    // Charger les textures pour le cube
+    const marbleTexture = new THREE.TextureLoader().load('elements/Presentation1.jpg'); // Utiliser une texture de marbre
+    const marbleSpecularMap = new THREE.TextureLoader().load('elements/noisy-background.jpg'); // Carte spéculaire
+    const marbleNormalMap = new THREE.TextureLoader().load('elements/specular.jpg'); // Carte normale
+
+    // Créer un matériau avec specular maps
+    var cubeMaterial = new THREE.MeshPhongMaterial({ 
+        map: marbleTexture,             // Texture diffuse
+        specularMap: marbleSpecularMap, // *** Specular map appliquée ici ***
+        specular: 0xffffff,             // Couleur spéculaire 
+        shininess: 100,                  // Brillance
+        normalMap: marbleNormalMap,     // Normal map
+        normalScale: new THREE.Vector2(1, 1)
+    });
+
+    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+    cube.position.set(110, 20, -199); 
+    cube.rotation.y = Math.PI/4; // Orientation à 45° vers la droite
+    enableShadows(cube);
+    scene.add(cube);
+
+
+   // Remplacer votre fonction createFlameSprite par celle-ci
+    function createFlameSprite(posX, posY, posZ) {
+        // Création d'une flamme avec géométrie au lieu d'un sprite
+        const flameGeometry = new THREE.ConeGeometry(1, 1, 5);
+        const flameMaterial = new THREE.MeshBasicMaterial({
+            color: 0xffaa00,
+            transparent: true,
+            opacity: 0.8,
+            emissive: 0xffaa00,
+            emissiveIntensity: 1.0
+        });
+        
+        const flame = new THREE.Mesh(flameGeometry, flameMaterial);
+        flame.position.set(posX, posY, posZ);
+        
+        // Ajouter une lumière ponctuelle plus intense
+        const flameLight = new THREE.PointLight(0xff9900, 2, 50);
+        flameLight.position.copy(flame.position);
+        scene.add(flameLight);
+        
+        return flame;
+    }
 }
 
-// Ajouter un tableau suspendu au mur
-function createWallPainting(width, height, posX, posY, posZ, rotY) {
+// Fonction améliorée pour créer des tableaux avec couleurs personnalisables
+function createWallPainting(width, height, posX, posY, posZ, rotY, color, withRope = true) {
     // Groupe contenant le tableau et la corde
     const paintingGroup = new THREE.Group();
     
-    // Créer le cadre du tableau
+    // Créer le cadre du tableau - toujours en bois
     const frameGeometry = new THREE.BoxGeometry(width + 5, height + 5, 2);
-    const frameTexture = new THREE.TextureLoader().load('elements/sol_boiserie.jpg');
     const frameMaterial = new THREE.MeshStandardMaterial({ 
-        map: frameTexture,
-        color: 0x8B4513
+        color: 0x8B4513, // Couleur bois standard
+        roughness: 0.7,
+        metalness: 0.2
     });
     const frame = new THREE.Mesh(frameGeometry, frameMaterial);
     
-    // Créer la toile du tableau (légèrement devant le cadre)
+    // Créer la toile du tableau avec la couleur passée en paramètre
     const canvasGeometry = new THREE.PlaneGeometry(width, height);
-     const canvasTexture = new THREE.TextureLoader().load('elements/sol_boiserie.jpg');
-    const canvasMaterial = new THREE.MeshStandardMaterial({ map: canvasTexture });
+    const canvasMaterial = new THREE.MeshStandardMaterial({ 
+        color: color,       // Utilise le paramètre couleur
+        roughness: 0.9,     // Surface mate comme une toile
+        metalness: 0.0,     // Pas de métallicité pour une peinture
+        emissive: color,    // Légère émission pour donner plus de profondeur
+        emissiveIntensity: 0.1
+    });
+    
     const canvas = new THREE.Mesh(canvasGeometry, canvasMaterial);
     canvas.position.z = 1.1; // Légèrement devant le cadre
     
@@ -401,23 +482,33 @@ function createWallPainting(width, height, posX, posY, posZ, rotY) {
     paintingGroup.add(frame);
     paintingGroup.add(canvas);
     
-    // Créer la corde pour suspendre le tableau (en forme de toit/triangle)
-    const ropeGeometry = new THREE.BufferGeometry();
-    const ropePoints = [
-        new THREE.Vector3(-width/2 + 5, height/2, 0),    // Point gauche du tableau
-        new THREE.Vector3(0, height/2 + 10, 0),          // Point haut de la corde (sommet du toit)
-        new THREE.Vector3(width/2 - 5, height/2, 0)      // Point droit du tableau
-    ];
-    ropeGeometry.setFromPoints(ropePoints);
-    const ropeMaterial = new THREE.LineBasicMaterial({ color: 0x5A3A22, linewidth: 2 });
-    const rope = new THREE.Line(ropeGeometry, ropeMaterial);
-    
-    // Ajouter la corde au groupe
-    paintingGroup.add(rope);
+    if (withRope) {
+        // Créer la corde pour suspendre le tableau
+        const ropeGeometry = new THREE.BufferGeometry();
+        const ropePoints = [
+            new THREE.Vector3(-width/2 + 5, height/2, 0),
+            new THREE.Vector3(0, height/2 + 10, 0),
+            new THREE.Vector3(width/2 - 5, height/2, 0)
+        ];
+        ropeGeometry.setFromPoints(ropePoints);
+        const ropeMaterial = new THREE.LineBasicMaterial({ color: 0x5A3A22, linewidth: 2 });
+        const rope = new THREE.Line(ropeGeometry, ropeMaterial);
+        
+        // Ajouter la corde au groupe
+        paintingGroup.add(rope);
+    }
     
     // Positionner le tableau sur le mur
     paintingGroup.position.set(posX, posY, posZ);
-    paintingGroup.rotation.y = rotY || 0; // Rotation optionnelle
+    paintingGroup.rotation.y = rotY || 0;
+    
+    // Activer les ombres
+    paintingGroup.traverse(function(child) {
+        if (child instanceof THREE.Mesh) {
+            child.castShadow = true;
+            child.receiveShadow = true;
+        }
+    });
     
     return paintingGroup;
 }
@@ -437,7 +528,7 @@ function enableShadows(object) {
 function createGUI() {
     const gui = new GUI({ title: 'Contrôles' });
     // Ajouter un dossier pour les positions des lumières
-    const light1PosFolder = gui.addFolder('Position Lumière 1');
+    const light1PosFolder = gui.addFolder('Lumières');
     light1PosFolder.add(params, 'light1X', -600, 600)
         .name('X')
         .onChange(value => {
@@ -472,27 +563,20 @@ function createGUI() {
             });
         });
     
-    // Dossier pour les lumières
-    const lightsFolder = gui.addFolder('Lumières');
        
-    lightsFolder.add(params, 'light1Intensity', 0, 10)
-        .name('Intensité lumière 1')
+    light1PosFolder.add(params, 'light1Intensity', 0, 10)
+        .name('Intensité')
         .onChange(value => {
             light1.intensity = value;
         });
         
-    lightsFolder.add(params, 'light2Intensity', 0, 10)
-        .name('Intensité lumière 2')
-        .onChange(value => {
-            light2.intensity = value;
-        });
-    
     // Dossier pour les effets
     const effectsFolder = gui.addFolder('Effets');
     effectsFolder.add(params, 'enableShadows')
         .name('Ombres')
         .onChange(value => {
             renderer.shadowMap.enabled = value;
+
             light1.castShadow = value;
             light2.castShadow = value;
         });
@@ -585,13 +669,6 @@ function animate() {
     render();
 }
 
-// function render() {
-//     var delta = clock.getDelta();
-//     cameraControls.update();
-//     renderer.render(window.scene, camera);
-// }
-
-
 function render() {
     var delta = clock.getDelta();
     cameraControls.update();

DUFOUR/index.html

@@ -61,6 +61,7 @@
                     Huile sur toile</p>
                 <img src="img.jpg" alt="La Chambre de Van Gogh - Peinture originale">
                 <p>DE RYCKE Leanne <br>DUFOUR Louise <br><br>Reproduction 3D WEBGL <br>BUT2 INFO 2025</p>
+                <p>Dans cette implémentation, nous avons intégré plusieurs techniques graphiques avancées pour améliorer le rendu visuel de la scène 3D. Une specular map a été appliquée au chiffon, améliorant le réalisme des reflets lumineux en fonction de la texture de surface. Nous avons également configuré une interface gui permettant de s'integrer totalement dans la pièce. Enfin, des sprites ou éléments géométriques simples ont été utilisés pour représenter les flammes des bougies, créant un effet lumineux dynamique grâce à des points de lumière et des animations subtiles.</p>
             </div>
             
             <!-- Scène WebGL à droite -->