add lane scenario with HP

public/client.js

@@ -10,6 +10,7 @@ renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setAnimationLoop(render)
 camera.position.set(5, -12, 10)
 camera.rotation.set((60 / 180) * Math.PI, 0, 0)
+camera.layers.enable(1)
 
 const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
 const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
@@ -62,7 +63,7 @@ function followCamera() {
   if (entity == null) { return }
 
   const offsetX = 0
-  const offsetY = -15
+  const offsetY = -16.5
 
   const distanceX = Math.abs((entity.position.x + offsetX) - camera.position.x)
   const distanceY = Math.abs((entity.position.y + offsetY) - camera.position.y)
@@ -152,11 +153,30 @@ function connectWebSocket() {
         entity.userData.type = 'entity'
         entity.userData.id = e.id
         scene.add(entity)
+
+        const hpMargin = 0.4
+        const maxHp = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xd03333 }))
+        maxHp.position.set(0, (e.radius / 100) + hpMargin, 0)
+        maxHp.scale.set(1.5, 0.2, 1)
+        maxHp.layers.set(1)
+        entity.add(maxHp)
+
+        const hp = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0x77ff77 }))
+        hp.position.set(0, 0, 0)
+        hp.scale.set(1, 1, 1)
+        hp.layers.set(1)
+        maxHp.add(hp)
+
         entities[e.id] = entity
       }
 
       // entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
       positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: e.radius / 100 }, tweenDuration).start()
+
+      const hp = entity.children.at(0).children.at(0)
+      const percentageHp = e.health / e.maxHealth
+      hp.scale.x = percentageHp
+      hp.position.x = -(1 - percentageHp) / 2
     }
 
     for (const t of state.terrains ?? []) {