dronedemo/public/render.js

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');
    }
});