add tweening

public/client.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three'
+import { Tween } from '@tweenjs/tween.js'
 
-const global = (0,eval)("this")
+const global = (0,eval)('this')
 const scene = new THREE.Scene()
 const raycaster = new THREE.Raycaster()
 const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
@@ -13,16 +14,15 @@ 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(-10, 10, 10, -10)
-const minimapCamera = new THREE.OrthographicCamera(-6, 6, 6, -6)
+const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
 const minimapRenderer = new THREE.WebGLRenderer()
 
-minimapRenderer.setSize(600, 600)
+minimapRenderer.setSize(300, 300)
 minimapRenderer.setAnimationLoop(minimapRender)
-// minimapCamera.position.set(10, 10, 10)
-minimapCamera.position.set(6, 6, 6)
+minimapCamera.position.set(10, 10, 10)
 
 const entities = {}
+const positionTweens = {}
 const terrains = {}
 
 const geometry = new THREE.PlaneGeometry(0, 0)
@@ -43,11 +43,12 @@ global.renderer = renderer
 global.camera = camera
 global.scene = scene
 
-
+const tweenDuration = 60
 const keysDown = {}
 
 function render() {
   cameraMovement()
+  Object.values(positionTweens).forEach((tween) => tween.update())
 	renderer.render(scene, camera)
 }
 
@@ -57,8 +58,7 @@ function minimapRender() {
 
 var cameraLocked = true
 function followCamera() {
-  // entity = entities.filter((e) => e.id = '1').at(0)
-  const entity = entities['1']
+  const entity = entities[playerId]
   if (entity == null) { return }
 
   const offsetX = 0
@@ -90,8 +90,6 @@ function followCamera() {
   else if (distanceY != 0) {
     camera.position.y = entity.position.y + offsetY
   }
-
-
 }
 
 const cameraSpeed = 0.03
@@ -115,9 +113,10 @@ function cameraMovement() {
 var websocket = null
 global.websocket = null
 var timerId = null
+var playerId = null
 
 function connectWebSocket() {
-  websocket = new WebSocket('ws://127.0.0.1:1280/ws')
+  websocket = new WebSocket(`ws://${window.location.hostname}:1280/ws`)
   global.websocket = websocket
   websocket.onerror = () => websocket.close()
   websocket.onopen = () => {
@@ -156,7 +155,8 @@ function connectWebSocket() {
         entities[e.id] = entity
       }
 
-      entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
+      // 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()
     }
 
     for (const t of state.terrains ?? []) {
@@ -184,6 +184,12 @@ function connectWebSocket() {
 }
 
 window.addEventListener('load', () => {
+  const params = Object.fromEntries(new URLSearchParams(window.location.search).entries())
+  playerId = params.id
+  if (playerId == null) {
+    playerId = prompt('Player ID:')
+  }
+
   connectWebSocket()
 
   const canvas = renderer.domElement
@@ -196,13 +202,13 @@ window.addEventListener('load', () => {
       if (event.button == 0) {
         const x = Math.round(intersect.x * 100)
         const y = Math.round(intersect.y * 100)
-        websocket.send(JSON.stringify({ action: 'move', id: '2', x, y }))
+        websocket.send(JSON.stringify({ action: 'teleport', id: playerId, x, y }))
       }
 
       if (event.button == 2) {
         const x = Math.round(intersect.x * 100)
         const y = Math.round(intersect.y * 100)
-        websocket.send(JSON.stringify({ action: 'move', id: '1', x, y }))
+        websocket.send(JSON.stringify({ action: 'move', id: playerId, x, y }))
       }
     }
   })
@@ -233,6 +239,11 @@ window.addEventListener('load', () => {
   document.addEventListener('contextmenu', (event) => event.preventDefault())
   window.addEventListener('keydown', (event) => keysDown[event.code] = true)
   window.addEventListener('keyup', (event) => keysDown[event.code] = false)
+  window.addEventListener('keydown', (event) => {
+    if (event.code == 'Space') {
+      cameraLocked = !cameraLocked
+    }
+  })
 
   document.body.appendChild(canvas)
 

public/index.html

@@ -6,7 +6,8 @@
       {
         "imports": {
           "three": "/three/build/three.module.js",
-          "three/addons/": "/three/examples/jsm/"
+          "three/addons/": "/three/examples/jsm/",
+          "@tweenjs/tween.js": "/@tweenjs/tween.js/dist/tween.esm.js"
         }
       }
     </script>
@@ -26,17 +27,19 @@
       }
 
       .debug-panel {
-        display: none;
+        /* display: none; */
+        font-size: 0.8rem;
         position: fixed;
         opacity: 0.2;
-        inset: 0 0 auto auto;
+        overflow-y: scroll;
+        inset: 0 0 290px auto;
         border-bottom-left-radius: 10px;
         padding: 10px 10px 20px 20px;
         background-color: white;
         border: 5px solid gray;
         border-top: none;
         border-right: none;
-        width: 400px;
+        width: 300px;
         transition-duration: 0.2s;
         transition-property: opacity;
       }