Merge remote-tracking branch 'origin/main'

ALGUL/checklistProjet.md

@@ -5,7 +5,7 @@
 - [ ] Géométrie
 - [X] Couleur
 - [ ] Transparence
-- [ ] Eclairage
+- [X] 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,148 +30,142 @@ controls.maxDistance = 2000;
 controls.minDistance = 50;
 controls.target.set(0, 0, 0);
 
-// 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);
-
+// Directional Light (Soleil)
 const sunLight = new THREE.DirectionalLight(0xffddaa, 3);
-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.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.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();
@@ -182,8 +176,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;
@@ -193,34 +187,35 @@ 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;
-
-    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;
+
+ spotLight.target = obj;
+ 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;
@@ -241,21 +236,48 @@ sprite2.scale.set(50, 100, 50);
 scene.add(sprite2);
 
 const gui = new dat.GUI();
-gui.add(camera, 'fov', 10, 100).name('Zoom').onChange(() => {
-    camera.updateProjectionMatrix();
+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(sunLight, 'intensity', 0, 10).name('Soleil Intensité');
-gui.add(scene.fog, 'density', 0, 0.0015).name('Brouillard');
+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");
 
 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();
 });