135 lines
4.0 KiB
JavaScript
135 lines
4.0 KiB
JavaScript
import * as THREE from 'three'
|
|
|
|
const global = (0,eval)("this")
|
|
const scene = new THREE.Scene()
|
|
const camera = new THREE.PerspectiveCamera(30, 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)
|
|
|
|
const geometry = new THREE.PlaneGeometry(0, 0)
|
|
const material = new THREE.MeshToonMaterial({ color: 0x115011 })
|
|
const ground = new THREE.Mesh(geometry, material)
|
|
scene.add(ground)
|
|
|
|
const ambientLight = new THREE.AmbientLight(0x404040)
|
|
scene.add(ambientLight)
|
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5)
|
|
directionalLight.position.set(-0.3, 0.1, 1)
|
|
directionalLight.power = 3000
|
|
scene.add(directionalLight)
|
|
|
|
global.THREE = THREE
|
|
global.renderer = renderer
|
|
global.camera = camera
|
|
global.scene = scene
|
|
camera.position.set(3, -12, 10)
|
|
camera.rotation.set((60 / 180) * Math.PI, 0, 0)
|
|
|
|
function animate() {
|
|
renderer.render(scene, camera)
|
|
}
|
|
|
|
var websocket = null
|
|
global.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)
|
|
|
|
if (state.width != null && state.height != null && (ground.geometry.attributes.width != state.width || ground.geometry.attributes.height != state.height)) {
|
|
ground.geometry = new THREE.PlaneGeometry(state.width / 100, state.height / 100)
|
|
ground.position.set(state.width / 200, state.height / 200, 0)
|
|
}
|
|
|
|
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 / 100), new THREE.MeshToonMaterial({ color: 0xffffff }))
|
|
entity.userData.type = 'entity'
|
|
entity.userData.id = e.id
|
|
scene.add(entity)
|
|
entities[e.id] = entity
|
|
}
|
|
|
|
entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
|
|
}
|
|
|
|
document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
|
|
}
|
|
}
|
|
|
|
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)?.point
|
|
if (intersect != null) {
|
|
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 }))
|
|
}
|
|
|
|
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 }))
|
|
}
|
|
}
|
|
})
|
|
|
|
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()
|
|
}
|
|
})
|
|
|
|
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.body.appendChild(canvas)
|
|
})
|