learn to swim

main.js

@@ -44,7 +44,7 @@ loadMngr.onProgress = function (url, itemsLoaded, itemsTotal) {
 loadMngr.onError = function (url) {
     message.innerHTML = `Erreur de chargement :<br/>${url}`
 }
-loadMngr.onLoad = () => {
+loadMngr.onLoad = function (url, itemsLoaded, itemsTotal) {
     message.innerHTML = ""
     message.className = ""
 
@@ -136,38 +136,38 @@ const groundMaterial = new THREE.MeshStandardMaterial({
         'textures/angled-blocks-vegetation/albedo.png',
         texture => {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-            texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+            texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
         }
     ),
     aoMap: loader.load(
         'textures/angled-blocks-vegetation/ao.png',
         texture => {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-            texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+            texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
         }
     ),
     metalnessMap: loader.load(
         'textures/angled-blocks-vegetation/metallic.png',
         texture => {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-            texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+            texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
         }
     ),
     normalMap: loader.load(
         'textures/angled-blocks-vegetation/normal-dx.png',
         texture => {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-            texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+            texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
         }
     ),
     roughnessMap: loader.load(
         'textures/angled-blocks-vegetation/roughness.png',
         texture => {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping
-            texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+            texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
         }
     ),
-	envMapIntensity  : 0.5
+	envMapIntensity  : 0.6
 })
 
 const sideGroundMaterial = new THREE.MeshStandardMaterial({
@@ -273,6 +273,7 @@ ocean.material.onBeforeCompile = function (shader) {
 };
 
 scene.add(ocean);
+const oceanOctree  = new Octree().fromGraphNode(ocean);
 
 // Lights
 
@@ -340,12 +341,12 @@ const raftMaterial = new THREE.MeshStandardMaterial({
         texture.wrapS = texture.wrapT = THREE.RepeatWrapping
         texture.repeat.set(2, 1)
     }),
-    displacementScale: -0.2,
+    displacementScale: -0.3,
-    displacementBias: 0.1,
+    displacementBias: 0.15,
 	envMapIntensity: 0.5
 })
 const raft = new THREE.Mesh(raftGeometry, raftMaterial)
-raft.position.set( .25, ocean.position.y, -mazeWidth/2 - 1.1 );
+raft.position.set( .25, ocean.position.y, -mazeWidth/2 - 1.1 )
 raft.castShadow = true;
 
 scene.add(raft);
@@ -376,22 +377,32 @@ if (dev) {
 
     });
 
-    const folderSky = gui.addFolder('Sky');
+    const raftFolder = gui.addFolder("Raft")
-    folderSky.add(parameters, 'elevation', 0, 90, 0.1).onChange(updateSun);
+    const raftPositionFolder = raftFolder.addFolder("position")
-    folderSky.add(parameters, 'azimuth', - 180, 180, 0.1).onChange(updateSun);
+    raftPositionFolder.add(raft.position, "x")
-    folderSky.open();
+    raftPositionFolder.add(raft.position, "y")
+    raftPositionFolder.add(raft.position, "z")
+    const raftRotationFolder = raftFolder.addFolder("rotation")
+    raftRotationFolder.add(raft.rotation, "x")
+    raftRotationFolder.add(raft.rotation, "y")
+    raftRotationFolder.add(raft.rotation, "z")
+
+    const skyFolder = gui.addFolder('Sky');
+    skyFolder.add(parameters, 'elevation', 0, 90, 0.1).onChange(updateSun);
+    skyFolder.add(parameters, 'azimuth', - 180, 180, 0.1).onChange(updateSun);
+    skyFolder.close();
 
     const waterUniforms = ocean.material.uniforms;
 
-    const folderWater = gui.addFolder('Water');
+    const waterFolder = gui.addFolder('Water');
-    folderWater
+    waterFolder
         .add(waterUniforms.distortionScale, 'value', 0, 8, 0.1)
         .name('distortionScale');
-    folderWater.add(waterUniforms.size, 'value', 0.1, 10, 0.1).name('size');
+    waterFolder.add(waterUniforms.size, 'value', 0.1, 10, 0.1).name('size');
-    folderWater.add(ocean.material, 'wireframe');
+    waterFolder.add(ocean.material, 'wireframe');
-    folderWater.open();
+    waterFolder.close();
 
-    const waveAFolder = gui.addFolder('Wave A');
+    const waveAFolder = waterFolder.addFolder('Wave A');
     waveAFolder
         .add(waves.A, 'direction', 0, 359)
         .name('Direction')
@@ -420,7 +431,7 @@ if (dev) {
         });
     waveAFolder.open();
 
-    const waveBFolder = gui.addFolder('Wave B');
+    const waveBFolder = waterFolder.addFolder('Wave B');
     waveBFolder
         .add(waves.B, 'direction', 0, 359)
         .name('Direction')
