99 lines
3.2 KiB
JavaScript
99 lines
3.2 KiB
JavaScript
|
const socket = io();
|
||
|
|
|
||
|
|
let gameState = null;
|
||
|
|
let clientId = null;
|
||
|
|
const modelMeshes = {};
|
||
|
|
|
||
|
|
const canvas = document.getElementById("renderCanvas");
|
||
|
|
const engine = new BABYLON.Engine(canvas, true);
|
||
|
|
var {scene,camera} = createScene();
|
||
|
|
|
||
|
|
function createScene() {
|
||
|
|
var scene = new BABYLON.Scene(engine);
|
||
|
|
var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
|
||
|
|
camera.setTarget(BABYLON.Vector3.Zero());
|
||
|
|
camera.attachControl(canvas, true);
|
||
|
|
|
||
|
|
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
|
||
|
|
|
||
|
|
// Create ground
|
||
|
|
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 200, height: 200}, scene);
|
||
|
|
const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
|
||
|
|
groundMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
|
||
|
|
ground.material = groundMaterial;
|
||
|
|
|
||
|
|
return {scene,camera};
|
||
|
|
}
|
||
|
|
|
||
|
|
function createOrUpdateMesh(model) {
|
||
|
|
if (!modelMeshes[model.id]) {
|
||
|
|
let mesh;
|
||
|
|
if (model.type === 'human') {
|
||
|
|
mesh = BABYLON.MeshBuilder.CreateBox(model.id, {height: 1.8, width: 0.5, depth: 0.5}, scene);
|
||
|
|
mesh.material = new BABYLON.StandardMaterial(model.id + "Material", scene);
|
||
|
|
mesh.material.diffuseColor = new BABYLON.Color3(0, 0, 1);
|
||
|
|
} else if (model.type === 'drone') {
|
||
|
|
mesh = BABYLON.MeshBuilder.CreateBox(model.id, {size: 1}, scene);
|
||
|
|
mesh.material = new BABYLON.StandardMaterial(model.id + "Material", scene);
|
||
|
|
mesh.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
|
||
|
|
} else if (model.type === 'antenna') {
|
||
|
|
mesh = BABYLON.MeshBuilder.CreateCylinder(model.id, {height: 5, diameter: 0.5}, scene);
|
||
|
|
mesh.material = new BABYLON.StandardMaterial(model.id + "Material", scene);
|
||
|
|
mesh.material.diffuseColor = new BABYLON.Color3(0, 1, 0);
|
||
|
|
}
|
||
|
|
modelMeshes[model.id] = mesh;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mesh = modelMeshes[model.id];
|
||
|
|
mesh.position.set(model.x, model.z, model.y);
|
||
|
|
mesh.rotation.set(model.pitch, model.yaw, model.roll);
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.on('connect', () => {
|
||
|
|
clientId = socket.id;
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('initialState', (state) => {
|
||
|
|
gameState = state;
|
||
|
|
Object.values(state.models).forEach(createOrUpdateMesh);
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.on('stateUpdate', (state) => {
|
||
|
|
gameState = state;
|
||
|
|
console.log(gameState);
|
||
|
|
console.log(gameState.models.human1);
|
||
|
|
Object.values(state.models).forEach(createOrUpdateMesh);
|
||
|
|
|
||
|
|
const client = gameState.clients[clientId];
|
||
|
|
if (client) {
|
||
|
|
const viewerModel = gameState.models[client.viewingId]
|
||
|
|
if (viewerModel) {
|
||
|
|
camera.position.set(viewerModel.x, viewerModel.z + 1.8, viewerModel.y);
|
||
|
|
camera.rotation.set(viewerModel.pitch, viewerModel.yaw, viewerModel.roll);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
engine.runRenderLoop(() => {
|
||
|
|
scene.render();
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
engine.resize();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keydown', (event) => {
|
||
|
|
socket.emit('keyEvent', { key: event.key, isDown: true });
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keyup', (event) => {
|
||
|
|
socket.emit('keyEvent', { key: event.key, isDown: false });
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener('keypress', (event) => {
|
||
|
|
if (event.key === 'v') {
|
||
|
|
socket.emit('toggleView');
|
||
|
|
}
|
||
|
|
});
|