Reformatted + fixed spawn problem.

src/app.ts

@@ -16,10 +16,7 @@ import {
     Vector3,
     WebXRDefaultExperience
 } from "@babylonjs/core";
-import {Right} from "./controllers/right";
-import {Left} from "./controllers/left";
 ///import {havokModule} from "./util/havok";
-import {Bmenu} from "./menus/bmenu";
 import HavokPhysics from "@babylonjs/havok";
 import {Rigplatform} from "./controllers/rigplatform";
 

src/controllers/base.ts

@@ -1,4 +1,4 @@
-import {PhysicsBody, Vector3, WebXRCamera, WebXRInputSource} from "@babylonjs/core";
+import {Vector3, WebXRInputSource} from "@babylonjs/core";
 import {Rigplatform} from "./rigplatform";
 
 export class Base {
@@ -22,6 +22,7 @@ export class Base {
             }
         });
     }
+
     setRig(rig: Rigplatform) {
         this.rig = rig;
     }

src/controllers/left.ts

@@ -13,13 +13,13 @@ export class Left extends Base {
                     .onAxisValueChangedObservable.add((value) => {
 
                     if (Math.abs(value.x) > .1) {
-                        this.rig.leftright(value.x*this.speedFactor);
+                        this.rig.leftright(value.x * this.speedFactor);
                         Base.stickVector.x = 1;
                     } else {
                         Base.stickVector.x = 0;
                     }
                     if (Math.abs(value.y) > .1) {
-                        this.rig.updown(value.y*this.speedFactor);
+                        this.rig.updown(value.y * this.speedFactor);
                         Base.stickVector.y = 1;
                     } else {
                         Base.stickVector.y = 0;

src/controllers/right.ts

@@ -10,7 +10,7 @@ export class Right extends Base {
     constructor(controller:
                     WebXRInputSource) {
         super(controller);
-        this.controller.onMotionControllerInitObservable.add((init)=> {
+        this.controller.onMotionControllerInitObservable.add((init) => {
             const trigger = init.components['xr-standard-trigger'];
             if (trigger) {
                 trigger
@@ -33,7 +33,7 @@ export class Right extends Base {
                     });
             }
             if (init.components['b-button']) {
-                init.components['b-button'].onButtonStateChangedObservable.add((value)=>{
+                init.components['b-button'].onButtonStateChangedObservable.add((value) => {
                     if (value.pressed) {
                         this.bmenu.toggle();
                     }
@@ -50,7 +50,7 @@ export class Right extends Base {
                     }
 
                     if (Math.abs(value.y) > .1) {
-                        this.rig.forwardback(value.y*this.speedFactor);
+                        this.rig.forwardback(value.y * this.speedFactor);
                         Base.stickVector.z = 1;
                     } else {
                         Base.stickVector.z = 0;

src/controllers/rigplatform.ts

@@ -20,15 +20,15 @@ import {Bmenu} from "../menus/bmenu";
 export class Rigplatform {
     static LINEAR_VELOCITY = 4;
     static ANGULAR_VELOCITY = 3;
-    public bMenu: Bmenu;
     static x90 = Quaternion.RotationAxis(Vector3.Up(), 1.5708);
-    private camera: Camera;
+    public bMenu: Bmenu;
-    private scene: Scene;
-    private xr: WebXRDefaultExperience;
     public right: Right;
     public left: Left;
     public body: PhysicsBody;
     public rigMesh: Mesh;
+    private camera: Camera;
+    private scene: Scene;
+    private xr: WebXRDefaultExperience;
     private turning: boolean = false;
 
     constructor(scene: Scene, xr: WebXRDefaultExperience) {
@@ -68,31 +68,6 @@ export class Rigplatform {
         });
     }
 
-    #initializeControllers() {
-        this.xr.input.onControllerAddedObservable.add((source, state) => {
-            let controller;
-            switch (source.inputSource.handedness) {
-                case "right":
-                    controller = new Right(source);
-                    this.right = controller;
-                    controller.setBMenu(this.bMenu);
-                    break;
-                case "left":
-                    controller = new Left(source);
-                    this.left = controller;
-                    break;
-
-            }
-            this.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
-            if (controller) {
-                controller.setRig(this);
-            }
-
-            console.log(source);
-            console.log(state);
-        });
-    }
-
     public forwardback(val: number) {
         const ray = this.camera.getForwardRay();
 
@@ -143,6 +118,31 @@ export class Rigplatform {
 
     }
 
+    #initializeControllers() {
+        this.xr.input.onControllerAddedObservable.add((source, state) => {
+            let controller;
+            switch (source.inputSource.handedness) {
+                case "right":
+                    controller = new Right(source);
+                    this.right = controller;
+                    controller.setBMenu(this.bMenu);
+                    break;
+                case "left":
+                    controller = new Left(source);
+                    this.left = controller;
+                    break;
+
+            }
+            this.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
+            if (controller) {
+                controller.setRig(this);
+            }
+
+            console.log(source);
+            console.log(state);
+        });
+    }
+
     //create a method to set the camera to the rig
 
     #setupKeyboard() {

src/diagram/diagramManager.ts

@@ -12,6 +12,7 @@ export enum DiagramEventType {
 
 
 }
+
 export type DiagramEvent = {
     type: DiagramEventType;
     menustate?: BmenuState;
@@ -30,6 +31,7 @@ export type DiagramEntity = {
     scale?: Vector3;
     parent?: string;
 }
+
 export class DiagramManager {
     static onDiagramEventObservable = new Observable();
     static leftController: Mesh;
@@ -46,6 +48,7 @@ export class DiagramManager {
             DiagramManager.onDiagramEventObservable.add(this.#onDiagramEvent, -1, true, this);
         }
     }
+
     #onDiagramEvent(event: DiagramEvent) {
         console.log(event);
         const entity = event.entity;
@@ -55,10 +58,10 @@ export class DiagramManager {
         let material
         if (entity) {
             mesh = this.scene.getMeshByName(entity.id);
-            material = this.scene.getMaterialByName("material-"+entity.id);
+            material = this.scene.getMaterialByName("material-" + entity.id);
-            if (!material){
+            if (!material) {
-                material = new StandardMaterial("material-"+event.entity.id, this.scene);
+                material = new StandardMaterial("material-" + event.entity.id, this.scene);
-                material.ambientColor = Color3.FromHexString(event.entity.color.replace("#",""));
+                material.ambientColor = Color3.FromHexString(event.entity.color.replace("#", ""));
             }
         }
 
@@ -71,10 +74,17 @@ export class DiagramManager {
                     const newMesh = DiagramManager.currentMesh.clone(DiagramManager.currentMesh.name = "id" + uuidv4(), DiagramManager.currentMesh.parent);
                     DiagramManager.currentMesh.setParent(null);
                     DiagramManager.currentMesh = newMesh;
-                    DiagramManager.onDiagramEventObservable.notifyObservers({type: DiagramEventType.DROPPED, entity: entity});
+                    DiagramManager.onDiagramEventObservable.notifyObservers({
+                        type: DiagramEventType.DROPPED,
+                        entity: entity
+                    });
                 }
                 break;
             case DiagramEventType.ADD:
+                if (DiagramManager.currentMesh){
+                    DiagramManager.currentMesh.dispose();
+                }
+
                 if (mesh) {
                     return;
                 } else {
@@ -82,6 +92,7 @@ export class DiagramManager {
                     if (!mesh) {
                         return;
                     }
+
                 }
 
             case DiagramEventType.MODIFY:
@@ -109,6 +120,7 @@ export class DiagramManager {
         }
 
     }
+
     #createMesh(entity: DiagramEntity) {
         if (!entity.id) {
             entity.id = "id" + uuidv4();
@@ -116,18 +128,23 @@ export class DiagramManager {
         let mesh: Mesh;
         switch (entity.template) {
             case "#box-template":
-                mesh = MeshBuilder.CreateBox(   entity.id,
+                mesh = MeshBuilder.CreateBox(entity.id,
-                    {width: entity.scale.x,
+                    {
+                        width: entity.scale.x,
                         height: entity.scale.y,
-                        depth: entity.scale.z}, this.scene);
+                        depth: entity.scale.z
+                    }, this.scene);
                 break;
 
             case "#sphere-template":
 
-                    mesh= MeshBuilder.CreateSphere(entity.id, {diameter: entity.scale.x}, this.scene);
+                mesh = MeshBuilder.CreateSphere(entity.id, {diameter: entity.scale.x}, this.scene);
                 break
             case "#cylinder-template":
-                    mesh= MeshBuilder.CreateCylinder(entity.id, {diameter: entity.scale.x, height: entity.scale.y}, this.scene);
+                mesh = MeshBuilder.CreateCylinder(entity.id, {
+                    diameter: entity.scale.x,
+                    height: entity.scale.y
+                }, this.scene);
                 break;
             default:
                 mesh = null;

src/integration/ring/cameras.ts

@@ -6,24 +6,28 @@ export class Cameras {
     private token: string;
     private cameras;
     private cameratextures = new Array<Texture>();
+
     constructor(scene: Scene, token: string) {
         this.scene = scene;
         this.token = token;
     }
+
     public async getCameras() {
 
         const cameras = await axios.get('https://local.immersiveidea.com/api/cameras');
         this.cameras = cameras;
         console.log(cameras);
     }
+
     public createCameras() {
         this.createCamera(12333524, 0);
-        this.createCamera( 115860395, 1);
+        this.createCamera(115860395, 1);
-        this.createCamera( 115855810, 2);
+        this.createCamera(115855810, 2);
-        this.createCamera( 99677736, 3);
+        this.createCamera(99677736, 3);
-        this.createCamera( 48497021, 4);
+        this.createCamera(48497021, 4);
-        this.createCamera( 55870327, 5);
+        this.createCamera(55870327, 5);
     }
+
     public createCamera(id, index) {
         const width = 1.6;
         const height = .9
@@ -36,9 +40,9 @@ export class Cameras {
         materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
         plane.material = materialPlane;
         plane.rotation.y = Angle.FromDegrees(180).radians();
-            plane.position.y = height/2 + .2;
+        plane.position.y = height / 2 + .2;
         plane.position.z = -3;
-            plane.position.x = (width*3) - (index * width);
+        plane.position.x = (width * 3) - (index * width);
         this.cameratextures.push(imageText);
 
     }

src/menus/amenu.ts

@@ -1,8 +1,10 @@
 export class Amenu {
     private visible = false;
+
     constructor() {
 
     }
+
     public toggle() {
         this.visible = !this.visible;
     }

src/menus/bmenu.ts

@@ -1,12 +1,13 @@
 import {
     AbstractMesh,
     Angle,
-    Color3, Mesh,
+    Color3,
-    MeshBuilder,
+    Scene,
-    Scene, SceneSerializer,
     StandardMaterial,
-    TransformNode, Vector3,
+    TransformNode,
-    WebXRExperienceHelper, WebXRInputSource
+    Vector3,
+    WebXRExperienceHelper,
+    WebXRInputSource
 } from "@babylonjs/core";
 import {GUI3DManager, HolographicButton, PlanePanel} from "@babylonjs/gui";
 import {DiagramEntity, DiagramEvent, DiagramEventType, DiagramManager} from "../diagram/diagramManager";
@@ -17,6 +18,7 @@ export enum BmenuState {
     DROPPING, // Dropping an entity
 
 }
+
 export class Bmenu {
     private scene;
     private state: BmenuState = BmenuState.NONE;
@@ -36,9 +38,11 @@ export class Bmenu {
             }
         });
     }
+
     setController(controller: WebXRInputSource) {
         this.rightController = controller.grip;
     }
+
     makeButton(name: string, id: string) {
         const button = new HolographicButton(name);
         button.text = name;
@@ -47,61 +51,19 @@ export class Bmenu {
         return button;
     }
 
-    #clickhandler(_info, state) {
-        console.log(state.currentTarget.name);
-
-        let entity: DiagramEntity = {
-            template: null,
-            position: new Vector3(0,-.040,.13),
-            rotation: new Vector3(),
-            scale: new Vector3(.1, .1, .1),
-            color: "#CEE",
-            text: "test",
-            last_seen: new Date(),
-            parent: this.rightController.id
-
-        };
-
-        switch (state.currentTarget.name) {
-            case "addBox":
-                entity.template = "#box-template";
-                break;
-            case "addSphere":
-                entity.template = "#sphere-template";
-                break;
-            case "addCylinder":
-                entity.template = "#cylinder-template";
-                break;
-            default:
-                console.log("Unknown button");
-                return;
-        }
-        const event: DiagramEvent = {
-            type: DiagramEventType.ADD,
-            entity: entity
-        }
-        this.state = BmenuState.ADDING;
-        DiagramManager.onDiagramEventObservable.notifyObservers(event);
-    }
     public getState() {
         return this.state;
     }
+
     public setState(state: BmenuState) {
         this.state = state;
     }
 
-    #createDefaultMaterial() {
-
-        const myMaterial = new StandardMaterial("myMaterial", this.scene);
-        myMaterial.diffuseColor = Color3.FromHexString("#CEE");
-        return myMaterial;
-    }
-
     toggle() {
         if (this.panel) {
             this.panel.dispose();
             this.panel = null;
-            this.setState(BmenuState.NONE);
+
         } else {
             const anchor = new TransformNode("bMenuAnchor");
             anchor.rotation.y = Angle.FromDegrees(180).radians();
@@ -125,4 +87,52 @@ export class Bmenu {
         }
 
     }
+
+    #clickhandler(_info, state) {
+        console.log(state.currentTarget.name);
+
+        let entity: DiagramEntity = {
+            template: null,
+            position: new Vector3(0, -.040, .13),
+            rotation: new Vector3(),
+            scale: new Vector3(.1, .1, .1),
+            color: "#CEE",
+            text: "test",
+            last_seen: new Date(),
+            parent: this.rightController.id
+
+        };
+
+        switch (state.currentTarget.name) {
+            case "addBox":
+                entity.template = "#box-template";
+                break;
+            case "addSphere":
+                entity.template = "#sphere-template";
+                break;
+            case "addCylinder":
+                entity.template = "#cylinder-template";
+                break;
+            case "doneAdding":
+                this.state=BmenuState.NONE;
+
+                break;
+            default:
+                console.log("Unknown button");
+                return;
+        }
+        const event: DiagramEvent = {
+            type: DiagramEventType.ADD,
+            entity: entity
+        }
+        this.state = BmenuState.ADDING;
+        DiagramManager.onDiagramEventObservable.notifyObservers(event);
+    }
+
+    #createDefaultMaterial() {
+
+        const myMaterial = new StandardMaterial("myMaterial", this.scene);
+        myMaterial.diffuseColor = Color3.FromHexString("#CEE");
+        return myMaterial;
+    }
 }

src/menus/objectEditor.ts

@@ -5,11 +5,13 @@ export class ObjectEditor {
     private scene;
     private editor: Mesh;
     private mesh;
+
     constructor(scene, mesh) {
-        this.scene=scene;
+        this.scene = scene;
         this.mesh = mesh;
         this.edit();
     }
+
     public edit() {
         this.editor = Mesh.CreatePlane("editor", 2, this.scene);
         this.editor.position.z = -2;
@@ -20,8 +22,8 @@ export class ObjectEditor {
 
         panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
         panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-        panel.width='100%';
+        panel.width = '100%';
-        panel.height='100%';
+        panel.height = '100%';
         texture.addControl(panel);
         const x = this.createControl();
 
@@ -29,14 +31,14 @@ export class ObjectEditor {
         const z = this.createControl()
         const myMesh = this.mesh;
         z.value = myMesh.scaling.z;
-        z.onValueChangedObservable.add((value)=> {
+        z.onValueChangedObservable.add((value) => {
             myMesh.scaling.z = value;
         });
-        y.onValueChangedObservable.add((value)=> {
+        y.onValueChangedObservable.add((value) => {
             myMesh.scaling.y = value;
         });
         y.value = myMesh.scaling.x;
-        x.onValueChangedObservable.add((value)=> {
+        x.onValueChangedObservable.add((value) => {
             myMesh.scaling.x = value;
         });
         x.value = myMesh.scaling.x;
@@ -47,22 +49,24 @@ export class ObjectEditor {
         button1.height = '20px';
         button1.background = "#FFF";
         panel.addControl(button1);
-        button1.onPointerClickObservable.add(()=> {
+        button1.onPointerClickObservable.add(() => {
             this.close();
         }, -1, false, this);
     }
+
     createControl(): Slider {
         const slider = new Slider();
         slider.minimum = .1
         slider.maximum = 10;
         slider.height = '40px';
-        slider.step =.1
+        slider.step = .1
         return slider;
     }
+
     close() {
         this.editor.dispose();
-        this.mesh=null;
+        this.mesh = null;
-        this.scene=null;
+        this.scene = null;
     }
 
 }

src/server/ring/ringCamera.ts

@@ -11,11 +11,12 @@ export class RingCamera {
         });
         this.ringApi = ringApi;
     }
+
     public async getCameras() {
         const cams = await this.ringApi.getCameras();
         console.log(cams[0]);
 
-        const camid = cams.map((value ) => value.id);
+        const camid = cams.map((value) => value.id);
         console.log(camid);
         return cams;
     }

src/util/gmap.ts

@@ -1,22 +1,24 @@
 import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core";
 import googleStaticMapsTile from "google-static-maps-tile";
+
 export class Gmap {
     private scene: Scene;
 
     constructor(scene: Scene) {
         this.scene = scene;
     }
+
     public async createMapTiles(lat, lon) {
         googleStaticMapsTile({
             areaSize: '2560x2560',
             center: '26.443397,-82.111512',
             zoom: 12,
             imagePerLoad: 50,
-            durationBetweenLoads: 60*1000+100,
+            durationBetweenLoads: 60 * 1000 + 100,
             key: 'AIzaSyD4jJCYcIvHDEiOkVxC2c4zNYRqZKYHMMk',
             maptype: 'satellite'
         })
-            .on('progress', function(info) {
+            .on('progress', function (info) {
                 console.log(info.count);
                 console.log(info.total);
                 const image = info.image;
@@ -27,11 +29,12 @@ export class Gmap {
                 document.body.appendChild(image);
             });
     }
+
     public createMap(lat, lon) {
         //const lat = 42.3369513;
         //const lon = -88.8707076;
 
-        const plane = MeshBuilder.CreatePlane("plane", {width: 1, height:1}, this.scene);
+        const plane = MeshBuilder.CreatePlane("plane", {width: 1, height: 1}, this.scene);
         const materialPlane = new StandardMaterial("texturePlane", this.scene);
         const zoom = 10;
 

src/util/mapt.ts

@@ -1,10 +1,13 @@
 import * as maptilerClient from '@maptiler/client';
 import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core";
+
 export class Mapt {
     private scene: Scene;
+
     constructor(scene: Scene) {
         this.scene = scene;
     }
+
     buildMapImage() {
         const apiKey = '073I3Pfe4lzoSf8tNriR';
         maptilerClient.config.apiKey = apiKey;
@@ -12,9 +15,9 @@ export class Mapt {
         const link = maptilerClient.staticMaps.centered(
             [-88.8711198, 42.3370588],
             14,
-            {width:2048, height:2048, style: 'streets-v2'}
+            {width: 2048, height: 2048, style: 'streets-v2'}
         );
-        const plane = MeshBuilder.CreatePlane("plane", {width: 10, height:10}, this.scene);
+        const plane = MeshBuilder.CreatePlane("plane", {width: 10, height: 10}, this.scene);
         const materialPlane = new StandardMaterial("texturePlane", this.scene);
         const zoom = 10;
         const sphere = MeshBuilder.CreateSphere("cams", {diameter: .1}, this.scene);