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

Added webxr exit button

Browse Source
This commit is contained in:
Michael Mainguy 2025-02-14 11:01:27 -06:00
parent 5ce0c9ce4f
commit 9d5234b629
19 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -3,14 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/> <meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="An immersive vr diagramming experience based using webxr version 0.0.8-14 (2024-07-03T13:09:05.707Z) 4fdcc9694d3614be538e425110d1ab50cd20b302" <meta content="An immersive vr diagramming experience based using webxr version 0.0.8-14 (2024-12-29Z)"
name="description"> name="description">
<meta content="width=device-width, initial-scale=1, height=device-height" name="viewport"> <meta content="width=device-width, initial-scale=1, height=device-height" name="viewport">
<!--<link href="/styles.css" rel="stylesheet"> --> <!--<link href="/styles.css" rel="stylesheet"> -->
<link href="/assets/dasfad/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"> <link href="/assets/dasfad/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/assets/dasfad/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"> <link href="/assets/dasfad/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/assets/dasfad/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"> <link href="/assets/dasfad/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<title>Deep Diagram</title> <title>DASFAD</title>
<!-- <link as="script" href="/newRelic.js" rel="preload"> <!-- <link as="script" href="/newRelic.js" rel="preload">
<script defer src="/newRelic.js"></script> --> <script defer src="/newRelic.js"></script> -->

4
src/controllers/functions/grabAndClone.ts
View File

