j'ai corrigé ma betise, désolé encore

ALGUL/checklistProjet.md

@@ -5,7 +5,7 @@
 - [ ] Géométrie
 - [X] Couleur
 - [ ] Transparence
-- [X] Eclairage
+- [ ] Eclairage
 - [X] Ombres portées
 - [] Position de la caméra
 - [X] Brouillard

ALGUL/index.js

@@ -16,7 +16,7 @@ camera.position.set(380, 200, 30);
 
 // RENDERER
 const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.shadowMap.enabled = true; 
+renderer.shadowMap.enabled = true;               
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
@@ -30,142 +30,148 @@ controls.maxDistance = 2000;
 controls.minDistance = 50;
 controls.target.set(0, 0, 0);
 
-// Directional Light (Soleil)
+// LUMIÈRES
+const light = new THREE.DirectionalLight(0xffffff, 1);
+light.position.set(10, 50, 50);
+scene.add(light);
+
+const ambientLight = new THREE.AmbientLight(0x404040, 2);
+scene.add(ambientLight);
+
+const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x222222, 1);
+scene.add(hemisphereLight);
+
+// SOLEIL
+const sunGeometry = new THREE.SphereGeometry(50, 32, 32);
+const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 });
+const sun = new THREE.Mesh(sunGeometry, sunMaterial);
+sun.position.set(-700, 800, -1000);
+scene.add(sun);
+
 const sunLight = new THREE.DirectionalLight(0xffddaa, 3);
-sunLight.position.set(500, 500, -500);
-sunLight.castShadow = true;
-sunLight.shadow.mapSize.width = 4096;
-sunLight.shadow.mapSize.height = 4096;
-sunLight.shadow.camera.near = 0.5;
-sunLight.shadow.camera.far = 5000;
+sunLight.position.set(500, 1000, -1000);
+sunLight.castShadow = true;                      
+sunLight.shadow.mapSize.width = 2048;
+sunLight.shadow.mapSize.height = 2048;
+sunLight.shadow.camera.near = 1;
+sunLight.shadow.camera.far = 3000;
 sunLight.shadow.camera.left = -1000;
 sunLight.shadow.camera.right = 1000;
 sunLight.shadow.camera.top = 1000;
 sunLight.shadow.camera.bottom = -1000;
 scene.add(sunLight);
 
