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

5
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 {
@ -18,10 +18,11 @@ export class Base {
if (value.value == 1) {
console.log(value);
}
});
});
}
});
}
setRig(rig: Rigplatform) {
this.rig = rig;
}

4
src/controllers/left.ts
View File

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

12
src/controllers/right.ts
View File

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

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

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

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

@ -6,40 +6,44 @@ 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( 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);
}
}

2
src/menus/amenu.ts
View File

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

108
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,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;
}
}

24
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.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;
}
}

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

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

9
src/util/gmap.ts
View File

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

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