diff --git a/RIFI/script.js b/RIFI/script.js
index b093459fb6945a3582a28fcd92c7746fb44e291c..319584e3236f751da84a0054c74ddf91c75de258 100644
--- a/RIFI/script.js
+++ b/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);