add camera movement

public/client.js

@@ -13,12 +13,12 @@ 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 minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
 const minimapRenderer = new THREE.WebGLRenderer()
 
 minimapRenderer.setSize(300, 300)
 minimapRenderer.setAnimationLoop(minimapRender)
-minimapCamera.position.set(5, 5, 10)
+minimapCamera.position.set(10, 10, 10)
 
 const entities = {}
 const terrains = {}
@@ -41,7 +41,10 @@ global.renderer = renderer
 global.camera = camera
 global.scene = scene
 
+const keysDown = {}
+
 function render() {
+  cameraMovement()
 	renderer.render(scene, camera)
 }
 
@@ -49,6 +52,19 @@ function minimapRender() {
 	minimapRenderer.render(scene, minimapCamera)
 }
 
+const cameraSpeed = 0.1
+function cameraMovement() {
+  if (keysDown.ArrowLeft) { camera.position.x -= cameraSpeed }
+  else if (keysDown.ArrowRight) { camera.position.x += cameraSpeed }
+
+  if (keysDown.ArrowUp) { camera.position.y += cameraSpeed }
+  else if (keysDown.ArrowDown) { camera.position.y -= cameraSpeed }
+
+  if (keysDown.Space) {
+    camera.position.set(entities['1'].position.x, entities['1'].position.y - 17, 10)
+  }
+}
+
 var websocket = null
 global.websocket = null
 var timerId = null
@@ -160,13 +176,15 @@ window.addEventListener('load', () => {
     }
   })
 
-  window.addEventListener("resize", (event) => {
+  window.addEventListener('resize', (event) => {
     camera.aspect = window.innerWidth / window.innerHeight
     camera.updateProjectionMatrix()
     renderer.setSize(window.innerWidth, window.innerHeight)
   })
 
-  document.addEventListener("contextmenu", (event) => event.preventDefault())
+  document.addEventListener('contextmenu', (event) => event.preventDefault())
+  window.addEventListener('keydown', (event) => keysDown[event.code] = true)
+  window.addEventListener('keyup', (event) => keysDown[event.code] = false)
 
   document.body.appendChild(canvas)