Buff Queen AKA "Ez egy fa?"

Because the first placeholder player model resembled a queen that's been to the gym a bit too much. Also, before she got her head and hands, she looked like a tree, legit.
2024-12-21 23:46:01 +09:00
commit 2957903cb1
15 changed files with 1509 additions and 0 deletions
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="author" content="Thayol">
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "/three/build/three.module.js",
+          "three/addons/": "/three/examples/jsm/"
+        }
+      }
+    </script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        font-family: sans-serif;
+      }
+
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .debug-panel {
+        position: fixed;
+        inset: 0 0 auto auto;
+        border-bottom-left-radius: 10px;
+        padding: 10px 10px 20px 20px;
+        background-color: white;
+        border: 5px solid gray;
+        border-top: none;
+        border-right: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="debug-panel">
+      <p>Connection: <span id="connection"></span></p>
+      <pre id="state"></pre>
+    </div>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>
@@ -0,0 +1,73 @@
+import * as THREE from 'three'
+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 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 material = new THREE.MeshBasicMaterial({ color: 0x115011 })
+const ground = new THREE.Mesh(geometry, material)
+scene.add(ground)
+
+// 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.lookAt(0, 0, 0)
+
+function animate() {
+	renderer.render(scene, camera)
+}
+
+var websocket = null
+var timerId = null
+
+function connectWebSocket() {
+  websocket = new WebSocket('ws://127.0.0.1:1280/ws')
+  global.websocket = websocket
+  websocket.onerror = () => websocket.close()
+  websocket.onopen = () => {
+    document.getElementById('connection').innerHTML = 'open'
+    clearInterval(timerId)
+  }
+  websocket.onclose = () => {
+    websocket = null
+    document.getElementById('connection').innerHTML = 'closed'
+    timerId = setInterval(() => {
+      if (websocket == null) {
+        connectWebSocket()
+      }
+    }, 2000)
+  }
+
+  websocket.onmessage = (event) => {
+    let state = JSON.parse(event.data)
+    for (const e of state.entities) {
+      let entity
+      if (e.id in entities) {
+        entity = entities[e.id]
+      }
+      else {
+        entity = new THREE.Mesh(new THREE.SphereGeometry(e.radius), new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }))
+        scene.add(entity)
+        entities[e.id] = entity
+      }
+
+      entity.position.set(e.pos.x, e.pos.y, e.radius)
+    }
+
+    document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
+  }
+}
+
+window.addEventListener('load', () => {
+  connectWebSocket()
+})