add visualRadius

public/client.js

@@ -10,18 +10,21 @@ const backgroundColor = new THREE.Color().setHex(0x112233)
 scene.background = backgroundColor
 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.position.set(5, -12, 20)
+// camera.position.set(5, -12, 10)
+camera.rotation.set((56 / 180) * Math.PI, 0, 0)
 camera.layers.enable(1)
 camera.layers.enable(2)
 
 const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
-const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xff00ff })
+const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc })
 const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
+const opacity = 0.3
 const teamMaterials = {
-  blue: new THREE.MeshToonMaterial({ color: 0x4444ff }),
-  neutral: new THREE.MeshToonMaterial({ color: 0x22dd22 }),
-  red: new THREE.MeshToonMaterial({ color: 0xff4444 }),
+  blue: new THREE.MeshToonMaterial({ color: 0x4444ff, transparent: true, opacity }),
+  neutral: new THREE.MeshToonMaterial({ color: 0x22dd22, transparent: true, opacity }),
+  red: new THREE.MeshToonMaterial({ color: 0xff4444, transparent: true, opacity }),
+  projectile: new THREE.MeshToonMaterial({ color: 0xff00ff, transparent: true, opacity }),
 }
 
 const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
@@ -41,11 +44,11 @@ const material = new THREE.MeshToonMaterial({ color: 0x115011 })
 const ground = new THREE.Mesh(geometry, material)
 scene.add(ground)
 
-const ambientLight = new THREE.AmbientLight(0x404040)
+const ambientLight = new THREE.AmbientLight(0x404040, 10)
 scene.add(ambientLight)
 
 const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5)
-directionalLight.position.set(-0.3, 0.1, 1)
+directionalLight.position.set(-0.5, -0.05, 1)
 directionalLight.power = 3000
 scene.add(directionalLight)
 
@@ -74,11 +77,12 @@ function followCamera() {
   if (entity == null) { return }
 
   const offsetX = 0
-  const offsetY = -16.5
+  const offsetY = -28
 
   const distanceX = Math.abs((entity.position.x + offsetX) - camera.position.x)
   const distanceY = Math.abs((entity.position.y + offsetY) - camera.position.y)
 
+  camera.position.z = 20
   if (distanceX > 0.01) {
     if (entity.position.x + offsetX > camera.position.x) {
       camera.position.x += cameraSpeed * distanceX
@@ -118,7 +122,7 @@ function cameraMovement() {
   else if (keysDown.ArrowDown) { camera.position.y -= cameraSpeed }
 
   if (keysDown.Space) {
-    camera.position.set(entities['1'].position.x, entities['1'].position.y - 17, 10)
+    camera.position.set(entities[playerId].position.x, entities[playerId].position.y - 28, 20)
   }
 }
 
@@ -177,7 +181,7 @@ function connectWebSocket() {
         entity = entities[e.id]
       }
       else {
-        entity = new THREE.Mesh(new THREE.CylinderGeometry(e.radius / 100, e.radius / 100, e.height / 50), entityMaterial)
+        entity = new THREE.Mesh(new THREE.CylinderGeometry(e.visualRadius / 100, e.visualRadius / 100, e.height / 50), entityMaterial)
         entity.rotation.x = Math.PI / 2
         entity.userData.type = 'entity'
         entity.userData.id = e.id
@@ -199,8 +203,9 @@ function connectWebSocket() {
 
         const teamMaterial = teamMaterials[e.team]
         const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius + 2) / 100, (e.radius + 2) / 100, 1), teamMaterial)
-        teamMarker.scale.y = e.height / 400
-        teamMarker.position.y = (e.height / 800) - (e.height / 100)
+        const teamMarkerSize = 4000
+        teamMarker.scale.y = e.height / teamMarkerSize
+        teamMarker.position.y = (e.height / (teamMarkerSize * 2)) - (e.height / 100)
         entity.rotation.x = Math.PI / 2
         entity.add(teamMarker)
 
@@ -234,13 +239,22 @@ function connectWebSocket() {
         projectile = projectiles[p.id]
       }
       else {
-        projectile = new THREE.Mesh(new THREE.SphereGeometry(p.radius / 100), projectileMaterial)
+        projectile = new THREE.Mesh(new THREE.SphereGeometry(p.visualRadius / 100), projectileMaterial)
         projectile.userData.type = 'projectile'
         projectile.userData.id = p.id
         projectile.position.set(p.position.x / 100, p.position.y / 100, p.height / 100)
         projectile.layers.set(2)
         scene.add(projectile)
 
+        const teamMaterial = teamMaterials['projectile']
+        const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((p.radius) / 100, (p.radius) / 100, 1), teamMaterial)
+        const teamMarkerSize = 4000
+        teamMarker.scale.y = p.height / teamMarkerSize
+        teamMarker.position.y = (p.height / (teamMarkerSize * 2)) - (p.height / 100)
+        projectile.rotation.x = Math.PI / 2
+        projectile.layers.set(2)
+        projectile.add(teamMarker)
+
         projectiles[p.id] = projectile
       }