From bb109d55039318304950b386dcb5f9c72d5fabb1 Mon Sep 17 00:00:00 2001 From: deser <romain.desert6@etu.univ-lorraine.fr> Date: Wed, 12 Mar 2025 19:42:28 +0100 Subject: [PATCH] =?UTF-8?q?j'ai=20corrig=C3=A9=20ma=20betise,=20d=C3=A9sol?= =?UTF-8?q?=C3=A9=20encore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ALGUL/checklistProjet.md | 2 +- ALGUL/index.js | 320 ++++++++++++++++++--------------------- 2 files changed, 150 insertions(+), 172 deletions(-) diff --git a/ALGUL/checklistProjet.md b/ALGUL/checklistProjet.md index ae4b454..820896c 100644 --- a/ALGUL/checklistProjet.md +++ b/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 diff --git a/ALGUL/index.js b/ALGUL/index.js index 5af8524..22d78e9 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,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(); }); -- GitLab