diff --git a/DUFOUR/INFOS.md b/DUFOUR/INFOS.md
index c3a874434407ea0bb03bfe49c72acf44e659dc21..b0511e072586b26edbd5fe78a2c46b775f09192b 100644
--- a/DUFOUR/INFOS.md
+++ b/DUFOUR/INFOS.md
@@ -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
diff --git a/DUFOUR/chambre.js b/DUFOUR/chambre.js
index 156255b5330b3c8b037531e7568a1d7980d7aede..547a5ad72a4db5a4e83c04485b71ad17713823c6 100644
--- a/DUFOUR/chambre.js
+++ b/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();
diff --git a/DUFOUR/elements/Presentation1.jpg b/DUFOUR/elements/Presentation1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e4ecbca0724cbc19359d4e3f95ac411aef96a83c
Binary files /dev/null and b/DUFOUR/elements/Presentation1.jpg differ
diff --git a/DUFOUR/elements/mur_bleu_fonce.jpg b/DUFOUR/elements/mur_bleu_fonce.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d3bfa80de8ec856ca3b2f4936d492c9b61dd4f8c
Binary files /dev/null and b/DUFOUR/elements/mur_bleu_fonce.jpg differ
diff --git a/DUFOUR/elements/noisy-background.jpg b/DUFOUR/elements/noisy-background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9b46c75ce365caec3258b4788d5d46222be12616
Binary files /dev/null and b/DUFOUR/elements/noisy-background.jpg differ
diff --git a/DUFOUR/elements/specular.jpg b/DUFOUR/elements/specular.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7404f606138882618627ab4b23272fec2a251167
Binary files /dev/null and b/DUFOUR/elements/specular.jpg differ