Encent + bougeoir miroir + fumée animée

HERRY-M--HERRY-E/TABLO.js

@@ -79,6 +79,82 @@ function CreationTable() {
     tableGroup.position.set(5, 0, 0); // Positionner la table à droite
     scene.add(tableGroup);
 }
+
+// Fonction pour créer un bâton d'encens
+function CreationBatonEncent(position) {
+    var geometry = new THREE.CylinderGeometry(0.02, 0.02, 0.5, 32); // Cylindre fin pour le bâton
+    var material = new THREE.MeshStandardMaterial({
+        color: 0x6e4b3c, // Couleur bois
+        roughness: 0.3,
+        metalness: 0.1
+    });
+    var stick = new THREE.Mesh(geometry, material);
+    stick.position.set(position.x, position.y, position.z);
+    CreationFumee(new THREE.Vector3(position.x, position.y + 0.25, position.z)); // Fumée juste au-dessus du bâton
+    return stick;
+}
+
+function CreationFumee(position) {
+    var smokeTexture = new THREE.TextureLoader().load('textures/smoke.png');
+    var smokeMaterial = new THREE.SpriteMaterial({
+        map: smokeTexture,
+        transparent: true,
+        blending: THREE.AdditiveBlending
+    });
+
+    // Créer une liste pour les particules
+    var smokeParticles = [];
+
+    // Paramètres de la fumée
+    var smokeCount = 500;  // Nombre de particules
+    var spawnRate = 0.15; // Taux de génération des particules
+
+    // Fonction pour créer une particule de fumée (sprite)
+    function createSmokeParticle() {
+        var smokeParticle = new THREE.Sprite(smokeMaterial);
+        smokeParticle.position.set(position.x, position.y, position.z);
+        smokeParticle.scale.set(0.1 + Math.random() * 0.05, 0.1 + Math.random() * 0.05, 1);  // Taille initiale variée
+        smokeParticle.velocity = Math.random() * 0.01 + 0.002; // Vitesse de montée aléatoire
+        smokeParticle.rotationSpeed = Math.random() * 0.02 - 0.01;  // Rotation aléatoire
+        scene.add(smokeParticle);
+        return smokeParticle;
+    }
+
+    // Animation de la fumée
+    function animateSmoke() {
+        smokeParticles.forEach(function(particle) {
+            // Ajouter une variation dans la montée de la fumée
+            particle.position.y += particle.velocity + Math.random() * 0.002;  // Vitesse de montée plus naturelle
+            particle.position.x += (Math.random() - 0.5) * 0.001;  // Légère dispersion horizontale
+            particle.position.z += (Math.random() - 0.5) * 0.001;  // Légère dispersion dans l'espace
+            
+            // Rotation lente des particules
+            particle.rotation.z += particle.rotationSpeed;
+
+            // Augmenter légèrement la taille pour simuler l'expansion
+            particle.scale.x += 0.001 + Math.random() * 0.0005;
+            particle.scale.y += 0.001 + Math.random() * 0.0005;
+
+            // Réinitialiser la particule si elle dépasse une certaine hauteur
+            if (particle.position.y > 5) {
+                particle.position.set(position.x, position.y, position.z);  // Réinitialiser la position
+                particle.scale.set(0.1 + Math.random() * 0.05, 0.1 + Math.random() * 0.05, 1);  // Réinitialiser la taille
+                particle.velocity = Math.random() * 0.01 + 0.002; // Réinitialiser la vitesse
+            }
+        });
+
+        // Créer de nouvelles particules
+        if (Math.random() < spawnRate) {
+            smokeParticles.push(createSmokeParticle());
+        }
+
+        // Revenir à l'animation à chaque frame
+        requestAnimationFrame(animateSmoke);
+    }
+
+    animateSmoke();
+}
+
 function CreationCarré() {
     // Charger la texture
     const textureLoader = new THREE.TextureLoader();
@@ -132,6 +208,15 @@ function CreationNappe() {
 function fillScene() {
     scene = new THREE.Scene();
 
+    //Brouillard
+    scene.fog = new THREE.FogExp2(0xAAAAAA, 0.0025); 
+    
+    // Creation du GUI
+    const gui = new dat.GUI();
+    const folderFog = gui.addFolder('Brouillard');
+    folderFog.add(scene.fog, 'density', 0, 0.2 , 0.00025).name('densité');
+    folderFog.open();
+
     // LIGHT
     var light = new THREE.DirectionalLight(0xFFFFFF, 7);
     light.position.set(1, 1, 1);
@@ -266,31 +351,85 @@ var mtlLoader1 = new MTLLoader();
             console.error('An error happened', error);
         }
     );
-    var loader6 = new OBJLoader();
-    loader6.load(
-        'bougeoir.obj',
-        function (object) {
-            normalizeAndPosition(object, 1, new THREE.Vector3(3.1, 2.71, -14));
+    // Charger une texture d'environnement (cube map)
+var textureLoader = new THREE.CubeTextureLoader();
+var envMap = textureLoader.load([
+    'path/to/posx.jpg', // Image de la face +X
+    'path/to/negx.jpg', // Image de la face -X
+    'path/to/posy.jpg', // Image de la face +Y
+    'path/to/negy.jpg', // Image de la face -Y
+    'path/to/posz.jpg', // Image de la face +Z
+    'path/to/negz.jpg'  // Image de la face -Z
+]);
+
+// Charger l'objet bougeoir
+// Charger l'objet bougeoir
+var loader6 = new OBJLoader();
+loader6.load(
+    'bougeoir.obj', // Chemin vers ton fichier OBJ
+    function (object) {
+        // Normalisation et positionnement de l'objet
+        normalizeAndPosition(object, 1, new THREE.Vector3(3.1, 2.71, -14));
+
+        // Créer une CubeCamera pour la réflexion dynamique
+        const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, {
+            format: THREE.RGBFormat,
+            generateMipmaps: true,
+            minFilter: THREE.LinearMipmapLinearFilter
+        }); // Configuration améliorée de la cube camera
+        const camera = new THREE.CubeCamera(1, 1000, cubeRenderTarget); // Créer une caméra cube pour la réflexion
+        scene.add(camera); // Ajouter la caméra à la scène
+
+        // Créer un matériau avec réflexion
+        var material = new THREE.MeshStandardMaterial({
+            color: new THREE.Color(42 / 255, 23 / 255, 13 / 255), // Couleur brune
+            metalness: 1, // Rendre l'objet complètement métallique pour un effet miroir
+            roughness: 0, // Lissage parfait pour l'effet miroir
+            envMap: cubeRenderTarget.texture, // Utiliser la carte de réflexion dynamique
+            envMapIntensity: 2, // Augmenter l'intensité de la réflexion
+            side: THREE.DoubleSide // Afficher les deux faces
+        });
+
+        // Appliquer le matériau à chaque maillage de l'objet
+        object.traverse(function(child) {
+            if (child.isMesh) {
+                child.material = material;
+            }
+        });
 
-            var material = new THREE.MeshStandardMaterial({
-                color: new THREE.Color(42 / 255, 23 / 255, 13 / 255), // Conversion des valeurs RGB (de 0 à 1)
-                side : THREE.DoubleSide
-            });
-            // Appliquer le matériau à chaque maillage de l'objet
-            object.traverse(function(child) {
-                if (child.isMesh) {
-                    child.material = material;
-                }
-            });
-            scene.add(object);
-        },
-        function (xhr) {
-            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-        },
-        function (error) {
-            console.error('An error happened', error);
+        // Ajouter l'objet bougeoir à la scène
+        scene.add(object);
+
+        // Positionner les bâtons d'encens dans le bougeoir
+        var baton1 = CreationBatonEncent(new THREE.Vector3(1.9, 3.0, -1.1)); // Position 1 dans le bougeoir
+        baton1.rotation.x=0.
+        scene.add(baton1);
+
+        // Mettre à jour la CubeCamera à chaque frame pour les reflets dynamiques
+        function animate() {
+            requestAnimationFrame(animate);
+            camera.update(renderer, scene); // Met à jour la réflexion à chaque frame
+            renderer.render(scene, camera); // Rendu de la scène
         }
-    );
+        animate();
+
+        // Assurez-vous que tous les objets sont visibles dans la réflexion
+        scene.traverse(function (child) {
+            if (child instanceof THREE.Mesh) {
+                child.visible = true; // Assurez-vous que l'objet est visible pour la cube camera
+            }
+        });
+    },
+    function (xhr) {
+        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+    },
+    function (error) {
+        console.error('An error happened', error);
+    }
+);
+
+
+
 
 
     var loader5 = new OBJLoader();