@@ -449,7 +460,7 @@ if (dev) {
         });
     waveBFolder.open();
 
-    const waveCFolder = gui.addFolder('Wave C');
+    const waveCFolder = waterFolder.addFolder('Wave C');
     waveCFolder
         .add(waves.C, 'direction', 0, 359)
         .name('Direction')
@@ -506,26 +517,6 @@ let escaped = false;
 const pointerLockControls = new PointerLockControls(camera, document.body);
 pointerLockControls.pointerSpeed = 0.7;
 
-container.addEventListener('click', function () {
-
-    pointerLockControls.lock();
-
-});
-
-pointerLockControls.addEventListener('lock', function () {
-
-    ambiance.play();
-
-});
-
-pointerLockControls.addEventListener('unlock', function () {
-
-    ambiance.pause();
-
-});
-
-scene.add(pointerLockControls.getObject());
-
 const keyStates = {};
 
 document.addEventListener('keydown', (event) => {
@@ -541,12 +532,51 @@ document.addEventListener('keyup', (event) => {
 
 });
 
+var pressedMouseButtons = [];
+
+function onMouseChange(event) {
+
+    for(var i=0; i < pressedMouseButtons.length || i <= Math.log2(event.buttons); i++) {
+        pressedMouseButtons[i] = (event.buttons & (1 << i)) > 0
+    }
+
+}
+
+container.addEventListener('click', function () {
+
+    pointerLockControls.lock();
+
+});
+
+pointerLockControls.addEventListener('lock', function () {
+
+    ambiance.play();
+
+    container.addEventListener('mousedown', onMouseChange)
+
+    container.addEventListener('mouseup', onMouseChange)
+
+});
+
+pointerLockControls.addEventListener('unlock', function () {
+
+    ambiance.pause();
+
+    container.removeEventListener('mousedown', onMouseChange)
+
+    container.removeEventListener('mouseup', onMouseChange)
+
+});
+
+scene.add(pointerLockControls.getObject());
+
 function playerCollisions() {
 
-    const playerOnMaze = mazeOctree.capsuleIntersect(playerCollider);
+    const playerOnMaze  = mazeOctree.capsuleIntersect(playerCollider)
-    const playerOnRaft = raftOctree.capsuleIntersect(playerCollider);
+    const playerOnRaft  = raftOctree.capsuleIntersect(playerCollider)
+    const playerOnWater = oceanOctree.capsuleIntersect(playerCollider)
 
-    const result = playerOnMaze || playerOnRaft;
+    const result = playerOnMaze || playerOnRaft || playerOnWater
 
     playerOnFloor = false;
 
@@ -562,14 +592,20 @@ function playerCollisions() {
 
         playerCollider.translate(result.normal.multiplyScalar(result.depth));
 
-    }
-
         if (playerOnRaft) {
     
-        camera.position.y = raft.position.y + 0.9;
+            camera.position.y = playerCollider.end.y + raft.position.y
     
             if (!escaped) gameEnd()
     
+        } else if (playerOnWater) {
+    
+            const t = ocean.material.uniforms['time'].value;
+            const waveInfo = getWaveInfo(playerCollider.end.x, playerCollider.end.z, t)
+            camera.position.y = ocean.position.y + waveInfo.position.y + 0.2
+            
+        }
+
     }
 
 }
@@ -577,7 +613,7 @@ function playerCollisions() {
 function gameEnd() {
 
     escaped = true;
-    message.innerHTML = '<a href="" title="Rejouer">Libre !</a>';
+    message.innerHTML = '<h2>Libre !</h2><a href="">Rejouer</a>';
     message.className = "escaped";
     piano.play();
 
@@ -594,8 +630,7 @@ function updatePlayer(deltaTime) {
 
         playerVelocity.y -= GRAVITY * deltaTime;
 
-        // small air resistance
+        damping *= 0.1; // small air resistance
-        damping *= 0.1;
 
     }
 
@@ -631,13 +666,6 @@ function getSideVector() {
 
 }
 
-var pressedMouseButtons = [];
-document.body.onmousedown = document.body.onmouseup = function(event) { 
-    for(var i=0; i < pressedMouseButtons.length || i <= Math.log2(event.buttons); i++) {
-        pressedMouseButtons[i] = (event.buttons & (1 << i)) > 0
-    }
-}
-
 function controls(deltaTime) {
 
     // gives a bit of air control

style.css

@@ -76,14 +76,14 @@ body {
 }
 
 #message a {
-  text-decoration: none;
   color: inherit;
 }
 
 #message.escaped {
-  display: flex;
+  display: block; 
   opacity: 100%;
-  font-size: 10vh;
+  font-size: 4vh;
+  text-align: center;
   top: 30vh;
   animation: escaped 5s;
 }