main.js

@@ -122,7 +122,7 @@ for (let i = 0; i < maze.count; i++) {
     const clone = invisibleWall.clone()
     clone.position.setFromMatrixPosition(matrix);
     clone.position.y = 1;
-    //collisionner.add(clone);
+    collisionner.add(clone);
 }
 
 // Ground
@@ -165,17 +165,12 @@ const groundMaterial = new THREE.MeshStandardMaterial({
         }
     ),
 })
-
-const sideGroundMaterial = new THREE.MeshStandardMaterial({
-    map         : wallMaterial.map.clone(),
-    normalMap   : wallMaterial.normalMap.clone(),
-	normalScale : new THREE.Vector2(0.6, 0.6),
-    metalnessMap: wallMaterial.metalnessMap.clone(),
-    aoMap       : wallMaterial.aoMap.clone(),
-    roughnessMap: wallMaterial.roughnessMap.clone(),
-	roughness   : 1,
-	envMapIntensity: 0.4
-})
+const sideGroundMaterial = groundMaterial.clone()
+sideGroundMaterial.map = wallMaterial.map.clone()
+sideGroundMaterial.normalMap = wallMaterial.normalMap.clone()
+sideGroundMaterial.metalnessMap = wallMaterial.metalnessMap.clone()
+sideGroundMaterial.roughnessMap = wallMaterial.roughnessMap.clone()
+sideGroundMaterial.aoMap = wallMaterial.aoMap.clone()
 sideGroundMaterial.map.wrapS = sideGroundMaterial.map.wrapT = THREE.RepeatWrapping
 sideGroundMaterial.normalMap.wrapS = sideGroundMaterial.normalMap.wrapT = THREE.RepeatWrapping
 sideGroundMaterial.metalnessMap.wrapS = sideGroundMaterial.metalnessMap.wrapT = THREE.RepeatWrapping
@@ -206,10 +201,6 @@ ground.updateMatrix();
 
 collisionner.add(ground)
 
-scene.add(collisionner);
-
-const mazeOctree = new Octree().fromGraphNode(collisionner);
-
 // Water
 
 const waterGeometry = new THREE.PlaneGeometry(1024, 1024, 512, 512);
@@ -353,8 +344,14 @@ raft.position.set( .2, ocean.position.y, -mazeWidth/2 - 1 );
 raft.rotation.y = 1.4
 raft.castShadow = true;
 
-scene.add(raft);
-const raftOctree  = new Octree().fromGraphNode(raft);
+collisionner.add(raft);
+const raftOctree  = new Octree();
+raftOctree.fromGraphNode(raft)
+
+scene.add(collisionner);
+
+const worldOctree = new Octree();
+worldOctree.fromGraphNode(collisionner);
 
 //
 
@@ -371,7 +368,7 @@ if (showParam) {
     lightHelper.position.copy(maze.start)
     lightHelper.visible = false;
 
-    const octreeHelper = new OctreeHelper(mazeOctree);
+    const octreeHelper = new OctreeHelper(worldOctree);
     octreeHelper.visible = false;
     scene.add(octreeHelper);
     const showHelper = gui.add({ helpers: false }, "helpers")
@@ -549,10 +546,15 @@ document.addEventListener('keyup', (event) => {
 
 function playerCollisions() {
 
-    const playerOnMaze = mazeOctree.capsuleIntersect(playerCollider);
-    const playerOnRaft = raftOctree.capsuleIntersect(playerCollider);
+    if (raftOctree.capsuleIntersect(playerCollider)) {
 
-    const result = playerOnMaze || playerOnRaft;
+        camera.position.y = raft.position.y + 0.9;
+
+        if (!escaped) gameEnd()
+
+    }
+
+    const result = worldOctree.capsuleIntersect(playerCollider);
 
     playerOnFloor = false;
 
@@ -570,14 +572,6 @@ function playerCollisions() {
 
     }
 
-    if (playerOnRaft) {
-
-        camera.position.y = raft.position.y + 0.9;
-
-        if (!escaped) gameEnd()
-
-    }
-
 }
 
 function gameEnd() {
@@ -610,10 +604,10 @@ function updatePlayer(deltaTime) {
     const deltaPosition = playerVelocity.clone().multiplyScalar(deltaTime);
     playerCollider.translate(deltaPosition);
 
-    camera.position.copy(playerCollider.end);
-
     playerCollisions();
 
+    camera.position.copy(playerCollider.end);
+
 }
 
 function getForwardVector() {
@@ -769,7 +763,6 @@ function animate() {
     const deltaTime = delta / STEPS_PER_FRAME;
 
     ocean.material.uniforms['time'].value += delta;
-
     updateRaft(delta);
 
     // we look for collisions in substeps to mitigate the risk of

style.css

@@ -51,8 +51,8 @@ body {
   justify-content: center;
   align-items: center;
   position: relative;
-  width: 200px;
-  height: 200px;
+  width: 150px;
+  height: 150px;
   border: 4px solid dimgray;
   border-radius: 50%;
   font-size: 0;
@@ -66,8 +66,8 @@ body {
   content: "";
   display: flex;
   position: absolute;
-  width: 200px;
-  height: 200px;
+  width: 150px;
+  height: 150px;
   top: -4px;
   left: -4px;
   border: 4px solid #1da8b7;