mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reformatted + fixed spawn problem.

Browse Source
This commit is contained in:
Michael Mainguy 2023-07-13 11:07:00 -05:00
parent 46efe08535
commit 6d776ef545
13 changed files with 185 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.ts
View File

@ -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";

3
src/controllers/base.ts
View File

@ -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;
}

58
src/controllers/rigplatform.ts
View File

@ -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() {

25
src/diagram/diagramManager.ts
View File

@ -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;
@ -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();
@ -117,9 +129,11 @@ export class DiagramManager {
switch (entity.template) {
case "#box-template":
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":
@ -127,7 +141,10 @@ export class DiagramManager {
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;

4
src/integration/ring/cameras.ts
View File

@ -6,16 +6,19 @@ 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);
@ -24,6 +27,7 @@ export class Cameras {
this.createCamera(48497021, 4);
this.createCamera(55870327, 5);
}
public createCamera(id, index) {
const width = 1.6;
const height = .9

2
src/menus/amenu.ts
View File

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

90
src/menus/bmenu.ts
View File

@ -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,6 +51,43 @@ export class Bmenu {
return button;
}
public getState() {
return this.state;
}
public setState(state: BmenuState) {
this.state = state;
}
toggle() {
if (this.panel) {
this.panel.dispose();
this.panel = null;
} else {
const anchor = new TransformNode("bMenuAnchor");
anchor.rotation.y = Angle.FromDegrees(180).radians();
const cam = this.xr.camera.getFrontPosition(2);
anchor.position = cam;
const panel = new PlanePanel();
panel.margin = .6;
//panel.scaling.y=.5;
//panel.orientation = Container3D.FACEFORWARDREVERSED_ORIENTATION;
panel.columns = 5;
this.manager.addControl(panel);
panel.linkToTransformNode(anchor);
//panel.position.z = 2;
//panel.position.y = 4;
panel.addControl(this.makeButton("Add Box", "addBox"));
panel.addControl(this.makeButton("Add Sphere", "addSphere"));
panel.addControl(this.makeButton("Add Cylinder", "addCylinder"));
this.panel = panel;
}
}
#clickhandler(_info, state) {
console.log(state.currentTarget.name);
@ -71,6 +112,10 @@ export class Bmenu {
break;
case "addCylinder":
entity.template = "#cylinder-template";
break;
case "doneAdding":
this.state=BmenuState.NONE;
break;
default:
console.log("Unknown button");
@ -83,12 +128,6 @@ export class Bmenu {
this.state = BmenuState.ADDING;
DiagramManager.onDiagramEventObservable.notifyObservers(event);
}
public getState() {
return this.state;
}
public setState(state: BmenuState) {
this.state = state;
}
#createDefaultMaterial() {
@ -96,33 +135,4 @@ export class Bmenu {
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();
const cam = this.xr.camera.getFrontPosition(2);
anchor.position = cam;
const panel = new PlanePanel();
panel.margin = .6;
//panel.scaling.y=.5;
//panel.orientation = Container3D.FACEFORWARDREVERSED_ORIENTATION;
panel.columns = 5;
this.manager.addControl(panel);
panel.linkToTransformNode(anchor);
//panel.position.z = 2;
//panel.position.y = 4;
panel.addControl(this.makeButton("Add Box", "addBox"));
panel.addControl(this.makeButton("Add Sphere", "addSphere"));
panel.addControl(this.makeButton("Add Cylinder", "addCylinder"));
this.panel = panel;
}
}
}

4
src/menus/objectEditor.ts
View File

@ -5,11 +5,13 @@ export class ObjectEditor {
private scene;
private editor: Mesh;
private mesh;
constructor(scene, mesh) {
this.scene = scene;
this.mesh = mesh;
this.edit();
}
public edit() {
this.editor = Mesh.CreatePlane("editor", 2, this.scene);
this.editor.position.z = -2;
@ -51,6 +53,7 @@ export class ObjectEditor {
this.close();
}, -1, false, this);
}
createControl(): Slider {
const slider = new Slider();
slider.minimum = .1
@ -59,6 +62,7 @@ export class ObjectEditor {
slider.step = .1
return slider;
}
close() {
this.editor.dispose();
this.mesh = null;

1
src/server/ring/ringCamera.ts
View File

@ -11,6 +11,7 @@ export class RingCamera {
});
this.ringApi = ringApi;
}
public async getCameras() {
const cams = await this.ringApi.getCameras();
console.log(cams[0]);

3
src/util/gmap.ts
View File

@ -1,11 +1,13 @@
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',
@ -27,6 +29,7 @@ export class Gmap {
document.body.appendChild(image);
});
}
public createMap(lat, lon) {
//const lat = 42.3369513;
//const lon = -88.8707076;

3
src/util/mapt.ts
View File

@ -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;