Skip to content
Snippets Groups Projects
Commit f05d536c authored by Sefer Algul's avatar Sefer Algul
Browse files

ajout brouillard

parent 534a49aa
Branches
No related tags found
No related merge requests found
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
- [X] Couleur - [X] Couleur
- [ ] Transparence - [ ] Transparence
- [ ] Eclairage - [ ] Eclairage
- [ ] Ombres portées - [X] Ombres portées
- [] Position de la caméra - [] Position de la caméra
- [ ] Brouillard - [X] Brouillard
- [ ] Effet miroir - [ ] Effet miroir
- [X] Texture classique - [X] Texture classique
- [ ] Texture avec transparence - [ ] Texture avec transparence
......
...@@ -2,11 +2,13 @@ import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.m ...@@ -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 { 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 { 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 { 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'; import * as dat from 'https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.module.js';
// SCENE // SCENE
const scene = new THREE.Scene(); const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); scene.background = new THREE.Color(0x87CEEB);
scene.fog = new THREE.FogExp2(0xCCC8C4);
// CAMERA // CAMERA
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
...@@ -14,7 +16,7 @@ camera.position.set(380, 200, 30); ...@@ -14,7 +16,7 @@ camera.position.set(380, 200, 30);
// RENDERER // RENDERER
const renderer = new THREE.WebGLRenderer({ antialias: true }); const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true; // Active les ombres renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
...@@ -46,10 +48,9 @@ const sun = new THREE.Mesh(sunGeometry, sunMaterial); ...@@ -46,10 +48,9 @@ const sun = new THREE.Mesh(sunGeometry, sunMaterial);
sun.position.set(-700, 800, -1000); sun.position.set(-700, 800, -1000);
scene.add(sun); scene.add(sun);
// DirectionalLight pour le soleil (avec ombres)
const sunLight = new THREE.DirectionalLight(0xffddaa, 3); const sunLight = new THREE.DirectionalLight(0xffddaa, 3);
sunLight.position.set(500, 1000, -1000); 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.width = 2048;
sunLight.shadow.mapSize.height = 2048; sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.camera.near = 1; sunLight.shadow.camera.near = 1;
...@@ -60,14 +61,11 @@ sunLight.shadow.camera.top = 1000; ...@@ -60,14 +61,11 @@ sunLight.shadow.camera.top = 1000;
sunLight.shadow.camera.bottom = -1000; sunLight.shadow.camera.bottom = -1000;
scene.add(sunLight); scene.add(sunLight);
// CHARGEMENT DES PONTS
const loader = new GLTFLoader(); const loader = new GLTFLoader();
// 1er pont
loader.load('modeles/old_bridge.glb', function (gltf) { loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge = gltf.scene; const bridge = gltf.scene;
// Activer les ombres
bridge.traverse((node) => { bridge.traverse((node) => {
if (node.isMesh) { if (node.isMesh) {
node.castShadow = true; node.castShadow = true;
...@@ -86,7 +84,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) { ...@@ -86,7 +84,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error); console.error("Erreur de chargement du pont :", error);
}); });
// 2e pont
loader.load('modeles/old_bridge.glb', function (gltf) { loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge2 = gltf.scene; const bridge2 = gltf.scene;
bridge2.traverse((node) => { bridge2.traverse((node) => {
...@@ -107,7 +104,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) { ...@@ -107,7 +104,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error); console.error("Erreur de chargement du pont :", error);
}); });
// 3e pont
loader.load('modeles/old_bridge.glb', function (gltf) { loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge3 = gltf.scene; const bridge3 = gltf.scene;
bridge3.traverse((node) => { bridge3.traverse((node) => {
...@@ -128,7 +124,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) { ...@@ -128,7 +124,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error); console.error("Erreur de chargement du pont :", error);
}); });
// 4e pont
loader.load('modeles/old_bridge.glb', function (gltf) { loader.load('modeles/old_bridge.glb', function (gltf) {
const bridge4 = gltf.scene; const bridge4 = gltf.scene;
bridge4.traverse((node) => { bridge4.traverse((node) => {
...@@ -149,7 +144,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) { ...@@ -149,7 +144,6 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
console.error("Erreur de chargement du pont :", error); console.error("Erreur de chargement du pont :", error);
}); });
// CHARGEMENT DES BATEAUX
loader.load('modeles/bateau.glb', function (gltf) { loader.load('modeles/bateau.glb', function (gltf) {
const boat1 = gltf.scene.clone(); const boat1 = gltf.scene.clone();
boat1.traverse((node) => { boat1.traverse((node) => {
...@@ -180,7 +174,6 @@ loader.load('modeles/bateau.glb', function (gltf) { ...@@ -180,7 +174,6 @@ loader.load('modeles/bateau.glb', function (gltf) {
console.error("Erreur de chargement des bateaux :", error); console.error("Erreur de chargement des bateaux :", error);
}); });
// SOL (eau)
const textureLoader = new THREE.TextureLoader(); const textureLoader = new THREE.TextureLoader();
const groundTexture = textureLoader.load('textures/water2.jpg'); const groundTexture = textureLoader.load('textures/water2.jpg');
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping; groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
...@@ -194,11 +187,10 @@ const solidGround = new THREE.Mesh( ...@@ -194,11 +187,10 @@ const solidGround = new THREE.Mesh(
); );
solidGround.rotation.x = -Math.PI / 2; solidGround.rotation.x = -Math.PI / 2;
solidGround.position.y = -2; solidGround.position.y = -2;
// Reçoit les ombres
solidGround.receiveShadow = true; solidGround.receiveShadow = true;
scene.add(solidGround); scene.add(solidGround);
// MODÈLE SCREAM
const objLoader = new OBJLoader(); const objLoader = new OBJLoader();
objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) { objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) {
const screamTexture = textureLoader.load('modeles/scream/Scream Texture.png'); const screamTexture = textureLoader.load('modeles/scream/Scream Texture.png');
...@@ -221,7 +213,6 @@ objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) { ...@@ -221,7 +213,6 @@ objLoader.load('modeles/scream/Scream 3D-bl.obj', function (obj) {
console.error("Erreur de chargement du modèle Scream :", error); console.error("Erreur de chargement du modèle Scream :", error);
}); });
// SPHEREBOX (Ciel panoramique)
const skyTexture = textureLoader.load('textures/skybox2.png'); const skyTexture = textureLoader.load('textures/skybox2.png');
const skyMaterial = new THREE.MeshBasicMaterial({ const skyMaterial = new THREE.MeshBasicMaterial({
map: skyTexture, map: skyTexture,
...@@ -235,7 +226,6 @@ skySphere.rotation.x = Math.PI / 2; ...@@ -235,7 +226,6 @@ skySphere.rotation.x = Math.PI / 2;
skySphere.rotation.z = Math.PI / -1; skySphere.rotation.z = Math.PI / -1;
scene.add(skySphere); scene.add(skySphere);
// SPRITES
const spriteTexture = textureLoader.load('textures/sprite.png'); const spriteTexture = textureLoader.load('textures/sprite.png');
const spriteMaterial = new THREE.SpriteMaterial({ map: spriteTexture }); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteTexture });
const sprite = new THREE.Sprite(spriteMaterial); const sprite = new THREE.Sprite(spriteMaterial);
...@@ -250,14 +240,13 @@ sprite2.position.set(20, 160, 0); ...@@ -250,14 +240,13 @@ sprite2.position.set(20, 160, 0);
sprite2.scale.set(50, 100, 50); sprite2.scale.set(50, 100, 50);
scene.add(sprite2); scene.add(sprite2);
// GUI
const gui = new dat.GUI(); const gui = new dat.GUI();
gui.add(camera, 'fov', 10, 100).name('Zoom').onChange(() => { gui.add(camera, 'fov', 10, 100).name('Zoom').onChange(() => {
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
}); });
gui.add(sunLight, 'intensity', 0, 10).name('Soleil Intensité'); gui.add(sunLight, 'intensity', 0, 10).name('Soleil Intensité');
gui.add(scene.fog, 'density', 0, 0.0015).name('Brouillard');
// ANIMATION
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
controls.update(); controls.update();
...@@ -265,7 +254,6 @@ function animate() { ...@@ -265,7 +254,6 @@ function animate() {
} }
animate(); animate();
// REDIMENSIONNEMENT
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment