LES OMBRES ENFIN DIEU EXISTE

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

@@ -25,6 +25,9 @@ function init() {
     renderer.setSize(canvasWidth, canvasHeight);
     renderer.setClearColor(0xAAAAAA, 1.0);
     document.body.appendChild(renderer.domElement);
+    renderer.shadowMap.enabled = true; // Active le rendu des ombres
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Type d'ombre douce
+
 
     // CAMERA
     camera = new THREE.PerspectiveCamera(30, canvasRatio, 0.1, 10000);
@@ -51,6 +54,16 @@ function normalizeAndPosition(object, scaleFactor, position) {
     object.position.set(position.x, position.y, position.z);
 }
 
+ function CreationSol(){
+    var groundGeometry = new THREE.PlaneGeometry(50, 50);
+    var groundMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
+    var ground = new THREE.Mesh(groundGeometry, groundMaterial);
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+ }
+
+
 function CreationTable() {
     var tableGroup = new THREE.Group();
     var material = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
@@ -59,6 +72,8 @@ function CreationTable() {
     var tabletopGeometry = new THREE.BoxGeometry(7, 0.2, 3);
     var tabletop = new THREE.Mesh(tabletopGeometry, material);
     tabletop.position.set(0, 2.6, 0);
+    tabletop.castShadow = true;
+    tabletop.receiveShadow = true;
     tableGroup.add(tabletop);
     
     // Table legs
@@ -75,7 +90,7 @@ function CreationTable() {
         leg.position.set(pos[0], pos[1], pos[2]);
         tableGroup.add(leg);
     });
-    
+    tableGroup.castShadow = true;
     tableGroup.position.set(5, 0, 0); // Positionner la table à droite
     scene.add(tableGroup);
 }
@@ -155,31 +170,6 @@ function CreationFumee(position) {
     animateSmoke();
 }
 
-function CreationCarré() {
-    // Charger la texture
-    const textureLoader = new THREE.TextureLoader();
-    const texture = textureLoader.load('textures/fond.png'); // Remplace par le chemin de ta texture .png
-
-    // Matériau avec la texture
-    var material = new THREE.MeshStandardMaterial({ 
-        map: texture, // Appliquer la texture
-        side: THREE.DoubleSide // Voir les faces intérieures aussi
-    });
-
-    // Définir la taille de la boîte
-    var boxGeometry = new THREE.BoxGeometry(40, 40.01, 40); 
-
-    // Créer la boîte avec la texture
-    var box = new THREE.Mesh(boxGeometry, material);
-
-    // Positionner la boîte
-    box.position.set(5, 20, 0);
-
-    // Ajouter la boîte à la scène
-    scene.add(box);
-}
-
-
 function CreationNappe() {
     var clothMaterial = new THREE.MeshStandardMaterial({ 
         color:0x0B3D02, // , comme une nappe classique
@@ -201,6 +191,7 @@ function CreationNappe() {
     cloth.rotation.x = -Math.PI / 2; // Mettre à plat
     cloth.position.set(5, 2.71, 0); // Juste au-dessus de la table
 
+    cloth.receiveShadow = true;
     scene.add(cloth);
 }
 
@@ -218,12 +209,15 @@ function fillScene() {
     folderFog.open();
 
     // LIGHT
-    var light = new THREE.DirectionalLight(0xFFFFFF, 7);
-    light.position.set(1, 1, 1);
+    var light = new THREE.DirectionalLight(0xFFFFFF, 20);
+    scene.add(new THREE.CameraHelper(light.shadow.camera));
+    light.position.set(3, 10, 1);
+    light.castShadow = true;
     scene.add(light);
-    var light2 = new THREE.AmbientLight(0xFFFFFF, 1);
+    var light2 = new THREE.AmbientLight(0xFFFFFF, 0);
     scene.add(light2);
 
+    CreationSol()
         // Charger l'objet du crâne
         var loader = new OBJLoader();
         loader.load(
@@ -241,6 +235,7 @@ function fillScene() {
                         child.material = material;
                     }
                 });
+                object.castShadow = true;
                 scene.add(object);
             },
             function(xhr) {
@@ -313,6 +308,12 @@ var mtlLoader1 = new MTLLoader();
         function (object) {
             normalizeAndPosition(object, 0.5, new THREE.Vector3(2, 2.77, 0.9));
             object.rotation.y = 5;
+            object.traverse(function (child) {
+                if (child.isMesh) {
+                    child.castShadow = true; // Projeter des ombres
+                    child.receiveShadow = true; // Recevoir des ombres
+                }
+            });
             scene.add(object);
         },
         function (xhr) {
@@ -481,7 +482,6 @@ loader6.load(
         }
     );
 
-    CreationCarré();
     CreationTable();
     CreationNappe();
     
@@ -504,7 +504,6 @@ function render() {
             obj.visible = true; // Ré-affiche l'objet avec les reflets
         }
     });
-
     renderer.render(scene, camera);
 }
 

HERRY-M--HERRY-E/checklistProjet.md

@@ -7,14 +7,14 @@
 - [X] Transparence(verre)
 - [ ] Eclairage(en haut a gauche)
 - [ ] Ombres portées(partout)
-- [ ] Position de la caméra(tourner autour du centre de la table)
-- [ ] Brouillard(dans la salle)
+- [X] Position de la caméra(tourner autour du centre de la table)
+- [X] Brouillard(dans la salle)
 - [ ] Effet miroir(verre)
 - [X] Texture classique(livre)
 - [X] Texture avec transparence (verre)
-- [ ] Sprites
+- [X] Sprites
 - [ ] Environment map
 - [ ] Skybox
-- [ ] Animations (fumée cigarette)
+- [X] Animations (fumée cigarette)
 - [ ] normal maps
-- [ ] Interaction par GUI (brouillard)
\ No newline at end of file
+- [X] Interaction par GUI (brouillard)
\ No newline at end of file