add move command to client

public/main.js

@@ -4,30 +4,32 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
 const global = (0,eval)("this")
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+const raycaster = new THREE.Raycaster()
 const renderer = new THREE.WebGLRenderer()
 const entities = {}
 renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setAnimationLoop(animate)
-document.body.appendChild(renderer.domElement)
 
-const geometry = new THREE.BoxGeometry(1000, 1000)
+const geometry = new THREE.PlaneGeometry(1000, 1000)
 const material = new THREE.MeshBasicMaterial({ color: 0x115011 })
 const ground = new THREE.Mesh(geometry, material)
 scene.add(ground)
 
-// const loader = new GLTFLoader();
+// const loader = new GLTFLoader()
 // loader.load('player.gltf', (gltf) => scene.add(gltf.scene), undefined, (err) => console.log(err))
 
 global.camera = camera
 global.scene = scene
-camera.position.set(0, -250, 500)
+camera.position.set(0, -100, 200)
-camera.lookAt(0, 0, 0)
+camera.rotation.set((30 / 180) * Math.PI, 0, 0)
+// camera.lookAt(0, 0, 0)
 
 function animate() {
 	renderer.render(scene, camera)
 }
 
 var websocket = null
+global.websocket = null
 var timerId = null
 
 function connectWebSocket() {
@@ -57,6 +59,8 @@ function connectWebSocket() {
       }
       else {
         entity = new THREE.Mesh(new THREE.SphereGeometry(e.radius), new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }))
+        entity.userData.type = 'entity'
+        entity.userData.id = e.id
         scene.add(entity)
         entities[e.id] = entity
       }
@@ -70,4 +74,34 @@ function connectWebSocket() {
 
 window.addEventListener('load', () => {
   connectWebSocket()
+
+  const canvas = renderer.domElement
+  canvas.addEventListener('mousedown', (event) => {
+    raycaster.setFromCamera(new THREE.Vector2((event.clientX / canvas.clientWidth) * 2 - 1, (event.clientY / canvas.clientHeight) * -2 + 1), camera)
+    const intersect = raycaster.intersectObject(ground).at(0)
+    if (event.button == 0) {
+      const x = Math.round(intersect.point.x)
+      const y = Math.round(intersect.point.y)
+      websocket.send(JSON.stringify({ action: 'move', id: '1', x, y }))
+    }
+  })
+
+  document.addEventListener('wheel', (event) => {
+    if (event.deltaY < 0) {
+      camera.zoom += 0.2
+      if (camera.zoom > 3) {
+        camera.zoom = 3
+      }
+      camera.updateProjectionMatrix()
+    }
+    if (event.deltaY > 0) {
+      camera.zoom -= 0.2
+      if (camera.zoom < 1) {
+        camera.zoom = 1
+      }
+      camera.updateProjectionMatrix()
+    }
+  })
+
+  document.body.appendChild(canvas)
 })