From f05d536cb4522fb0e3af780bd7328ed09c42021a Mon Sep 17 00:00:00 2001
From: Sefer Algul <algul.sefer@univ-lorraine.fr>
Date: Wed, 19 Feb 2025 11:39:07 +0100
Subject: [PATCH] ajout brouillard
---
ALGUL/checklistProjet.md | 4 ++--
ALGUL/index.js | 24 ++++++------------------
2 files changed, 8 insertions(+), 20 deletions(-)
diff --git a/ALGUL/checklistProjet.md b/ALGUL/checklistProjet.md
index e464c85..820896c 100644
--- a/ALGUL/checklistProjet.md
+++ b/ALGUL/checklistProjet.md
@@ -6,9 +6,9 @@
- [X] Couleur
- [ ] Transparence
- [ ] Eclairage
-- [ ] Ombres portées
+- [X] Ombres portées
- [] Position de la caméra
-- [ ] Brouillard
+- [X] Brouillard
- [ ] Effet miroir
- [X] Texture classique
- [ ] Texture avec transparence
diff --git a/ALGUL/index.js b/ALGUL/index.js
index 8f1558a..22d78e9 100644
--- a/ALGUL/index.js
+++ b/ALGUL/index.js
@@ -2,11 +2,13 @@ import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.m
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/loaders/GLTFLoader.js';
import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/loaders/OBJLoader.js';
+import { Water } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/objects/Water.js';
import * as dat from 'https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.module.js';
// SCENE
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
+scene.fog = new THREE.FogExp2(0xCCC8C4);
// CAMERA
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
@@ -14,7 +16,7 @@ camera.position.set(380, 200, 30);
// RENDERER
const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.shadowMap.enabled = true; // Active les ombres
+renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
@@ -46,10 +48,9 @@ const sun = new THREE.Mesh(sunGeometry, sunMaterial);
sun.position.set(-700, 800, -1000);
scene.add(sun);
-// DirectionalLight pour le soleil (avec ombres)
const sunLight = new THREE.DirectionalLight(0xffddaa, 3);
sunLight.position.set(500, 1000, -1000);
-sunLight.castShadow = true; // Indispensable pour projeter des ombres
+sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 2048;
sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.camera.near = 1;
@@ -60,14 +61,11 @@ sunLight.shadow.camera.top = 1000;
sunLight.shadow.camera.bottom = -1000;
scene.add(sunLight);
-// CHARGEMENT DES PONTS
const loader = new GLTFLoader();
-// 1er pont
loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge = gltf.scene;
- // Activer les ombres
bridge.traverse((node) => {
if (node.isMesh) {
node.castShadow = true;
@@ -86,7 +84,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error);
});
-// 2e pont
loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge2 = gltf.scene;
bridge2.traverse((node) => {
@@ -107,7 +104,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error);
});
-// 3e pont
loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge3 = gltf.scene;
bridge3.traverse((node) => {
@@ -128,7 +124,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error);
});
-// 4e pont
loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge4 = gltf.scene;
bridge4.traverse((node) => {
@@ -149,7 +144,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error);
});
-// CHARGEMENT DES BATEAUX
loader.load('modeles/bateau.glb', function (gltf) {
const boat1 = gltf.scene.clone();
boat1.traverse((node) => {
@@ -180,7 +174,6 @@ loader.load('modeles/bateau.glb', function (gltf) {
console.error("Erreur de chargement des bateaux :", error);
});
-// SOL (eau)
const textureLoader = new THREE.TextureLoader();
const groundTexture = textureLoader.load('textures/water2.jpg');
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
@@ -194,11 +187,10 @@ const solidGround = new THREE.Mesh(
);
solidGround.rotation.x = -Math.PI / 2;
solidGround.position.y = -2;
-// Reçoit les ombres
+
solidGround.receiveShadow = true;
scene.add(solidGround);
-// MODÈLE SCREAM
const objLoader = new OBJLoader();
objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) {
const screamTexture = textureLoader.load('modeles/scream/Scream Texture.png');
@@ -221,7 +213,6 @@ objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) {
console.error("Erreur de chargement du modèle Scream :", error);
});
-// SPHEREBOX (Ciel panoramique)
const skyTexture = textureLoader.load('textures/skybox2.png');
const skyMaterial = new THREE.MeshBasicMaterial({
map: skyTexture,
@@ -235,7 +226,6 @@ skySphere.rotation.x = Math.PI / 2;
skySphere.rotation.z = Math.PI / -1;
scene.add(skySphere);
-// SPRITES
const spriteTexture = textureLoader.load('textures/sprite.png');
const spriteMaterial = new THREE.SpriteMaterial({ map: spriteTexture });
const sprite = new THREE.Sprite(spriteMaterial);
@@ -250,14 +240,13 @@ sprite2.position.set(20, 160, 0);
sprite2.scale.set(50, 100, 50);
scene.add(sprite2);
-// GUI
const gui = new dat.GUI();
gui.add(camera, 'fov', 10, 100).name('Zoom').onChange(() => {
camera.updateProjectionMatrix();
});
gui.add(sunLight, 'intensity', 0, 10).name('Soleil Intensité');
+gui.add(scene.fog, 'density', 0, 0.0015).name('Brouillard');
-// ANIMATION
function animate() {
requestAnimationFrame(animate);
controls.update();
@@ -265,7 +254,6 @@ function animate() {
}
animate();
-// REDIMENSIONNEMENT
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
--
GitLab