thayol
2957903cb1
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.
74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
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()
|
|
})
|