use bounding boxes to optimize collision detection

public/client.js

@@ -21,9 +21,9 @@ camera.updateProjectionMatrix()
 camera.layers.enable(1)
 camera.layers.enable(2)
 
-// const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
 const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc })
-const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
+const terrainMaterial = new THREE.MeshToonMaterial({ color: 0x5c4033 })
+const bboxMaterial = new THREE.MeshToonMaterial({ color: 0xffd700, transparent: true, opacity: 0.2 })
 const opacity = 0.3
 const teamMaterials = {
   blue: new THREE.MeshToonMaterial({ color: 0x4444ff }),
@@ -328,7 +328,7 @@ function connectWebSocket() {
         rangeMarker.scale.y = e.height / rangeMarkerSize
         rangeMarker.position.y = (e.height / (rangeMarkerSize * 2)) - (e.height / 100)
         rangeMarker.layers.set(1)
-        buffMarker.visible = false
+        rangeMarker.visible = false
         entity.add(rangeMarker)
 
         entities[e.id] = entity
@@ -345,7 +345,7 @@ function connectWebSocket() {
       hp.scale.x = percentageHp
       hp.position.x = -(1 - percentageHp) / 2
 
-      entity.children.at(4).visible = e.id == playerId
+      entity.children.at(4).visible = e.id == playerId // TODO: undo, just for clarity
       entity.children.at(3).children.at(0).visible = e.casting != null
     }
 
@@ -414,6 +414,17 @@ function connectWebSocket() {
         terrain.userData.id = t.id
         scene.add(terrain)
         terrains[t.id] = terrain
+
+        // TODO: bboxes aren't tracked and can leak memory
+        const bboxValues = Object.values(t.bbox)
+        if (bboxValues.length >= 4) {
+          const width = (bboxValues[1] - bboxValues[3]) / 100
+          const height = (bboxValues[0] - bboxValues[2]) / 100
+
+          const bbox = new THREE.Mesh(new THREE.BoxGeometry(width, height, 0.2), bboxMaterial)
+          bbox.position.set((bboxValues[3] / 100) + (width / 2), (bboxValues[2] / 100) + (height / 2), 0)
+          scene.add(bbox)
+        }
       }
 
       terrain.position.set(t.position.x / 100, t.position.y / 100, 0)