-// Lumière ambiante (éclaire toute la scène)
-const ambientLight = new THREE.AmbientLight(0x404040, 2);
-scene.add(ambientLight);
-
-// Spotlight
-const spotLight = new THREE.SpotLight(0xffffff, 5, 500, Math.PI / 6, 0.5, 2);
-spotLight.position.set(250, 200, -50);
-spotLight.castShadow = true;
-scene.add(spotLight);
-
-
 const loader = new GLTFLoader();
 
 loader.load('modeles/old_bridge.glb', function (gltf) {
- const bridge = gltf.scene;
-
- bridge.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- scene.add(bridge);
- bridge.position.set(0, 100, 0);
- bridge.scale.set(0.5, 0.5, 0.5);
- bridge.rotation.y = Math.PI / 2;
-
- controls.target.copy(bridge.position);
- controls.update();
+    const bridge = gltf.scene;
+
+    bridge.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    scene.add(bridge);
+    bridge.position.set(0, 100, 0);
+    bridge.scale.set(0.5, 0.5, 0.5);
+    bridge.rotation.y = Math.PI / 2;
+
+    controls.target.copy(bridge.position);
+    controls.update();
 }, undefined, function (error) {
- console.error("Erreur de chargement du pont :", error);
+    console.error("Erreur de chargement du pont :", error);
 });
 
 loader.load('modeles/old_bridge.glb', function (gltf) {
- const bridge2 = gltf.scene;
- bridge2.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- scene.add(bridge2);
- bridge2.position.set(-950, 100, 0);
- bridge2.scale.set(0.5, 0.5, 0.5);
- bridge2.rotation.y = Math.PI / 2;
-
- controls.target.copy(bridge2.position);
- controls.update();
+    const bridge2 = gltf.scene;
+    bridge2.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    scene.add(bridge2);
+    bridge2.position.set(-950, 100, 0);
+    bridge2.scale.set(0.5, 0.5, 0.5);
+    bridge2.rotation.y = Math.PI / 2;
+
+    controls.target.copy(bridge2.position);
+    controls.update();
 }, undefined, function (error) {
- console.error("Erreur de chargement du pont :", error);
+    console.error("Erreur de chargement du pont :", error);
 });
 
 loader.load('modeles/old_bridge.glb', function (gltf) {
- const bridge3 = gltf.scene;
- bridge3.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- scene.add(bridge3);
- bridge3.position.set(100, 100, 126);
- bridge3.scale.set(0.5, 0.5, 0.5);
- bridge3.rotation.y = Math.PI / -2;
-
- controls.target.copy(bridge3.position);
- controls.update();
+    const bridge3 = gltf.scene;
+    bridge3.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    scene.add(bridge3);
+    bridge3.position.set(100, 100, 126);
+    bridge3.scale.set(0.5, 0.5, 0.5);
+    bridge3.rotation.y = Math.PI / -2;
+
+    controls.target.copy(bridge3.position);
+    controls.update();
 }, undefined, function (error) {
- console.error("Erreur de chargement du pont :", error);
+    console.error("Erreur de chargement du pont :", error);
 });
 
 loader.load('modeles/old_bridge.glb', function (gltf) {
- const bridge4 = gltf.scene;
- bridge4.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- scene.add(bridge4);
- bridge4.position.set(-850, 100, 126);
- bridge4.scale.set(0.5, 0.5, 0.5);
- bridge4.rotation.y = Math.PI / -2;
-
- controls.target.copy(bridge4.position);
- controls.update();
+    const bridge4 = gltf.scene;
+    bridge4.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    scene.add(bridge4);
+    bridge4.position.set(-850, 100, 126);
+    bridge4.scale.set(0.5, 0.5, 0.5);
+    bridge4.rotation.y = Math.PI / -2;
+
+    controls.target.copy(bridge4.position);
+    controls.update();
 }, undefined, function (error) {
- console.error("Erreur de chargement du pont :", error);
+    console.error("Erreur de chargement du pont :", error);
 });
 
 loader.load('modeles/bateau.glb', function (gltf) {
- const boat1 = gltf.scene.clone();
- boat1.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- const boat2 = gltf.scene.clone();
- boat2.traverse((node) => {
- if (node.isMesh) {
- node.castShadow = true;
- node.receiveShadow = true;
- }
- });
-
- boat1.position.set(-300, 1, -500);
- boat1.scale.set(0.3, 0.3, 0.3);
-
- boat2.position.set(-200, 1, -600);
- boat2.scale.set(0.3, 0.3, 0.3);
- boat2.rotation.y = Math.PI / 4;
-
- scene.add(boat1);
- scene.add(boat2);
+    const boat1 = gltf.scene.clone();
+    boat1.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    const boat2 = gltf.scene.clone();
+    boat2.traverse((node) => {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
+
+    boat1.position.set(-300, 1, -500);
+    boat1.scale.set(0.3, 0.3, 0.3);
+
+    boat2.position.set(-200, 1, -600);
+    boat2.scale.set(0.3, 0.3, 0.3);
+    boat2.rotation.y = Math.PI / 4;
+
+    scene.add(boat1);
+    scene.add(boat2);
 }, undefined, function (error) {
- console.error("Erreur de chargement des bateaux :", error);
+    console.error("Erreur de chargement des bateaux :", error);
 });
 
 const textureLoader = new THREE.TextureLoader();
@@ -176,8 +182,8 @@ groundTexture.offset.set(0, 0);
 
 const groundMaterial = new THREE.MeshLambertMaterial({ map: groundTexture });
 const solidGround = new THREE.Mesh(
- new THREE.PlaneGeometry(10000, 10000, 100, 100),
- groundMaterial
+    new THREE.PlaneGeometry(10000, 10000, 100, 100),
+    groundMaterial
 );
 solidGround.rotation.x = -Math.PI / 2;
 solidGround.position.y = -2;
@@ -187,35 +193,34 @@ scene.add(solidGround);
 
 const objLoader = new OBJLoader();
 objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) {
- const screamTexture = textureLoader.load('modeles/scream/Scream Texture.png');
-
- obj.traverse((child) => {
- if (child.isMesh) {
- child.material = new THREE.MeshBasicMaterial({ map: screamTexture });
- child.castShadow = true;
- child.receiveShadow = true;
- }
- });
-
- obj.position.set(250, -60, -30);
- obj.scale.set(20, 20, 20);
- obj.rotation.z = Math.PI / 2.5;
- obj.rotation.y = Math.PI / -5;
-
- spotLight.target = obj;
- scene.add(obj);
+    const screamTexture = textureLoader.load('modeles/scream/Scream Texture.png');
+
+    obj.traverse((child) => {
+        if (child.isMesh) {
+            child.material = new THREE.MeshBasicMaterial({ map: screamTexture });
+            child.castShadow = true;
+            child.receiveShadow = true;
+        }
+    });
+
+    obj.position.set(250, -60, -30);
+    obj.scale.set(20, 20, 20);
+    obj.rotation.z = Math.PI / 2.5;
+    obj.rotation.y = Math.PI / -5;
+
+    scene.add(obj);
 }, undefined, function (error) {
- console.error("Erreur de chargement du modèle Scream :", error);
+    console.error("Erreur de chargement du modèle Scream :", error);
 });
 
 const skyTexture = textureLoader.load('textures/skybox2.png');
 const skyMaterial = new THREE.MeshBasicMaterial({
- map: skyTexture,
- side: THREE.BackSide
+    map: skyTexture,
+    side: THREE.BackSide
 });
 const skySphere = new THREE.Mesh(
- new THREE.SphereGeometry(3000, 32, 32),
- skyMaterial
+    new THREE.SphereGeometry(3000, 32, 32),
+    skyMaterial
 );
 skySphere.rotation.x = Math.PI / 2;
 skySphere.rotation.z = Math.PI / -1;