@ -3,6 +3,7 @@ import {DiagramManager} from "../../diagram/diagramManager";
import {DiagramObject} from "../../diagram/diagramObject"; import {DiagramObject} from "../../diagram/diagramObject";
import log from "loglevel"; import log from "loglevel";
import {vectoxys} from "../../diagram/functions/vectorConversion"; import {vectoxys} from "../../diagram/functions/vectorConversion";
import {DiagramEntityType} from "../../diagram/types/diagramEntity";
export function grabAndClone(diagramManager: DiagramManager, mesh: AbstractMesh, parent: AbstractMesh): export function grabAndClone(diagramManager: DiagramManager, mesh: AbstractMesh, parent: AbstractMesh):
DiagramObject { DiagramObject {
@ -23,7 +24,8 @@ export function grabAndClone(diagramManager: DiagramManager, mesh: AbstractMesh,
color: mesh.metadata.color, color: mesh.metadata.color,
position: vectoxys(mesh.absolutePosition), position: vectoxys(mesh.absolutePosition),
rotation: vectoxys(mesh.absoluteRotationQuaternion.toEulerAngles()), rotation: vectoxys(mesh.absoluteRotationQuaternion.toEulerAngles()),
scale: vectoxys(mesh.scaling) scale: vectoxys(mesh.scaling),
type: DiagramEntityType.ENTITY
} }
const obj = new DiagramObject(parent.getScene(), const obj = new DiagramObject(parent.getScene(),

22
src/controllers/rigplatform.ts
View File

@ -8,6 +8,7 @@ import {DefaultScene} from "../defaultScene";
import {ControllerEvent} from "./types/controllerEvent"; import {ControllerEvent} from "./types/controllerEvent";
import {ControllerEventType} from "./types/controllerEventType"; import {ControllerEventType} from "./types/controllerEventType";
import {controllerObservable} from "./controllers"; import {controllerObservable} from "./controllers";
import {Button} from "../objects/Button";
const RIGHT = "right"; const RIGHT = "right";
const LEFT = "left"; const LEFT = "left";
@ -44,6 +45,27 @@ export class Rigplatform {
this._xr = xr; this._xr = xr;
this.rigMesh = buildRig(xr); this.rigMesh = buildRig(xr);
this._xr.baseExperience.onStateChangedObservable.add((state) => {
if (state == 2) {
const button = Button.CreateButton("exitXr", "exitXr", this._scene, {});
button.transform.position.z = 1;
button.transform.rotation.y = Math.PI;
button.transform.position.y = 1.2;
button.transform.scaling = new Vector3(.1, .1, .1);
button.transform.parent = this.rigMesh;
button.onPointerObservable.add((evt) => {
console.log(evt);
console.log(evt.sourceEvent.type);
if (evt.sourceEvent.type == 'pointerdown') {
xr.baseExperience.exitXRAsync();
}
//xr.baseExperience.exitXRAsync();
});
}
});
this._fixRotation(); this._fixRotation();
this._initializeControllers(); this._initializeControllers();
this._registerVelocityObserver(); this._registerVelocityObserver();

7
src/diagram/diagramManager.ts
View File

@ -1,5 +1,5 @@
import {AbstractActionManager, AbstractMesh, ActionManager, Observable, Scene} from "@babylonjs/core"; import {AbstractActionManager, AbstractMesh, ActionManager, Observable, Scene} from "@babylonjs/core";
import {DiagramEntity, DiagramEvent, DiagramEventType} from "./types/diagramEntity"; import {DiagramEntity, DiagramEntityType, DiagramEvent, DiagramEventType} from "./types/diagramEntity";
import log from "loglevel"; import log from "loglevel";
import {AppConfig} from "../util/appConfig"; import {AppConfig} from "../util/appConfig";
@ -33,7 +33,7 @@ export class DiagramManager {
this._me = getMe(); this._me = getMe();
this._scene = DefaultScene.Scene; this._scene = DefaultScene.Scene;
this._config = new AppConfig(); this._config = new AppConfig();
this._diagramMenuManager = new DiagramMenuManager(this.onDiagramEventObservable, controllerObservable, this._config, readyObservable); this._diagramMenuManager = new DiagramMenuManager(this.onDiagramEventObservable, controllerObservable, readyObservable);
this._diagramEntityActionManager = buildEntityActionManager(controllerObservable); this._diagramEntityActionManager = buildEntityActionManager(controllerObservable);
this.onDiagramEventObservable.add(this.onDiagramEvent, DiagramEventObserverMask.FROM_DB, true, this); this.onDiagramEventObservable.add(this.onDiagramEvent, DiagramEventObserverMask.FROM_DB, true, this);
this.onUserEventObservable.add((user) => { this.onUserEventObservable.add((user) => {
@ -79,7 +79,7 @@ export class DiagramManager {
template: '#image-template', template: '#image-template',
image: event.detail.data, image: event.detail.data,
text: event.detail.name, text: event.detail.name,
type: 'entity', type: DiagramEntityType.ENTITY,
position: {x: 0, y: 1.6, z: 0}, position: {x: 0, y: 1.6, z: 0},
rotation: {x: 0, y: Math.PI, z: 0}, rotation: {x: 0, y: Math.PI, z: 0},
scale: {x: 1, y: 1, z: 1}, scale: {x: 1, y: 1, z: 1},
@ -97,7 +97,6 @@ export class DiagramManager {
}); });
this._logger.debug("DiagramManager constructed"); this._logger.debug("DiagramManager constructed");
} }
public get actionManager(): AbstractActionManager { public get actionManager(): AbstractActionManager {

27
src/diagram/diagramMenuManager.ts
View File

@ -1,12 +1,10 @@
import {DiagramEvent, DiagramEventType} from "./types/diagramEntity"; import {DiagramEntityType, DiagramEvent, DiagramEventType} from "./types/diagramEntity";
import {AbstractMesh, ActionEvent, Observable, Scene, Vector3, WebXRInputSource} from "@babylonjs/core"; import {AbstractMesh, ActionEvent, Observable, Scene, Vector3, WebXRInputSource} from "@babylonjs/core";
import {InputTextView} from "../information/inputTextView"; import {InputTextView} from "../information/inputTextView";
import {DefaultScene} from "../defaultScene"; import {DefaultScene} from "../defaultScene";
import log from "loglevel"; import log from "loglevel";
import {Toolbox} from "../toolbox/toolbox"; import {Toolbox} from "../toolbox/toolbox";
import {ClickMenu} from "../menus/clickMenu"; import {ClickMenu} from "../menus/clickMenu";
import {ConfigMenu} from "../menus/configMenu";
import {AppConfig} from "../util/appConfig";
import {DiagramEventObserverMask} from "./types/diagramEventObserverMask"; import {DiagramEventObserverMask} from "./types/diagramEventObserverMask";
import {ConnectionPreview} from "../menus/connectionPreview"; import {ConnectionPreview} from "../menus/connectionPreview";
import {ScaleMenu2} from "../menus/ScaleMenu2"; import {ScaleMenu2} from "../menus/ScaleMenu2";
@ -19,7 +17,6 @@ import {ControllerEventType} from "../controllers/types/controllerEventType";
export class DiagramMenuManager { export class DiagramMenuManager {
public readonly toolbox: Toolbox; public readonly toolbox: Toolbox;
public readonly scaleMenu: ScaleMenu2; public readonly scaleMenu: ScaleMenu2;
public readonly configMenu: ConfigMenu;
private readonly _notifier: Observable<DiagramEvent>; private readonly _notifier: Observable<DiagramEvent>;
private readonly _inputTextView: InputTextView; private readonly _inputTextView: InputTextView;
private _groupMenu: GroupMenu; private _groupMenu: GroupMenu;
@ -27,22 +24,27 @@ export class DiagramMenuManager {
private _logger = log.getLogger('DiagramMenuManager'); private _logger = log.getLogger('DiagramMenuManager');
private _connectionPreview: ConnectionPreview; private _connectionPreview: ConnectionPreview;
constructor(notifier: Observable<DiagramEvent>, controllerObservable: Observable<ControllerEvent>, config: AppConfig, readyObservable: Observable<boolean>) { constructor(notifier: Observable<DiagramEvent>, controllerObservable: Observable<ControllerEvent>, readyObservable: Observable<boolean>) {
this._scene = DefaultScene.Scene; this._scene = DefaultScene.Scene;
this._notifier = notifier; this._notifier = notifier;
this._inputTextView = new InputTextView(controllerObservable); this._inputTextView = new InputTextView(controllerObservable);
this.configMenu = new ConfigMenu(config); //this.configMenu = new ConfigMenu(config);
this._inputTextView.onTextObservable.add((evt) => { this._inputTextView.onTextObservable.add((evt) => {
const event = {type: DiagramEventType.MODIFY, entity: {id: evt.id, text: evt.text}} const event = {
type: DiagramEventType.MODIFY,
entity: {id: evt.id, text: evt.text, type: DiagramEntityType.ENTITY}
}
this._notifier.notifyObservers(event, DiagramEventObserverMask.FROM_DB); this._notifier.notifyObservers(event, DiagramEventObserverMask.FROM_DB);
}); });
this.toolbox = new Toolbox(readyObservable); this.toolbox = new Toolbox(readyObservable);
this.scaleMenu = new ScaleMenu2(this._notifier); this.scaleMenu = new ScaleMenu2(this._notifier);
if (viewOnly()) { if (viewOnly()) {
this.toolbox.handleMesh.setEnabled(false); this.toolbox.handleMesh.setEnabled(false);
//this.scaleMenu.handleMesh.setEnabled(false) //this.scaleMenu.handleMesh.setEnabled(false)
this.configMenu.handleTransformNode.setEnabled(false); // this.configMenu.handleTransformNode.setEnabled(false);
} }
controllerObservable.add((event: ControllerEvent) => { controllerObservable.add((event: ControllerEvent) => {
if (event.type == ControllerEventType.B_BUTTON) { if (event.type == ControllerEventType.B_BUTTON) {
@ -64,9 +66,9 @@ export class DiagramMenuManager {
this._inputTextView.handleMesh.position.y = localCamera.y - .2; this._inputTextView.handleMesh.position.y = localCamera.y - .2;
} }
const configY = this._inputTextView.handleMesh.absolutePosition.y; const configY = this._inputTextView.handleMesh.absolutePosition.y;
if (configY > (cameraPos.y - .2)) { /*if (configY > (cameraPos.y - .2)) {
this.configMenu.handleTransformNode.position.y = localCamera.y - .2; this.configMenu.handleTransformNode.position.y = localCamera.y - .2;
} }*/
} }
} }
}); });
@ -94,7 +96,10 @@ export class DiagramMenuManager {
switch (evt.source.id) { switch (evt.source.id) {
case "remove": case "remove":
this.notifyAll({type: DiagramEventType.REMOVE, entity: {id: clickMenu.mesh.id}}); this.notifyAll({
type: DiagramEventType.REMOVE,
entity: {id: clickMenu.mesh.id, type: DiagramEntityType.ENTITY}
});
break; break;
case "label": case "label":
this.editText(clickMenu.mesh); this.editText(clickMenu.mesh);

5
src/diagram/diagramObject.ts
View File

@ -12,7 +12,7 @@ import {
TransformNode, TransformNode,
Vector3 Vector3
} from "@babylonjs/core"; } from "@babylonjs/core";
import {DiagramEntity, DiagramEvent, DiagramEventType} from "./types/diagramEntity"; import {DiagramEntity, DiagramEntityType, DiagramEvent, DiagramEventType} from "./types/diagramEntity";
import {buildMeshFromDiagramEntity} from "./functions/buildMeshFromDiagramEntity"; import {buildMeshFromDiagramEntity} from "./functions/buildMeshFromDiagramEntity";
import {toDiagramEntity} from "./functions/toDiagramEntity"; import {toDiagramEntity} from "./functions/toDiagramEntity";
import {v4 as uuidv4} from 'uuid'; import {v4 as uuidv4} from 'uuid';
@ -29,6 +29,7 @@ type DiagramObjectOptionsType = {
export class DiagramObject { export class DiagramObject {
private readonly _logger: Logger = log.getLogger('DiagramObject'); private readonly _logger: Logger = log.getLogger('DiagramObject');
private _group: TransformNode;
private _scene: Scene; private _scene: Scene;
public grabbed: boolean = false; public grabbed: boolean = false;
private _from: string; private _from: string;
@ -177,7 +178,7 @@ export class DiagramObject {
position: oldEntity.position, position: oldEntity.position,
rotation: oldEntity.rotation, rotation: oldEntity.rotation,
scale: oldEntity.scale, scale: oldEntity.scale,
type: 'entity', type: DiagramEntityType.ENTITY,
image: oldEntity.image, image: oldEntity.image,
template: oldEntity.template, template: oldEntity.template,
color: oldEntity.color, color: oldEntity.color,

7
src/diagram/types/diagramEntity.ts
View File

@ -13,7 +13,8 @@ export enum DiagramEventType {
} }
export enum DiagramEntityType { export enum DiagramEntityType {
USER = "user" USER = "user",
ENTITY = "entity",
} }
export enum DiagramEventMask { export enum DiagramEventMask {
@ -38,8 +39,8 @@ export type DiagramEvent = {
entity?: DiagramEntity; entity?: DiagramEntity;
oldColor?: Color3; oldColor?: Color3;
newColor?: Color3; newColor?: Color3;
} }
export type DiagramEntity = { export type DiagramEntity = {
color?: string; color?: string;
id?: string; id?: string;
@ -50,7 +51,7 @@ export type DiagramEntity = {
position?: { x: number, y: number, z: number }; position?: { x: number, y: number, z: number };
rotation?: { x: number, y: number, z: number }; rotation?: { x: number, y: number, z: number };
template?: string; template?: string;
type: 'entity' type: DiagramEntityType;
text?: string; text?: string;
scale?: { x: number, y: number, z: number }; scale?: { x: number, y: number, z: number };
parent?: string; parent?: string;

4
src/integration/database/database.ts
View File

@ -1,3 +1,3 @@
import {DEFAULT_DB_NAME} from "../../util/constants"; import {DIRECTORY_DB} from "../../util/constants";
export const db = new PouchDB(DEFAULT_DB_NAME); export const db = new PouchDB(DIRECTORY_DB);

10
src/integration/database/pouchData.ts
View File

@ -57,6 +57,16 @@ export class PouchData {
diagramManager.onDiagramEventObservable.notifyObservers( diagramManager.onDiagramEventObservable.notifyObservers(
{type: DiagramEventType.REMOVE, entity: entity}, DiagramEventObserverMask.FROM_DB); {type: DiagramEventType.REMOVE, entity: entity}, DiagramEventObserverMask.FROM_DB);
}); });
this._db.allDocs({include_docs: true}).then((docs) => {
docs.rows.forEach((row) => {
if (row.doc.id != 'metadata') {
diagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.ADD,
entity: row.doc
}, DiagramEventObserverMask.FROM_DB);
}
});
});
} }
public async remove(id: string) { public async remove(id: string) {

6
src/integration/database/pouchdbPersistenceManager.ts
View File

@ -1,5 +1,5 @@
import PouchDB from 'pouchdb'; import PouchDB from 'pouchdb';
import {DiagramEntity, DiagramEventType} from "../../diagram/types/diagramEntity"; import {DiagramEntity, DiagramEntityType, DiagramEventType} from "../../diagram/types/diagramEntity";
import {Observable} from "@babylonjs/core"; import {Observable} from "@babylonjs/core";
import axios from "axios"; import axios from "axios";
import {DiagramManager} from "../../diagram/diagramManager"; import {DiagramManager} from "../../diagram/diagramManager";
@ -93,7 +93,7 @@ export class PouchdbPersistenceManager {
this.onDBEntityUpdateObservable.add((evt) => { this.onDBEntityUpdateObservable.add((evt) => {
this._logger.debug(evt); this._logger.debug(evt);
if (evt.id != 'metadata' && evt.type = 'user') { if (evt.id != 'metadata' && evt?.type == DiagramEntityType.USER) {
diagramManager.onDiagramEventObservable.notifyObservers({ diagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.ADD, type: DiagramEventType.ADD,
entity: evt entity: evt
@ -263,7 +263,7 @@ export class PouchdbPersistenceManager {
let sync = false; let sync = false;
let current = getPath(); let current = getPath();
if (current && current != 'localdb') { if (current && current != 'localdb') {
//sync = true; sync = true;
} else { } else {
current = 'localdb'; current = 'localdb';
} }

10
src/integration/functions/syncDoc.ts
View File

@ -1,5 +1,5 @@
import log from "loglevel"; import log from "loglevel";
import {DiagramEntity} from "../../diagram/types/diagramEntity"; import {DiagramEntity, DiagramEntityType} from "../../diagram/types/diagramEntity";
import {Observable} from "@babylonjs/core"; import {Observable} from "@babylonjs/core";
import {Encryption} from "../encryption"; import {Encryption} from "../encryption";
import {DiagramEventObserverMask} from "../../diagram/types/diagramEventObserverMask"; import {DiagramEventObserverMask} from "../../diagram/types/diagramEventObserverMask";
@ -19,7 +19,7 @@ export async function syncDoc(info: any, onDBRemoveObservable: Observable<Diagra
salt = doc.encrypted.salt salt = doc.encrypted.salt
} }
const decrypted = await encryption.decryptToObject(doc.encrypted.encrypted, doc.encrypted.iv); const decrypted = await encryption.decryptToObject(doc.encrypted.encrypted, doc.encrypted.iv);
if (decrypted.type == 'user') { if (decrypted.type == DiagramEntityType.USER) {
//onUserObservable.notifyObservers(doc, -1); //onUserObservable.notifyObservers(doc, -1);
} else { } else {
logger.debug(decrypted); logger.debug(decrypted);
@ -27,7 +27,8 @@ export async function syncDoc(info: any, onDBRemoveObservable: Observable<Diagra
logger.debug('Delete', doc); logger.debug('Delete', doc);
onDBRemoveObservable.notifyObservers({ onDBRemoveObservable.notifyObservers({
id: doc._id, id: doc._id,
template: decrypted.template template: decrypted.template,
type: doc.type
}, DiagramEventObserverMask.FROM_DB); }, DiagramEventObserverMask.FROM_DB);
} else { } else {
onDBUpdateObservable.notifyObservers(decrypted, DiagramEventObserverMask.FROM_DB); onDBUpdateObservable.notifyObservers(decrypted, DiagramEventObserverMask.FROM_DB);
@ -42,7 +43,8 @@ export async function syncDoc(info: any, onDBRemoveObservable: Observable<Diagra
logger.debug('Delete', doc); logger.debug('Delete', doc);
onDBRemoveObservable.notifyObservers({ onDBRemoveObservable.notifyObservers({
id: doc._id, id: doc._id,
template: doc.template template: doc.template,
type: doc.type
}, DiagramEventObserverMask.FROM_DB); }, DiagramEventObserverMask.FROM_DB);
} else { } else {
if (doc.template) { if (doc.template) {

1
src/menus/configMenu.ts
View File

@ -33,6 +33,7 @@ export class ConfigMenu {
this._handle = new Handle(this.baseTransform, 'Configuration'); this._handle = new Handle(this.baseTransform, 'Configuration');
this.config = config; this.config = config;
this.buildMenu(); this.buildMenu();
} }
public get handleTransformNode(): TransformNode { public get handleTransformNode(): TransformNode {

4
src/menus/connectionPreview.ts
View File

@ -14,7 +14,7 @@ import {
WebXRInputSource WebXRInputSource
} from "@babylonjs/core"; } from "@babylonjs/core";
import {DefaultScene} from "../defaultScene"; import {DefaultScene} from "../defaultScene";
import {DiagramEvent, DiagramEventType, DiagramTemplates} from "../diagram/types/diagramEntity"; import {DiagramEntityType, DiagramEvent, DiagramEventType, DiagramTemplates} from "../diagram/types/diagramEntity";
import {DiagramEventObserverMask} from "../diagram/types/diagramEventObserverMask"; import {DiagramEventObserverMask} from "../diagram/types/diagramEventObserverMask";
import {AnimatedLineTexture} from "../util/animatedLineTexture"; import {AnimatedLineTexture} from "../util/animatedLineTexture";
@ -101,7 +101,7 @@ export class ConnectionPreview {
entity: { entity: {
from: this._fromId, from: this._fromId,
to: mesh.id, to: mesh.id,
type: 'entity', type: DiagramEntityType.ENTITY,
template: DiagramTemplates.CONNECTION, template: DiagramTemplates.CONNECTION,
color: '#000000' color: '#000000'
} }

4
src/menus/inputFile.ts
View File

@ -7,8 +7,8 @@ export class InputFile {
this.fileInput = document.createElement('input'); this.fileInput = document.createElement('input');
this.fileInput.type = 'file'; this.fileInput.type = 'file';
this.fileInput.accept = 'application/json'; this.fileInput.accept = 'application/json';
this.fileInput.onchange = (event) => { this.fileInput.onchange = (event: InputEvent) => {
this.file = event.target.files[0]; this.file = (event.target as HTMLInputElement).files[0];
}; };
//document.body.appendChild(this.fileInput); //document.body.appendChild(this.fileInput);
this.fileInput.click(); this.fileInput.click();

6
src/react/vrTemplate.tsx
View File

@ -4,18 +4,16 @@ import React from "react";
import {theme} from "./theme"; import {theme} from "./theme";
import {Provider} from "use-pouchdb"; import {Provider} from "use-pouchdb";
import PouchDB from 'pouchdb'; import PouchDB from 'pouchdb';
import {DEFAULT_DB_NAME} from "../util/constants"; import {DIRECTORY_DB} from "../util/constants";
const db = new PouchDB(DEFAULT_DB_NAME); const db = new PouchDB(DIRECTORY_DB);
export default function VrTemplate(props: { children: React.ReactNode }) { export default function VrTemplate(props: { children: React.ReactNode }) {
return ( return (
<Provider pouchdb={db}> <Provider pouchdb={db}>
<MantineProvider defaultColorScheme="dark" theme={theme}> <MantineProvider defaultColorScheme="dark" theme={theme}>
<Container fluid={true}> <Container fluid={true}>
{props.children} {props.children}
</Container> </Container>
</MantineProvider> </MantineProvider>
</Provider> </Provider>

2
src/util/constants.ts
View File

@ -1 +1 @@
export const DEFAULT_DB_NAME = "mydb"; export const DIRECTORY_DB = "local-directory";

6
src/util/customEnvironment.ts
View File

@ -19,14 +19,16 @@ import {CustomPhysics} from "./customPhysics";
import {AppConfig} from "./appConfig"; import {AppConfig} from "./appConfig";
import {GridMaterial} from "@babylonjs/materials"; import {GridMaterial} from "@babylonjs/materials";
import {DefaultScene} from "../defaultScene"; import {DefaultScene} from "../defaultScene";
import log from "loglevel";
export class CustomEnvironment { export class CustomEnvironment {
private readonly scene: Scene; private readonly scene: Scene;
private readonly name: string; private readonly name: string;
private readonly _groundMeshObservable: Observable<GroundMesh> = new Observable<GroundMesh>(); private readonly _groundMeshObservable: Observable<GroundMesh> = new Observable<GroundMesh>();
private readonly _logger = log.getLogger('CustomEnvironment');
constructor(name: string = "default", config: AppConfig) { constructor(name: string = "default", config: AppConfig) {
this._logger.debug('CustomEnvironment constructor', config);
this.scene = DefaultScene.Scene; this.scene = DefaultScene.Scene;
this.name = name; this.name = name;
@ -35,7 +37,7 @@ export class CustomEnvironment {
light.groundColor = new Color3(0, 0, 0); light.groundColor = new Color3(0, 0, 0);
light.diffuse = new Color3(1, 1, 1); light.diffuse = new Color3(1, 1, 1);
light.intensity = .8; light.intensity = .8;
const physics = new CustomPhysics(this.scene, config); const physics = new CustomPhysics(this.scene);
physics physics
.initializeAsync() .initializeAsync()
.then(() => { .then(() => {

2
src/util/functions/groundMeshObserver.ts
View File

@ -31,7 +31,7 @@ export async function groundMeshObserver(ground: AbstractMesh,
enablePointerSelectionOnAllControllers: true enablePointerSelectionOnAllControllers: true
} }
}); });
window.addEventListener('enterXr', async (e: CustomEvent) => { window.addEventListener('enterXr', async () => {
await xr.baseExperience.enterXRAsync('immersive-vr', 'local-floor'); await xr.baseExperience.enterXRAsync('immersive-vr', 'local-floor');
logger.debug("Entering XR Experience"); logger.debug("Entering XR Experience");
}) })

6
src/vrApp.ts
View File

@ -15,7 +15,6 @@ import {CustomEnvironment} from "./util/customEnvironment";
import {Spinner} from "./objects/spinner"; import {Spinner} from "./objects/spinner";
import {addSceneInspector} from "./util/functions/sceneInspector"; import {addSceneInspector} from "./util/functions/sceneInspector";
import {groundMeshObserver} from "./util/functions/groundMeshObserver"; import {groundMeshObserver} from "./util/functions/groundMeshObserver";
import {exportGltf} from "./util/functions/exportGltf";
import {DefaultScene} from "./defaultScene"; import {DefaultScene} from "./defaultScene";
import {Introduction} from "./tutorial/introduction"; import {Introduction} from "./tutorial/introduction";
import {PouchData} from "./integration/database/pouchData"; import {PouchData} from "./integration/database/pouchData";
@ -23,6 +22,7 @@ import {PouchData} from "./integration/database/pouchData";
const webGpu = false; const webGpu = false;
log.setLevel('error', false); log.setLevel('error', false);
log.getLogger('PouchdbPersistenceManager').setLevel('debug', false);
export default class VrApp { export default class VrApp {
//preTasks = [havokModule]; //preTasks = [havokModule];
private logger: Logger = log.getLogger('App'); private logger: Logger = log.getLogger('App');
@ -58,14 +58,14 @@ export default class VrApp {
}); });
initEnvironment(diagramManager, spinner); initEnvironment(diagramManager, spinner);
addSceneInspector(); addSceneInspector();
const el = document.querySelector('#download'); /*const el = document.querySelector('#download');
if (el) { if (el) {
el.addEventListener('click', () => { el.addEventListener('click', () => {
exportGltf(); exportGltf();
}) })
} else { } else {
this.logger.error('Download button not found'); this.logger.error('Download button not found');
} }*/
if (!localStorage.getItem('tutorialCompleted')) { if (!localStorage.getItem('tutorialCompleted')) {
this.logger.info('Starting tutorial'); this.logger.info('Starting tutorial');
const intro = new Introduction(); const intro = new Introduction();