Update file script.js

RIFI/script.js

@@ -14,9 +14,7 @@ var candle, candleHolder, flame;
 var backgroundMesh; 
 var environmentMap;
 var compass;
-// var waxGroup;
-// var cubeCamera, cubeRenderTarget;
-
+var cubeCamera, cubeRenderTarget;
 var params = {
 
     flickerSpeed: 2.0,
@@ -25,7 +23,7 @@ var params = {
     candleLightIntensity: 2.2,
     candleLightDistance: 400,
     ambientLightIntensity: 0.22,
-    fogEnabled: true,
+    fogEnabled: false,
     fogColor: 0x000000,
     fogNear: 100,
     fogFar: 1000,
@@ -36,10 +34,43 @@ var params = {
     showFlower: true
 };
 
-import {Coordinates} from './lib/Coordinates.js';
 
-function fillScene() {
+
+function init() {
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(846, 494);
+    renderer.setClearColor(0x000000, 1.0);
+    renderer.physicallyCorrectLights = true; 
+    renderer.toneMapping = THREE.ACESFilmicToneMapping; 
+    renderer.toneMappingExposure = 1.2; 
+ 
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
+    
+    var container = document.getElementById('webGL');
+    container.appendChild(renderer.domElement);
+
+    camera = new THREE.PerspectiveCamera(35, 846 / 494, 1, 8000);
+    camera.position.set(0, 200, 600);
+
     scene = new THREE.Scene();
+
+    cameraControls = new OrbitControls(camera, renderer.domElement);
+    cameraControls.target.set(0, 50, 0);
+
+  
+    cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
+        format: THREE.RGBFormat,
+        generateMipmaps: true,
+        minFilter: THREE.LinearMipmapLinearFilter
+    });
+    cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
+    scene.add(cubeCamera);
+}
+
+
+function fillScene() {
+
     createGradientBackground();
 
     var mainLight = new THREE.DirectionalLight(0xFFAA55, 0.5);
@@ -56,34 +87,33 @@ function fillScene() {
     mainLight.shadow.bias = -0.0005;
     scene.add(mainLight);
 
-    
-    const cubeTextureLoader = new THREE.CubeTextureLoader();
     var ambientLight = new THREE.AmbientLight(0x222222, params.ambientLightIntensity);
     scene.add(ambientLight);
 
-    const environmentMap = cubeTextureLoader.load([
-    'textures/envmap/px.png', 
-    'textures/envmap/nx.png', 
-    'textures/envmap/py.png', 
-    'textures/envmap/ny.png', 
-    'textures/envmap/pz.png', 
-    'textures/envmap/nz.png'  
- 
-]);
-scene.environment = environmentMap; 
-
-
-createTable();
-loadSkull();
-createEnhancedCandle();
-loadFlower();
-loadCompass();
-loadInk();
-loadWalnut();
-addMeltedWaxOnTable();
-loadKey();
+    const cubeTextureLoader = new THREE.CubeTextureLoader();
+    environmentMap = cubeTextureLoader.load([
+        'textures/envmap/px.png', 
+        'textures/envmap/nx.png', 
+        'textures/envmap/py.png', 
+        'textures/envmap/ny.png', 
+        'textures/envmap/pz.png', 
+        'textures/envmap/nz.png'
+    ]);
+    scene.environment = environmentMap;
+
+   
+    createTable();
+    loadSkull();
+    createEnhancedCandle();
+    loadFlower();
+    loadInk();
+    loadWalnut();
+    loadKey();
+    setupFog();
+    loadCompass()
 }
 
+
 function createGradientBackground() {
     const bgGeometry = new THREE.PlaneGeometry(2000, 1000);
     
@@ -111,9 +141,7 @@ function createGradientBackground() {
 
 function setupFog() {
     if (params.fogEnabled) {
-        
         scene.fog = new THREE.Fog(params.fogColor, params.fogNear, params.fogFar);
-        
     } else {
         scene.fog = null;
     }
@@ -265,39 +293,53 @@ function loadCompass() {
     const textureLoader = new THREE.TextureLoader();
 
     textureLoader.load('textures/compass.jpg', function(texture) {
+        
+        texture.encoding = THREE.sRGBEncoding;
+        texture.flipY = false; 
+        texture.generateMipmaps = true;
+        texture.needsUpdate = true;
+        
         loader.load(
-            'boussole1.obj',  
+            'boussole1.obj',
             function (compass) {
                 compass.scale.set(30, 30, 30); 
-                compass.position.set(70, -10, 85);
+                compass.position.set(90, -10, 85);
                 compass.rotation.set(0, -Math.PI / 1.5, 0);
 
-                const compassMaterial = new THREE.MeshStandardMaterial({
-                    map: texture, // Appliquer la texture
-                    roughness: 0.3, // Ajuster la rugosité pour un effet réaliste
-                    metalness: 0.8, // Ajuster la métallité pour un effet réaliste
-                    envMap: cubeRenderTarget.texture, // Appliquer la carte d'environnement dynamique
-                    envMapIntensity: 1.0, // Intensité de l'environnement pour un effet réaliste
-                    transparent: false, // Désactiver la transparence
-                    opacity: 1.0 // Opacité complète
-                    
+                
+                const compassMaterial = new THREE.MeshPhysicalMaterial({
+                    map: texture,
+                       
+                    emissiveIntensity: 0.3,
+                    metalness: 1.0,        
+                    roughness: 0.2,        
+                    reflectivity: 1.0,
+                    clearcoat: 0.8,        
+                    clearcoatRoughness: 0.2,
+                    envMapIntensity: 1.5,  
+                    side: THREE.DoubleSide
                 });
 
                 compass.traverse(function(child) {
                     if (child.isMesh) {
                         child.material = compassMaterial;
-                        child.castShadow = true; // Permettre à l'objet de projeter des ombres
-                        child.receiveShadow = true; // Permettre à l'objet de recevoir des ombres
+                        child.castShadow = true;
+                        child.receiveShadow = true;
                     }
                 });
 
                 scene.add(compass);
                 console.log("Objet chargé :", compass);
 
-                // Ajouter une lumière spécifique pour éclairer la boussole
-                const compassLight = new THREE.PointLight(0xffffff, 1, 100);
-                compassLight.position.set(70, 20, 85); // Positionner la lumière au-dessus de la boussole
+                const compassLight = new THREE.PointLight(0xffffcc, 2.0, 150);
+                compassLight.position.set(70, 20, 85);
+                compassLight.castShadow = true;
                 scene.add(compassLight);
+              
+                const compassGlow = new THREE.PointLight(0xffffaa, 1.0, 80);
+                compassGlow.position.set(70, -5, 85);
+                scene.add(compassGlow);
+                
             },
             function (xhr) {
                 console.log((xhr.loaded / xhr.total * 100) + '% chargé');
@@ -319,7 +361,7 @@ function loadWalnut() {
         function (walnut) {
             walnut.scale.set(1, 1, 1); 
             
-            walnut.position.set(120, 6, 120); 
+            walnut.position.set(160, 6, 120); 
             walnut.rotation.set(0, 0, 0); 
 
             const walnutMaterial = new THREE.MeshPhongMaterial({  
@@ -350,9 +392,6 @@ function loadWalnut() {
     );
 }
 
-
-
-
 function loadInk() {
     const loader = new OBJLoader();
 
@@ -394,7 +433,6 @@ function loadInk() {
 }
 
 
-
 function loadKey() {
     const loader = new OBJLoader();
 
@@ -435,6 +473,9 @@ function loadKey() {
 }
 
 
+
+
+
 function loadFlower() {
     var loader = new OBJLoader();
     loader.load(
@@ -756,7 +797,7 @@ function createEnhancedCandle() {
     candleGroup.position.set(-150, 10, 20);
     candleGroup.scale.set(2, 2, 2);
     
-    // Permettre au groupe entier de projeter et recevoir des ombres
+    
     candleGroup.traverse(function(object) {
         if (object.isMesh) {
             object.castShadow = true;
@@ -793,15 +834,13 @@ function animateFlame() {
         const innerLight = flame.userData.innerLight;
         const ambientLight = flame.userData.ambientLight;
         const particles = flame.userData.particles;
-        
-        // Mouvement de balancement simplifié
+   
         const swayX = Math.sin(time * swaySpeed) * swayAmount;
         const swayZ = Math.cos(time * swaySpeed * 0.8) * swayAmount;
         
-        // Variation de hauteur simplifiée
         const heightVariation = 0.98 + flickerIntensity * Math.sin(time * flickerSpeed);
         
-        // Appliquer les transformations à la flamme principale
+       
         flame.scale.set(1, heightVariation, 1);
         flame.rotation.x = swayX * 0.1;
         flame.rotation.z = swayZ * 0.1;
@@ -958,108 +997,30 @@ function updateBackgroundWithCandleLight(time, flickerFactor, swayX, swayZ) {
 }
 
 
-// function addMeltedWaxOnTable() {
-//     waxGroup = new THREE.Group();
-//     const waxMaterial = new THREE.MeshPhysicalMaterial({
-//         color: 0xf3e5ab, // Couleur de la cire
-//         roughness: 0.8,
-//         metalness: 0.05,
-//         transparent: true,
-//         opacity: 0.95,
-//         thickness: 1.5,
-//         transmission: 0.5
-//     });
-
-//     const waxCount = 8; // Nombre de gouttes de cire
-
-//     for (let i = 0; i < waxCount; i++) {
-//         let waxDroplets = new THREE.Group();
-        
-//         // Position de base près de la bougie
-//         let baseX = -150 + (Math.random() - 0.5) * 20; // Près de la position X de la bougie
-//         let baseZ = 1 + (Math.random() - 0.5) * 20;   // Près de la position Z de la bougie
-
-//         let dropCount = Math.floor(Math.random() * 5) + 3; // Nombre de gouttes par groupe
-
-//         for (let j = 0; j < dropCount; j++) {
-//             let waxRadius = Math.random() * 2 + 1; // Rayon aléatoire pour les gouttes
-//             let waxGeometry = new THREE.SphereGeometry(waxRadius, 16, 16);
-//             let wax = new THREE.Mesh(waxGeometry, waxMaterial);
-
-//             // Position initiale près de la bougie
-//             wax.position.set(
-//                 baseX + Math.random() * 5 - 2.5, 
-//                 50 - j * 5,  // Position Y pour simuler la chute
-//                 baseZ + Math.random() * 5 - 2.5
-//             );
-
-//             // Étirer les gouttes pour un effet de dégoulinement
-//             wax.scale.y = Math.random() * 2 + 1;
-
-//             // Activer les ombres
-//             wax.castShadow = true;
-//             wax.receiveShadow = true;
-
-//             waxDroplets.add(wax);
-//         }
-
-//         waxGroup.add(waxDroplets);
-//     }
-
-//     scene.add(waxGroup);
-//     animateWax(waxGroup); // Animer les gouttes de cire
-// }
-
-// function animateWax(waxGroup) {
-//     waxGroup.children.forEach((waxDroplets) => {
-//         // Position finale sur la table
-//         const targetY = -40;
-
-//         // Durée aléatoire pour chaque goutte
-//         const duration = Math.random() * 2 + 1;
-
-//         // Animation GSAP pour faire tomber les gouttes
-//         gsap.to(waxDroplets.position, {
-//             y: targetY,
-//             duration: duration,
-//             ease: "power2.out",
-//             onComplete: () => {
-//                 // Effet de rebond lorsque la goutte touche la table
-//                 gsap.to(waxDroplets.position, {
-//                     y: targetY + 5, // Petit rebond
-//                     duration: 0.2,
-//                     yoyo: true,
-//                     repeat: 1,
-//                     ease: "power2.out"
-//                 });
-//             }
-//         });
-//     });
-// }
-
 
 function animate() {
     requestAnimationFrame(animate);
     var delta = clock.getDelta();
     cameraControls.update(delta);
+
+    if (compass) {
+        cubeCamera.position.copy(compass.position);
+        cubeCamera.update(renderer, scene);
+    }
     
-   
     animateFlame();
-    // animateWax(waxGroup);
-
+    
     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) {
@@ -1084,7 +1045,7 @@ function initGUI() {
     });
     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;
@@ -1101,12 +1062,11 @@ function initGUI() {
     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) {
@@ -1118,28 +1078,6 @@ function initGUI() {
     fogFolder.open();
 }
 
-
-function init() {
-    renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(846, 494);
-    renderer.setClearColor(0x000000, 1.0);
-    renderer.physicallyCorrectLights = true; 
-    renderer.toneMapping = THREE.ACESFilmicToneMapping; 
-    renderer.toneMappingExposure = 1.2; 
- 
-    renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
-    
-    var container = document.getElementById('webGL');
-    container.appendChild(renderer.domElement);
-
-    camera = new THREE.PerspectiveCamera(35, 846 / 494, 1, 8000);
-    camera.position.set(0, 200, 600);
-
-    cameraControls = new OrbitControls(camera, renderer.domElement);
-    cameraControls.target.set(0, 50, 0);
-}
-
 try {
     init();
     fillScene();