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

Effet miroir + animation sur les bateaux

parent 4b6ae3c9
No related branches found
No related tags found
No related merge requests found
......@@ -9,7 +9,7 @@
- [X] Ombres portées
- [X] Position de la caméra
- [X] Brouillard
- [ ] Effet miroir
- [X] Effet miroir
- [X] Texture classique
- [X] Texture avec transparence
- [X] Sprites
......@@ -17,4 +17,5 @@
- [X] Skybox
- [ ] specular maps
- [ ] normal maps
- [X] Interaction par GUI
\ No newline at end of file
- [X] Interaction par GUI
- [X] Animation
\ No newline at end of file
......@@ -213,7 +213,7 @@
<label for="item11">Brouillard</label>
</li>
<li>
<input type="checkbox" id="item12">
<input type="checkbox" id="item12" checked>
<label for="item12">Effet miroir</label>
</li>
<li>
......@@ -248,6 +248,10 @@
<input type="checkbox" id="item20" checked>
<label for="item20">Interaction par GUI</label>
</li>
<li>
<input type="checkbox" id="item21" checked>
<label for="item21">Animation</label>
</li>
</ul>
</section>
<div id="scrollButton" class="button">
......
......@@ -3,8 +3,7 @@ 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 { Reflector } from 'https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/objects/Reflector.js';
// SCENE
const scene = new THREE.Scene();
......@@ -13,7 +12,7 @@ scene.fog = new THREE.FogExp2(0xCCC8C4);
// CAMERA
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
camera.position.set(380, 200, 30);
camera.position.set(950, 400, 30);
// RENDERER
const renderer = new THREE.WebGLRenderer({ antialias: true });
......@@ -55,7 +54,7 @@ spotLight.position.set(250, 200, -50);
spotLight.castShadow = true;
scene.add(spotLight);
let boat1, boat2;
const loader = new GLTFLoader();
loader.load('modeles/old_bridge.glb', function (gltf) {
......@@ -140,35 +139,34 @@ loader.load('modeles/old_bridge.glb', function (gltf) {
});
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);
boat1 = gltf.scene.clone();
boat1.traverse((node) => {
if (node.isMesh) {
node.castShadow = true;
node.receiveShadow = true;
}
});
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();
......@@ -192,7 +190,22 @@ solidGround.position.y = -2;
solidGround.receiveShadow = true;
scene.add(solidGround);
// Effet miroir
const mirrorGeometry = new THREE.PlaneGeometry(10000, 10000);
const mirror = new Reflector(mirrorGeometry, {
clipBias: 0.003,
textureWidth: window.innerWidth * window.devicePixelRatio,
textureHeight: window.innerHeight * window.devicePixelRatio,
color: 0x777777
});
mirror.rotation.x = -Math.PI / 2;
mirror.position.y = -1.999;
mirror.material.transparent = true;
mirror.material.opacity = 0.5;
mirror.renderOrder = 1;
scene.add(mirror);
const objLoader = new OBJLoader();
......@@ -280,9 +293,33 @@ 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();
const t = Date.now() * 0.001;
const speed1 = 0.1;
const speed2 = 0.1;
if (boat1) {
const radius1 = 100;
const center1 = { x: -300, z: -500 };
boat1.position.x = center1.x + radius1 * Math.cos(t * speed1);
boat1.position.z = center1.z + radius1 * Math.sin(t * speed1);
boat1.rotation.y = -t * speed1;
}
if (boat2) {
const radius2 = 100;
const center2 = { x: -200, z: -600 };
boat2.position.x = center2.x + radius2 * Math.cos(-t * speed2);
boat2.position.z = center2.z + radius2 * Math.sin(-t * speed2);
boat2.rotation.y = t * speed2;
}
renderer.render(scene, camera);
}
animate();
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment