diff --git a/ALGUL/checklistProjet.md b/ALGUL/checklistProjet.md index 820896c890e7e7e6fd261ef863a5c48c76007ca2..ae4b45464fd34ba235f1a02f8e6c05cfc51337bd 100644 --- a/ALGUL/checklistProjet.md +++ b/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 diff --git a/ALGUL/index.js b/ALGUL/index.js index 22d78e9087ceaf4b92b9e0a679121cae3e8305e5..5af85243a6938e2a98eaed7c96a86024f83526ca 100644 --- a/ALGUL/index.js +++ b/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(); });