@@ -236,48 +241,21 @@ sprite2.scale.set(50, 100, 50);
 scene.add(sprite2);
 
 const gui = new dat.GUI();
-const cameraFolder = gui.addFolder("Zoom & Brouillard");
-cameraFolder.add(camera, "fov", 10, 100).name("Zoom").onChange(() => {
- camera.updateProjectionMatrix();
-});
-cameraFolder.add(scene.fog, "density", 0, 0.0015).name("Brouillard");
-
-const sunFolder = gui.addFolder("Soleil");
-const sunColor = { color: sunLight.color.getHex() };
-sunFolder.add(sunLight, "intensity", 0, 10).name("Intensité Soleil");
-sunFolder.addColor(sunColor, "color").name("Couleur Soleil").onChange((value) => {
- sunLight.color.set(value);
-});
-sunFolder.add(sunLight.position, "x", -2000, 2000).name("Position X");
-sunFolder.add(sunLight.position, "y", -2000, 2000).name("Position Y");
-sunFolder.add(sunLight.position, "z", -2000, 2000).name("Position Z");
-
-const ambientFolder = gui.addFolder("Lumière Ambiante");
-const ambientColor = { color: ambientLight.color.getHex() };
-ambientFolder.add(ambientLight, "intensity", 0, 5).name("Intensité Ambiante");
-ambientFolder.addColor(ambientColor, "color").name("Couleur Ambiante").onChange((value) => {
- ambientLight.color.set(value);
-});
-
-const spotFolder = gui.addFolder("Spotlight sur Le Cri");
-const spotColor = { color: spotLight.color.getHex() };
-spotFolder.add(spotLight, "intensity", 0, 10).name("Intensité Spotlight");
-spotFolder.addColor(spotColor, "color").name("Couleur Spotlight").onChange((value) => {
- spotLight.color.set(value);
+gui.add(camera, 'fov', 10, 100).name('Zoom').onChange(() => {
+    camera.updateProjectionMatrix();
 });
-spotFolder.add(spotLight.position, "x", -500, 500).name("Position X");
-spotFolder.add(spotLight.position, "y", 50, 500).name("Position Y");
-spotFolder.add(spotLight.position, "z", -500, 500).name("Position Z");
+gui.add(sunLight, 'intensity', 0, 10).name('Soleil Intensité');
+gui.add(scene.fog, 'density', 0, 0.0015).name('Brouillard');
 
 function animate() {
- requestAnimationFrame(animate);
- controls.update();
- renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
 }
 animate();
 
 window.addEventListener('resize', () => {
- renderer.setSize(window.innerWidth, window.innerHeight);
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
 });