Update file script.js

RIFI/script.js

@@ -2,6 +2,8 @@
 
 import * as THREE from "three";
 import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import {dat} from './lib/dat.gui.min.js';
 
 
 var camera, scene, renderer;
@@ -11,7 +13,27 @@ var skull;
 var candle, candleHolder, flame; 
 var backgroundMesh; 
 
-import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+var params = {
+
+    flickerSpeed: 2.0,
+    flickerIntensity: 0.12,
+    
+    candleLightIntensity: 2.2,
+    candleLightDistance: 400,
+    ambientLightIntensity: 0.22,
+    fogEnabled: true,
+    fogColor: 0x000000,
+    fogNear: 100,
+    fogFar: 1000,
+    fogDensity: 0.015,
+    
+  
+    showSkull: true,
+    showFlower: true
+};
+
+import {Coordinates} from './lib/Coordinates.js';
 
 function fillScene() {
     scene = new THREE.Scene();
@@ -33,7 +55,7 @@ function fillScene() {
 
     const cubeTextureLoader = new THREE.CubeTextureLoader();
 
-    var ambientLight = new THREE.AmbientLight(0x222222);
+    var ambientLight = new THREE.AmbientLight(0x222222, params.ambientLightIntensity);
     scene.add(ambientLight);
 
     createTable();
@@ -67,6 +89,16 @@ function createGradientBackground() {
     scene.add(backgroundMesh);
 }
 
+function setupFog() {
+    if (params.fogEnabled) {
+        
+        scene.fog = new THREE.Fog(params.fogColor, params.fogNear, params.fogFar);
+        
+    } else {
+        scene.fog = null;
+    }
+}
+
 function createTable() {
    
     const tableGroup = new THREE.Group();
@@ -216,7 +248,10 @@ function loadFlower() {
             flower.scale.set(4, 4, 6); 
             flower.position.set(160, 3, 120); 
 
-            flower.rotation.set(-Math.PI * 0.65, -Math.PI * 0.44, Math.PI * 0.05); // rotation.z pour l'inclinaison horizontale
+            flower.rotation.set(-Math.PI * 0.65, -Math.PI * 0.44, Math.PI * 0.05); 
+
+
+            flower.name = 'flower';
 
             const gradientTexture = createGradientTexture('#ff007f', '#ff99cc');
 
@@ -284,7 +319,7 @@ function createEnhancedCandle() {
         envMapIntensity: 1   
     });
     
-    // Variante plus foncée et plus détaillée
+    
     const holderDarkMaterial = new THREE.MeshStandardMaterial({
         color: 0xFFD700,     
         roughness: 0.25,    
@@ -314,7 +349,6 @@ function createEnhancedCandle() {
     decor.castShadow = true; 
     decor.receiveShadow = true;  
     
-    // Décoration supplémentaire au milieu du stem
     const middleDecor = new THREE.Mesh(smallDecorGeometry, holderMaterial);
     middleDecor.position.y = holderBaseHeight + holderStemHeight / 2;
     middleDecor.rotation.x = Math.PI / 2;
@@ -326,7 +360,7 @@ function createEnhancedCandle() {
     const candleHeight = 20; 
     const candleGeometry = new THREE.CylinderGeometry(candleRadius * 0.9, candleRadius, candleHeight, 32);
     
-    // Matériau de cire pour la bougie plus réaliste
+  
     const candleMaterial = new THREE.MeshStandardMaterial({
         color: 0xf3e5ab,
         roughness: 0.8,
@@ -347,11 +381,11 @@ function createEnhancedCandle() {
     });
     
     const meltedWax = new THREE.Mesh(meltedWaxGeometry, meltedWaxMaterial);
-    meltedWax.castShadow = true;  // Permet à la cire fondue de projeter une ombre
-    meltedWax.receiveShadow = true;  // Permet à la cire fondue de recevoir une ombre
+    meltedWax.castShadow = true; 
+    meltedWax.receiveShadow = true;  
     
     candle = new THREE.Mesh(candleGeometry, candleMaterial);
-    candle.position.y = holderBaseHeight + holderStemHeight + holderTopHeight + candleHeight / 2 - 2; // Ajusté pour s'enfoncer légèrement
+    candle.position.y = holderBaseHeight + holderStemHeight + holderTopHeight + candleHeight / 2 - 2; 
     candle.castShadow = true;
     candle.receiveShadow = true;  
     candle.add(meltedWax);
@@ -380,7 +414,7 @@ function createEnhancedCandle() {
     const innerFlameGeometry = new THREE.ConeGeometry(innerFlameRadius, innerFlameHeight, 16, 5, true);
     
     const innerFlameMaterial = new THREE.MeshBasicMaterial({
-        color: 0xffffff,      // Blanc plus pur au centre
+        color: 0xffffff,     
         transparent: true,
         opacity: 0.95,
         side: THREE.DoubleSide,
@@ -422,7 +456,7 @@ function createEnhancedCandle() {
     flame = new THREE.Mesh(outerFlameGeometry, outerFlameMaterial);
     flame.position.y = holderBaseHeight + holderStemHeight + holderTopHeight + candleHeight + wickHeight + outerFlameHeight / 2 - 2;
     
-    // Ajout d'une flamme externe très subtile pour un effet 
+    // Ajout d'une flamme externe 
     const subtleFlameHeight = 15;
     const subtleFlameRadius = 4;
     const subtleFlameGeometry = new THREE.ConeGeometry(subtleFlameRadius, subtleFlameHeight, 16, 4, true);
@@ -444,7 +478,7 @@ function createEnhancedCandle() {
     flameLight.power = 120; 
     flameLight.castShadow = true; 
     
-    // Configuration des paramètres d'ombre pour une meilleure qualité
+   
     flameLight.shadow.mapSize.width = 1024;
     flameLight.shadow.mapSize.height = 1024;
     flameLight.shadow.camera.near = 0.1;
@@ -452,13 +486,13 @@ function createEnhancedCandle() {
     flameLight.shadow.bias = -0.002;  
     flameLight.shadow.radius = 3;  
     
-    // Seconde lumière pour effet réaliste
+    // Seconde lumière 
     const innerLight = new THREE.PointLight(0xffffcc, 1.2, 150);
     innerLight.position.copy(innerFlame.position);
     innerLight.power = 70;
     innerLight.castShadow = false;  
     
-    // Troisième lumière très subtile pour l'ambiance
+    // Troisième lumière 
     const ambientFlameLight = new THREE.PointLight(0xff5500, 0.6, 600);
     ambientFlameLight.position.set(flame.position.x, flame.position.y - 5, flame.position.z);
     ambientFlameLight.power = 40;
@@ -547,10 +581,9 @@ function createEnhancedCandle() {
 function animateFlame() {
     if (flame) {
         const time = clock.getElapsedTime();
-        
-        // Paramètres pour un mouvement fluide mais naturel
-        const flickerSpeed = 2.0;
-        const flickerIntensity = 0.12;
+    
+        const flickerSpeed = params.flickerSpeed;
+        const flickerIntensity = params.flickerIntensity;
         const swaySpeed = 1.0;
         const swayAmount = 0.5;
         
@@ -647,10 +680,24 @@ function animateFlame() {
         
         
         updateBackgroundWithCandleLight(time, heightVariation, swayX, swayZ);
+
+
+        if (scene.fog && params.fogEnabled) {
+            const fogFluctuation = 0.95 + flickerIntensity * Math.sin(time * flickerSpeed * 0.5);
+            
+        
+            if (scene.fog.isFog) { 
+                scene.fog.near = params.fogNear * fogFluctuation;
+                scene.fog.far = params.fogFar * fogFluctuation;
+            } else if (scene.fog.isFogExp2) { 
+                scene.fog.density = params.fogDensity / fogFluctuation;
+            }
+        }
     }
 }
 
 
+
 function updateBackgroundWithCandleLight(time, flickerFactor, swayX, swayZ) {
     if (backgroundMesh && backgroundMesh.material.map) {
         const canvas = document.createElement('canvas');
@@ -723,6 +770,74 @@ function animate() {
     renderer.render(scene, camera);
 }
 
+function initGUI() {
+    var gui = new dat.GUI();
+    
+    // Dossier pour les paramètres de la flamme
+    var flameFolder = gui.addFolder('Flamme');
+    flameFolder.add(params, 'flickerSpeed', 0.5, 5.0).name('Vitesse vacillement');
+    flameFolder.add(params, 'flickerIntensity', 0.01, 0.3).name('Intensité vacillement');
+    flameFolder.open();
+    
+    // Dossier pour les paramètres d'éclairage
+    var lightFolder = gui.addFolder('Éclairage');
+    lightFolder.add(params, 'candleLightIntensity', 0.5, 5.0).name('Intensité bougie').onChange(function(value) {
+        scene.traverse(function(object) {
+            if (object.isPointLight && object.color.getHex() === 0xff9933) {
+                object.intensity = value;
+            }
+        });
+    });
+    lightFolder.add(params, 'candleLightDistance', 100, 1000).name('Portée lumière').onChange(function(value) {
+        scene.traverse(function(object) {
+            if (object.isPointLight && object.color.getHex() === 0xff9933) {
+                object.distance = value;
+            }
+        });
+    });
+    lightFolder.add(params, 'ambientLightIntensity', 0.0, 1.0).name('Lumière ambiante').onChange(function(value) {
+        scene.traverse(function(object) {
+            if (object.isAmbientLight) {
+                object.intensity = value;
+            }
+        });
+    });
+    lightFolder.open();
+    
+    // Dossier pour les éléments de la scène
+    var sceneFolder = gui.addFolder('Éléments de scène');
+    sceneFolder.add(params, 'showSkull').name('Afficher crâne').onChange(function(value) {
+        if (skull) skull.visible = value;
+    });
+    sceneFolder.add(params, 'showFlower').name('Afficher fleur').onChange(function(value) {
+        scene.traverse(function(object) {
+            if (object.name === 'flower') {
+                object.visible = value;
+            }
+        });
+    });
+    sceneFolder.open();
+
+    var fogFolder = gui.addFolder('Brouillard');
+    fogFolder.add(params, 'fogEnabled').name('Activer brouillard').onChange(setupFog);
+    
+    // Si vous utilisez THREE.Fog (linéaire)
+    fogFolder.add(params, 'fogNear', 1, 500).name('Distance proche').onChange(setupFog);
+    fogFolder.add(params, 'fogFar', 500, 2000).name('Distance lointaine').onChange(setupFog);
+    
+    // Si vous utilisez THREE.FogExp2 (exponentiel)
+    // fogFolder.add(params, 'fogDensity', 0.001, 0.05).name('Densité').onChange(setupFog);
+    
+    fogFolder.addColor(params, 'fogColor').name('Couleur').onChange(function(value) {
+        if (scene.fog) {
+            scene.fog.color.set(value);
+        }
+        setupFog();
+    });
+    
+    fogFolder.open();
+}
+
 
 function init() {
     renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -748,6 +863,7 @@ function init() {
 try {
     init();
     fillScene();
+    initGUI();
     animate();
 } catch (e) {
     console.error(e);