add terrain collision

public/client.js

@@ -10,6 +10,9 @@ renderer.setAnimationLoop(render)
 camera.position.set(5, -12, 10)
 camera.rotation.set((60 / 180) * Math.PI, 0, 0)
 
+const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
+const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
+
 const minimapCamera = new THREE.OrthographicCamera(-5, 5, 5, -5)
 const minimapRenderer = new THREE.WebGLRenderer()
 
@@ -18,6 +21,7 @@ minimapRenderer.setAnimationLoop(minimapRender)
 minimapCamera.position.set(5, 5, 10)
 
 const entities = {}
+const terrains = {}
 
 const geometry = new THREE.PlaneGeometry(0, 0)
 const material = new THREE.MeshToonMaterial({ color: 0x115011 })
@@ -75,13 +79,13 @@ function connectWebSocket() {
       ground.position.set(state.width / 200, state.height / 200, 0)
     }
 
-    for (const e of state.entities) {
+    for (const e of state.entities ?? []) {
       let entity
       if (e.id in entities) {
         entity = entities[e.id]
       }
       else {
-        entity = new THREE.Mesh(new THREE.SphereGeometry(e.radius / 100), new THREE.MeshToonMaterial({ color: 0xffffff }))
+        entity = new THREE.Mesh(new THREE.SphereGeometry(e.radius / 100), entityMaterial)
         entity.userData.type = 'entity'
         entity.userData.id = e.id
         scene.add(entity)
@@ -91,6 +95,26 @@ function connectWebSocket() {
       entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
     }
 
+    for (const t of state.terrains ?? []) {
+      let terrain
+      if (t.id in terrains) {
+        terrain = terrains[t.id]
+      }
+      else {
+        const vertices = t.relativeVertices
+        const shape = new THREE.Shape()
+        shape.moveTo(vertices.at(0).x / 100, vertices.at(0).y / 100)
+        vertices.slice(1).forEach((v) => shape.lineTo(v.x / 100, v.y / 100))
+        terrain = new THREE.Mesh(new THREE.ExtrudeGeometry(shape, { bevelEnabled: false, depth: 0.5 }), terrainMaterial)
+        terrain.userData.type = 'terrain'
+        terrain.userData.id = t.id
+        scene.add(terrain)
+        terrains[t.id] = terrain
+      }
+
+      terrain.position.set(t.position.x / 100, t.position.y / 100, 0)
+    }
+
     document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
   }
 }