adjust visual height

public/client.js

@@ -172,7 +172,7 @@ function connectWebSocket() {
         entity = entities[e.id]
       }
       else {
-        entity = new THREE.Mesh(new THREE.CylinderGeometry(e.radius / 100, e.radius / 100, e.radius / 50), entityMaterial)
+        entity = new THREE.Mesh(new THREE.CylinderGeometry(e.radius / 100, e.radius / 100, e.height / 50), entityMaterial)
         entity.rotation.x = Math.PI / 2
         entity.userData.type = 'entity'
         entity.userData.id = e.id
@@ -183,7 +183,7 @@ function connectWebSocket() {
 
         const hpMargin = 0.4
         const maxHp = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xd03333 }))
-        maxHp.position.set(0, (e.radius / 100) + hpMargin, 0)
+        maxHp.position.set(0, (e.height / 100) + hpMargin, 0)
         maxHp.scale.set(1.5, 0.2, 1)
         maxHp.layers.set(1)
         entity.add(maxHp)
@@ -227,7 +227,7 @@ function connectWebSocket() {
         projectile = new THREE.Mesh(new THREE.SphereGeometry(p.radius / 100), projectileMaterial)
         projectile.userData.type = 'projectile'
         projectile.userData.id = p.id
-        projectile.position.set(p.position.x / 100, p.position.y / 100, p.visualHeight / 100)
+        projectile.position.set(p.position.x / 100, p.position.y / 100, p.height / 100)
         projectile.layers.set(2)
         scene.add(projectile)
 
@@ -235,7 +235,7 @@ function connectWebSocket() {
       }
 
       projectile.userData.flaggedForRemoval = false
-      positionTweens[projectile.id] = new Tween(projectile.position).to({ x: p.position.x / 100, y: p.position.y / 100, z: p.visualHeight / 100 }, tweenDuration).start()
+      positionTweens[projectile.id] = new Tween(projectile.position).to({ x: p.position.x / 100, y: p.position.y / 100, z: p.height / 100 }, tweenDuration).start()
     }
 
     for (const p of Object.values(projectiles)) {

src/entity.js

@@ -11,6 +11,7 @@ export default class Entity {
   radius = 0
   health = 1
   maxHealth = 1
+  height = 40
   abilities = [
     Ability.rangedAttack,
     Ability.straightShot,

src/index.js

@@ -139,6 +139,7 @@ function laneScenario() {
   const entity1 = new Entity({
     id: '1',
     health: 100,
+    height: 100,
     maxHealth: 100,
     position: new Vector2(500, 150),
     radius: 50,
@@ -150,6 +151,7 @@ function laneScenario() {
   const entity2 = new Entity({
     id: '2',
     health: 100,
+    height: 100,
     maxHealth: 100,
     position: new Vector2(1600, 1800),
     radius: 50,
@@ -211,7 +213,6 @@ function laneScenario() {
 
     const direction = goal.clone().sub(entity.position).normalize().multiplyScalar(75)
     const subGoal = entity.position.clone().add(direction)
-    // console.log(subGoal)
     entity.attackAction(subGoal.x, subGoal.y)
 
     if (entity.health <= 0) {

src/projectile.js

@@ -9,7 +9,7 @@ export default class Projectile {
   radius = 5
   owner = null
   onCollide = null
-  visualHeight = 50
+  height = 50
 
   #position = new Vector2()
   #dest = null