From 6d776ef5459398a00145a4890751a9ffad8136ad Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Thu, 13 Jul 2023 11:07:00 -0500 Subject: [PATCH] Reformatted + fixed spawn problem. --- src/app.ts | 3 - src/controllers/base.ts | 5 +- src/controllers/left.ts | 4 +- src/controllers/right.ts | 12 ++-- src/controllers/rigplatform.ts | 58 ++++++++--------- src/diagram/diagramManager.ts | 49 ++++++++++----- src/integration/ring/cameras.ts | 44 +++++++------ src/menus/amenu.ts | 2 + src/menus/bmenu.ts | 108 +++++++++++++++++--------------- src/menus/objectEditor.ts | 24 ++++--- src/server/ring/ringCamera.ts | 3 +- src/util/gmap.ts | 9 ++- src/util/mapt.ts | 7 ++- 13 files changed, 185 insertions(+), 143 deletions(-) diff --git a/src/app.ts b/src/app.ts index 6591ad0..2eb4692 100644 --- a/src/app.ts +++ b/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"; diff --git a/src/controllers/base.ts b/src/controllers/base.ts index 7338ed2..319c414 100644 --- a/src/controllers/base.ts +++ b/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 { @@ -18,10 +18,11 @@ export class Base { if (value.value == 1) { console.log(value); } - }); + }); } }); } + setRig(rig: Rigplatform) { this.rig = rig; } diff --git a/src/controllers/left.ts b/src/controllers/left.ts index c1af316..ff7e110 100644 --- a/src/controllers/left.ts +++ b/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; diff --git a/src/controllers/right.ts b/src/controllers/right.ts index 6f7acf8..16bf432 100644 --- a/src/controllers/right.ts +++ b/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 @@ -30,13 +30,13 @@ export class Right extends Base { if (value.value < .05) { this.down = false; } - }); + }); } if (init.components['b-button']) { - init.components['b-button'].onButtonStateChangedObservable.add((value)=>{ - if (value.pressed) { + 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; diff --git a/src/controllers/rigplatform.ts b/src/controllers/rigplatform.ts index fe3184b..a6f9b55 100644 --- a/src/controllers/rigplatform.ts +++ b/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; - private scene: Scene; - private xr: WebXRDefaultExperience; + public bMenu: Bmenu; 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() { diff --git a/src/diagram/diagramManager.ts b/src/diagram/diagramManager.ts index 64aaff1..4f046f9 100644 --- a/src/diagram/diagramManager.ts +++ b/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); - if (!material){ - material = new StandardMaterial("material-"+event.entity.id, this.scene); - material.ambientColor = Color3.FromHexString(event.entity.color.replace("#","")); + material = this.scene.getMaterialByName("material-" + entity.id); + if (!material) { + material = new StandardMaterial("material-" + event.entity.id, this.scene); + 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,21 +128,26 @@ export class DiagramManager { let mesh: Mesh; switch (entity.template) { case "#box-template": - mesh = MeshBuilder.CreateBox( entity.id, - {width: entity.scale.x, + mesh = MeshBuilder.CreateBox(entity.id, + { + width: entity.scale.x, height: entity.scale.y, - depth: entity.scale.z}, this.scene); + depth: entity.scale.z + }, this.scene); break; - case "#sphere-template": + case "#sphere-template": - 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); - break; - default: - mesh = null; + 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); + break; + default: + mesh = null; } return mesh; } diff --git a/src/integration/ring/cameras.ts b/src/integration/ring/cameras.ts index 313cde3..076b7d9 100644 --- a/src/integration/ring/cameras.ts +++ b/src/integration/ring/cameras.ts @@ -6,40 +6,44 @@ export class Cameras { private token: string; private cameras; private cameratextures = new Array(); + 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( 115855810, 2); - this.createCamera( 99677736, 3); - this.createCamera( 48497021, 4); - this.createCamera( 55870327, 5); + this.createCamera(115860395, 1); + this.createCamera(115855810, 2); + this.createCamera(99677736, 3); + this.createCamera(48497021, 4); + this.createCamera(55870327, 5); } - public createCamera(id, index) { - const width = 1.6; - const height = .9 - const plane = MeshBuilder.CreatePlane("plane", {width: width, height: height}, this.scene); - const materialPlane = new StandardMaterial("texturePlane", this.scene); - const imageText = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene); - materialPlane.diffuseTexture = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene); - materialPlane.specularColor = new Color3(0, 0, 0); - 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.z = -3; - plane.position.x = (width*3) - (index * width); - this.cameratextures.push(imageText); + public createCamera(id, index) { + const width = 1.6; + const height = .9 + const plane = MeshBuilder.CreatePlane("plane", {width: width, height: height}, this.scene); + const materialPlane = new StandardMaterial("texturePlane", this.scene); + const imageText = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene); + + materialPlane.diffuseTexture = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene); + materialPlane.specularColor = new Color3(0, 0, 0); + 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.z = -3; + plane.position.x = (width * 3) - (index * width); + this.cameratextures.push(imageText); } } diff --git a/src/menus/amenu.ts b/src/menus/amenu.ts index a800fa6..a1f7515 100644 --- a/src/menus/amenu.ts +++ b/src/menus/amenu.ts @@ -1,8 +1,10 @@ export class Amenu { private visible = false; + constructor() { } + public toggle() { this.visible = !this.visible; } diff --git a/src/menus/bmenu.ts b/src/menus/bmenu.ts index 0c8244b..ebbda78 100644 --- a/src/menus/bmenu.ts +++ b/src/menus/bmenu.ts @@ -1,12 +1,13 @@ import { AbstractMesh, Angle, - Color3, Mesh, - MeshBuilder, - Scene, SceneSerializer, + Color3, + Scene, StandardMaterial, - TransformNode, Vector3, - WebXRExperienceHelper, WebXRInputSource + TransformNode, + 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; + } } \ No newline at end of file diff --git a/src/menus/objectEditor.ts b/src/menus/objectEditor.ts index fbe8db8..c773b8a 100644 --- a/src/menus/objectEditor.ts +++ b/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.height='100%'; + panel.width = '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.scene=null; + this.mesh = null; + this.scene = null; } } \ No newline at end of file diff --git a/src/server/ring/ringCamera.ts b/src/server/ring/ringCamera.ts index c51e494..593e68c 100644 --- a/src/server/ring/ringCamera.ts +++ b/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; } diff --git a/src/util/gmap.ts b/src/util/gmap.ts index 15a0f18..db2ae11 100644 --- a/src/util/gmap.ts +++ b/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; diff --git a/src/util/mapt.ts b/src/util/mapt.ts index 43d32e3..8da7f29 100644 --- a/src/util/mapt.ts +++ b/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);