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

Updated user function to new api.

Browse Source
This commit is contained in:
Michael Mainguy 2023-11-04 12:00:11 -05:00
parent d7d8b414e5
commit 1ae2dd3609
16 changed files with 194 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -24,26 +24,6 @@
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
z-index: -1;
/*noinspection CssUnknownTarget*/
background: url("/spinner.gif");
background-position: center;
background-repeat: no-repeat;
text-align: center;
} }
#questLaunch { #questLaunch {
@ -69,7 +49,6 @@
background: #000; background: #000;
color: #fff; color: #fff;
} }
</style> </style>
<link as="script" href="/newRelic.js" rel="preload"> <link as="script" href="/newRelic.js" rel="preload">
<script src="/newRelic.js"></script> <script src="/newRelic.js"></script>
@ -82,11 +61,11 @@
<script src='/niceware.js'></script> <script src='/niceware.js'></script>
</head> </head>
<body> <body>
<!--<div class="loader" id="loader">Loading...</div> --> <!--<div id="questLaunch"><a href="https://www.oculus.com/open_url/?url=https://www.deepdiagram.com/" target="_blank">Launch
<div id="questLaunch"><a href="https://www.oculus.com/open_url/?url=https://www.deepdiagram.com/" target="_blank">Launch
On Quest</a> On Quest</a>
</div> </div>
<div id="download"><a href="#" id="downloadLink">Download Model</a></div> <div id="download"><a href="#" id="downloadLink">Download Model</a></div>
-->
<script> <script>
/* /*
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
@ -114,6 +93,5 @@
<div class="scene"> <div class="scene">
<canvas id="gameCanvas"></canvas> <canvas id="gameCanvas"></canvas>
</div> </div>
</body> </body>
</html> </html>

46
netlify/functions/users/users.ts → netlify/functions/users/users.mts
View File

@ -1,12 +1,14 @@
import {Handler, HandlerContext, HandlerEvent} from "@netlify/functions"; import {Context} from "@netlify/functions";
import axios from 'axios'; import axios from 'axios';
export const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => { export default async (req: Request, context: Context) => {
try { try {
console.log(event.httpMethod); console.log(req.method);
const origin = event.headers.origin; const origin = req.headers['origin'];
if (event.httpMethod == 'OPTIONS') { if (req.method == 'OPTIONS') {
return { return new Response(
new Blob(),
{
headers: { headers: {
'Allow': 'POST', 'Allow': 'POST',
'Max-Age': '86400', 'Max-Age': '86400',
@ -14,13 +16,13 @@ export const handler: Handler = async (event: HandlerEvent, context: HandlerCont
'Access-Control-Allow-Origin': origin ? origin : 'https://cameras.immersiveidea.com', 'Access-Control-Allow-Origin': origin ? origin : 'https://cameras.immersiveidea.com',
'Access-Control-Allow-Credentials': 'true' 'Access-Control-Allow-Credentials': 'true'
}, },
statusCode: 200 status: 200
}; })
} }
const baseurl = 'https://syncdb-service-d3f974de56ef.herokuapp.com/'; const baseurl = 'https://syncdb-service-d3f974de56ef.herokuapp.com/';
console.log(baseurl); console.log(baseurl);
const params = JSON.parse(event.body); const params = JSON.parse(await req.text());
console.log(event.body); console.log(params);
const dbKey = params.username; const dbKey = params.username;
const password = params.password; const password = params.password;
@ -31,10 +33,11 @@ export const handler: Handler = async (event: HandlerEvent, context: HandlerCont
} }
try { try {
const exist = await axios.head(baseurl + dbKey); const exist = await axios.head(baseurl + dbKey);
return { if (exist) {
statusCode: 200, return
body: JSON.stringify({data: "OK"}) new Response('OK');
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@ -75,21 +78,24 @@ export const handler: Handler = async (event: HandlerEvent, context: HandlerCont
} }
}); });
} }
return { return
new Response(
new Blob(),
{
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Access-Control-Allow-Origin': origin ? origin : 'https://cameras.immersiveidea.com', 'Access-Control-Allow-Origin': origin ? origin : 'https://cameras.immersiveidea.com',
'Access-Control-Allow-Credentials': 'true' 'Access-Control-Allow-Credentials': 'true'
}, },
statusCode: 200, status: 200,
body: JSON.stringify({data: data}, null, 2)
} }
)
} catch (err) { } catch (err) {
console.log(err); console.log(err);
const response = {err: err}; const response = {err: err};
return { return
statusCode: 500, new Response(JSON.stringify(response),
body: JSON.stringify(response) {status: 500}
} )
} }
} }

34
package-lock.json generated
View File

@ -17,7 +17,7 @@
"@babylonjs/procedural-textures": "^6.21.3", "@babylonjs/procedural-textures": "^6.21.3",
"@babylonjs/serializers": "^6.21.3", "@babylonjs/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0", "@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0", "@netlify/functions": "^2.3.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8", "@typed-mxgraph/typed-mxgraph": "^1.0.8",
"@types/file-saver": "^2.0.6", "@types/file-saver": "^2.0.6",
"@types/node": "^18.14.0", "@types/node": "^18.14.0",
@ -639,16 +639,37 @@
} }
}, },
"node_modules/@netlify/functions": { "node_modules/@netlify/functions": {
"version": "1.6.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-1.6.0.tgz", "resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.3.0.tgz",
"integrity": "sha512-6G92AlcpFrQG72XU8YH8pg94eDnq7+Q0YJhb8x4qNpdGsvuzvrfHWBmqFGp/Yshmv4wex9lpsTRZOocdrA2erQ==", "integrity": "sha512-E3kzXPWMP/r1rAWhjTaXcaOT47dhEvg/eQUJjRLhD9Zzp0WqkdynHr+bqff4rFNv6tuXrtFZrpbPJFKHH0c0zw==",
"dependencies": { "dependencies": {
"@netlify/serverless-functions-api": "1.9.0",
"is-promise": "^4.0.0" "is-promise": "^4.0.0"
}, },
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/@netlify/node-cookies": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@netlify/node-cookies/-/node-cookies-0.1.0.tgz",
"integrity": "sha512-OAs1xG+FfLX0LoRASpqzVntVV/RpYkgpI0VrUnw2u0Q1qiZUzcPffxRK8HF3gc4GjuhG5ahOEMJ9bswBiZPq0g==",
"engines": {
"node": "^14.16.0 || >=16.0.0"
}
},
"node_modules/@netlify/serverless-functions-api": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@netlify/serverless-functions-api/-/serverless-functions-api-1.9.0.tgz",
"integrity": "sha512-Jq4uk1Mwa5vyxImupJYXPP+I5yYcp3PtguvXtJRutKdm9DPALXfZVtCQzBWMNdZiqVWCM3La9hvaBsPjSMfeug==",
"dependencies": {
"@netlify/node-cookies": "^0.1.0",
"urlpattern-polyfill": "8.0.2"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -4532,6 +4553,11 @@
"requires-port": "^1.0.0" "requires-port": "^1.0.0"
} }
}, },
"node_modules/urlpattern-polyfill": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-8.0.2.tgz",
"integrity": "sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ=="
},
"node_modules/urlsafe-base64": { "node_modules/urlsafe-base64": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz", "resolved": "https://registry.npmjs.org/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz",

2
package.json
View File

@ -24,7 +24,7 @@
"@babylonjs/procedural-textures": "^6.21.3", "@babylonjs/procedural-textures": "^6.21.3",
"@babylonjs/serializers": "^6.21.3", "@babylonjs/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0", "@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0", "@netlify/functions": "^2.3.0",
"events": "^3.3.0", "events": "^3.3.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8", "@typed-mxgraph/typed-mxgraph": "^1.0.8",
"@types/node": "^18.14.0", "@types/node": "^18.14.0",

118
src/app.ts
View File

@ -1,12 +1,4 @@
import { import {Engine, FreeCamera, Scene, Vector3} from "@babylonjs/core";
Engine,
FreeCamera,
HemisphericLight,
Scene,
Vector3,
WebXRDefaultExperience,
WebXRState
} from "@babylonjs/core";
import '@babylonjs/loaders'; import '@babylonjs/loaders';
import {DiagramManager} from "./diagram/diagramManager"; import {DiagramManager} from "./diagram/diagramManager";
import {Toolbox} from "./toolbox/toolbox"; import {Toolbox} from "./toolbox/toolbox";
@ -21,9 +13,9 @@ import {DiagramEventType} from "./diagram/diagramEntity";
import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection"; import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
import {DiagramExporter} from "./util/diagramExporter"; import {DiagramExporter} from "./util/diagramExporter";
import {Spinner} from "./util/spinner"; import {Spinner} from "./util/spinner";
import {WebController} from "./controllers/webController";
import {PouchdbPersistenceManager} from "./integration/pouchdbPersistenceManager"; import {PouchdbPersistenceManager} from "./integration/pouchdbPersistenceManager";
import {addSceneInspector} from "./util/functions/sceneInspctor"; import {addSceneInspector} from "./util/functions/sceneInspctor";
import {groundMeshObserver} from "./util/functions/groundMeshObserver";
export class App { export class App {
@ -59,8 +51,6 @@ export class App {
} }
const scene = new Scene(engine); const scene = new Scene(engine);
const spinner = new Spinner(scene); const spinner = new Spinner(scene);
spinner.show(); spinner.show();
const config = new AppConfig(); const config = new AppConfig();
@ -76,7 +66,6 @@ export class App {
*/ */
const controllers = new Controllers(); const controllers = new Controllers();
const toolbox = new Toolbox(scene, controllers); const toolbox = new Toolbox(scene, controllers);
const diagramManager = new DiagramManager(scene, controllers, toolbox, config); const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
const db = new PouchdbPersistenceManager("diagram"); const db = new PouchdbPersistenceManager("diagram");
//diagramManager.setPersistenceManager(db); //diagramManager.setPersistenceManager(db);
@ -120,111 +109,14 @@ export class App {
await db.initialize(); await db.initialize();
/*peerjsNetworkConnection.diagramEventObservable.add((evt) => {
this.logger.debug('App', 'peerjs network event', evt);
diagramManager.onDiagramEventObservable.notifyObservers(evt, 1);
});
diagramManager.onDiagramEventObservable.add((evt) => {
this.logger.debug('App', 'diagram event', evt);
peerjsNetworkConnection.dataReplicationObservable.notifyObservers(evt);
worker.postMessage({entity: evt});
}, 2);
config.onConfigChangedObservable.add((config) => {
this.logger.debug('App', 'config changed', config);
worker.postMessage({config: config});
}, 2);
worker.onmessage = (evt) => {
this.logger.debug(evt);
if (evt.data.entity) {
this.logger.debug('App', 'worker message', evt.data.entity);
peerjsNetworkConnection.dataReplicationObservable.notifyObservers({
type: DiagramEventType.ADD,
entity: evt.data.entity
});
diagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.ADD,
entity: evt.data.entity
}, 1);
}
if (evt.data.config) {
config.onConfigChangedObservable.notifyObservers(evt.data.config, 1);
if (!evt.data.config.demoCompleted) {
const intro = new Introduction(scene, config);
//intro.start();
}
}
}
worker.postMessage({type: 'init'});
*/
//diagramManager.setPersistenceManager(persistenceManager);
const environment = new CustomEnvironment(scene, "default", config); const environment = new CustomEnvironment(scene, "default", config);
/*persistenceManager.initialize().then(() => {
if (!config.current?.demoCompleted) {
const intro = new Introduction(scene, config);
intro.start();
}
});
*/
const camera: FreeCamera = new FreeCamera("Camera", const camera: FreeCamera = new FreeCamera("Camera",
new Vector3(0, 1.6, 3), scene); new Vector3(0, 1.6, 3), scene);
camera.setTarget(new Vector3(0, 1.6, 0)); camera.setTarget(new Vector3(0, 1.6, 0));
// camera.attachControl(canvas, true);
new HemisphericLight("light1", new Vector3(1, 1, 0), scene); environment.groundMeshObservable.add((ground) => {
new HemisphericLight("light1", new Vector3(-1, 1, 0), scene); groundMeshObserver(ground, scene, diagramManager, controllers, spinner);
environment.groundMeshObservable.add(async (ground) => { }, -1, false, this);
const xr = await WebXRDefaultExperience.CreateAsync(scene, {
floorMeshes: [ground],
disableTeleportation: true,
outputCanvasOptions: {
canvasOptions: {
framebufferScaleFactor: 1
}
},
optionalFeatures: true,
pointerSelectionOptions: {
enablePointerSelectionOnAllControllers: true
}
});
spinner.hide();
xr.baseExperience.sessionManager.onXRSessionInit.add((session) => {
session.addEventListener('visibilitychange', (ev) => {
this.logger.debug(ev);
});
});
xr.baseExperience.onStateChangedObservable.add((state) => {
if (state == WebXRState.IN_XR) {
scene.audioEnabled = true;
xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
window.addEventListener(('pa-button-state-change'), (event: any) => {
if (event.detail) {
log.debug('App', event.detail);
}
});
}
});
import('./controllers/rigplatform').then((rigmodule) => {
const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers);
const webController = new WebController(scene, rig, diagramManager, controllers);
// const deckMenu = new DeckMenu(scene, xr, controllers);
/*setTimeout(() => {
const soccerMenu = new SoccerMenu(scene, xr, controllers);
}, 5000);
*/
});
});
const gamepadManager = new GamepadManager(scene); const gamepadManager = new GamepadManager(scene);
/* /*

6
src/controllers/left.ts
View File

@ -12,7 +12,7 @@ import {ControllerEventType, Controllers} from "./controllers";
import log from "loglevel"; import log from "loglevel";
import {ConfigMenu} from "../menus/configMenu"; import {ConfigMenu} from "../menus/configMenu";
import {DiagramManager} from "../diagram/diagramManager"; import {DiagramManager} from "../diagram/diagramManager";
import {Button} from "../objects/button"; import {RoundButton} from "../objects/roundButton";
export class Left extends Base { export class Left extends Base {
@ -39,8 +39,8 @@ export class Left extends Base {
transform.parent = controller.grip; transform.parent = controller.grip;
transform.rotation.x = Math.PI / 2; transform.rotation.x = Math.PI / 2;
transform.scaling = new Vector3(.2, .2, .2); transform.scaling = new Vector3(.2, .2, .2);
const xbutton = new Button(transform, 'X', 'toggle toolbox menu', new Vector2(-.5, -.1)); const xbutton = new RoundButton(transform, 'X', 'toggle toolbox menu', new Vector2(-.5, -.1));
const ybutton = new Button(transform, 'Y', 'toggle settings menu', new Vector2(-.4, .1)); const ybutton = new RoundButton(transform, 'Y', 'toggle settings menu', new Vector2(-.4, .1));
} }
this.initXButton(init.components['x-button']); this.initXButton(init.components['x-button']);

6
src/controllers/right.ts
View File

@ -12,7 +12,7 @@ import {ControllerEventType, Controllers} from "./controllers";
import log from "loglevel"; import log from "loglevel";
import {DiagramManager} from "../diagram/diagramManager"; import {DiagramManager} from "../diagram/diagramManager";
import {DiagramListingMenu} from "../menus/diagramListingMenu"; import {DiagramListingMenu} from "../menus/diagramListingMenu";
import {Button} from "../objects/button"; import {RoundButton} from "../objects/roundButton";
export class Right extends Base { export class Right extends Base {
private listingMenu: DiagramListingMenu; private listingMenu: DiagramListingMenu;
@ -50,8 +50,8 @@ export class Right extends Base {
transform.parent = controller.grip; transform.parent = controller.grip;
transform.rotation.x = Math.PI / 2; transform.rotation.x = Math.PI / 2;
transform.scaling = new Vector3(.2, .2, .2); transform.scaling = new Vector3(.2, .2, .2);
const abutton = new Button(transform, 'A', 'toggle edit menu', new Vector2(.5, -.1)); const abutton = new RoundButton(transform, 'A', 'toggle edit menu', new Vector2(.5, -.1));
const bbutton = new Button(transform, 'B', 'toggle diagram selector', new Vector2(.4, .1)); const bbutton = new RoundButton(transform, 'B', 'toggle diagram selector', new Vector2(.4, .1));
} }
this.initBButton(init.components['b-button']); this.initBButton(init.components['b-button']);

5
src/controllers/webController.ts
View File

@ -10,7 +10,6 @@ export class WebController {
private scene: Scene; private scene: Scene;
private speed: number = 1; private speed: number = 1;
private readonly referencePlane: AbstractMesh; private readonly referencePlane: AbstractMesh;
private grabbedMesh: AbstractMesh;
private pickedMesh: AbstractMesh; private pickedMesh: AbstractMesh;
private rig: Rigplatform; private rig: Rigplatform;
private diagramManager: DiagramManager; private diagramManager: DiagramManager;
@ -120,7 +119,7 @@ export class WebController {
}); });
this.scene.onPointerDown = (evt, state, type) => { this.scene.onPointerDown = (evt, state) => {
if (evt.pointerType == "mouse") { if (evt.pointerType == "mouse") {
if (evt.shiftKey) { if (evt.shiftKey) {
setMenuPosition(this.referencePlane, this.scene, new Vector3(0, 0, 5)); setMenuPosition(this.referencePlane, this.scene, new Vector3(0, 0, 5));
@ -135,7 +134,6 @@ export class WebController {
}; };
this.scene.onPointerMove = (evt) => { this.scene.onPointerMove = (evt) => {
if (this.mouseDown) { if (this.mouseDown) {
//this.rig.leftright(evt.movementX);
this.rig.turn(evt.movementX); this.rig.turn(evt.movementX);
} }
const meshPickInfo = scene.pick(this.scene.pointerX, this.scene.pointerY, (mesh) => { const meshPickInfo = scene.pick(this.scene.pointerX, this.scene.pointerY, (mesh) => {
@ -150,7 +148,6 @@ export class WebController {
this.mesh = meshPickInfo.pickedMesh; this.mesh = meshPickInfo.pickedMesh;
} else { } else {
if (this._mesh.id != meshPickInfo.pickedMesh.id) { if (this._mesh.id != meshPickInfo.pickedMesh.id) {
//const clone = grabAndClone()
this.mesh = meshPickInfo.pickedMesh; this.mesh = meshPickInfo.pickedMesh;
} }
} }

13
src/materials/functions/buildStandardMaterial.ts Normal file
View File

@ -0,0 +1,13 @@
import {Color3, Scene, StandardMaterial} from "@babylonjs/core";
export function buildStandardMaterial(name: string, scene: Scene, color: string): StandardMaterial {
const existingMaterial = scene.getMaterialById(name);
if (existingMaterial) {
return (existingMaterial as StandardMaterial);
}
const handleMaterial = new StandardMaterial(name, scene);
handleMaterial.id = name;
handleMaterial.diffuseColor = Color3.FromHexString(color);
handleMaterial.alpha = 1;
return handleMaterial;
}

6
src/menus/abstractMenu.ts
View File

@ -1,10 +1,10 @@
import {Scene, TransformNode, Vector3, WebXRDefaultExperience} from "@babylonjs/core"; import {Scene, TransformNode, Vector3, WebXRDefaultExperience} from "@babylonjs/core";
import {Controllers} from "../controllers/controllers"; import {Controllers} from "../controllers/controllers";
import {MenuHandle} from "./menuHandle";
import {Button3D, TextBlock} from "@babylonjs/gui"; import {Button3D, TextBlock} from "@babylonjs/gui";
import {Handle} from "../objects/handle";
export abstract class AbstractMenu { export abstract class AbstractMenu {
protected handle: MenuHandle; protected handle: Handle;
protected scene: Scene; protected scene: Scene;
protected xr: WebXRDefaultExperience; protected xr: WebXRDefaultExperience;
protected controllers: Controllers; protected controllers: Controllers;
@ -28,7 +28,7 @@ export abstract class AbstractMenu {
} }
protected createHandle(mesh: TransformNode) { protected createHandle(mesh: TransformNode) {
this.handle = new MenuHandle(mesh); this.handle = new Handle(mesh);
} }
public toggle() { public toggle() {

30
src/menus/menuHandle.ts
View File

@ -1,30 +0,0 @@
import {AbstractMesh, Color3, MeshBuilder, Scene, StandardMaterial, TransformNode, Vector3} from "@babylonjs/core";
export class MenuHandle {
public mesh: AbstractMesh;
private menuTransformNode: TransformNode;
constructor(mesh: TransformNode) {
this.menuTransformNode = mesh;
this.buildHandle(mesh.getScene());
}
private buildHandle(scene: Scene) {
const handle = MeshBuilder.CreateCapsule("handle", {
radius: .05,
orientation: Vector3.Right(),
height: .4
}, scene);
handle.id = "handle-" + this.menuTransformNode.id + "-mesh";
const handleMaterial = new StandardMaterial("handle-" + this.menuTransformNode.id, scene);
handleMaterial.diffuseColor = Color3.FromHexString("#EEEEFF");
handleMaterial.alpha = .8;
handle.material = handleMaterial;
handle.position = Vector3.Zero();
handle.metadata = {handle: true};
if (this.menuTransformNode) {
this.menuTransformNode.setParent(handle);
}
this.mesh = handle;
}
}

39
src/objects/handle.ts Normal file
View File

@ -0,0 +1,39 @@
import {AbstractMesh, InstancedMesh, Mesh, MeshBuilder, Scene, TransformNode, Vector3} from "@babylonjs/core";
import {buildStandardMaterial} from "../materials/functions/buildStandardMaterial";
export class Handle {
public mesh: AbstractMesh;
private readonly transformNode: TransformNode;
constructor(mesh: TransformNode) {
this.transformNode = mesh;
this.buildHandle();
}
private buildHandle() {
const scene: Scene = this.transformNode.getScene();
const handle = getHandleMesh("handle-" + this.transformNode.id + "-mesh", scene);
handle.position = Vector3.Zero();
handle.metadata = {handle: true};
if (this.transformNode) {
this.transformNode.setParent(handle);
}
this.mesh = handle;
}
}
function getHandleMesh(name: string, scene: Scene): InstancedMesh {
const existingBase = scene.getMeshById("base-handle-mesh");
if (existingBase) {
return new InstancedMesh(name, (existingBase as Mesh));
}
const handle = MeshBuilder.CreateCapsule("base-handle-mesh", {
radius: .05,
orientation: Vector3.Right(),
height: .4
}, scene);
handle.setEnabled(false);
handle.material = buildStandardMaterial('base-handle-material', scene, "#CCCCDD");
handle.id = "base-handle-mesh";
return new InstancedMesh(name, (handle as Mesh));
}

2
src/objects/button.ts → src/objects/roundButton.ts
View File

@ -1,6 +1,6 @@
import {DynamicTexture, MeshBuilder, StandardMaterial, TransformNode, Vector2, Vector3} from "@babylonjs/core"; import {DynamicTexture, MeshBuilder, StandardMaterial, TransformNode, Vector2, Vector3} from "@babylonjs/core";
export class Button { export class RoundButton {
private parent: TransformNode; private parent: TransformNode;
constructor(parent: TransformNode, label: string, description: string, position: Vector2) { constructor(parent: TransformNode, label: string, description: string, position: Vector2) {

7
src/toolbox/toolbox.ts
View File

@ -4,8 +4,9 @@ import {Button3D, GUI3DManager, StackPanel3D, TextBlock} from "@babylonjs/gui";
import {ControllerEventType, Controllers} from "../controllers/controllers"; import {ControllerEventType, Controllers} from "../controllers/controllers";
import {setMenuPosition} from "../util/functions/setMenuPosition"; import {setMenuPosition} from "../util/functions/setMenuPosition";
import {buildColor} from "./functions/buildColor"; import {buildColor} from "./functions/buildColor";
import {MenuHandle} from "../menus/menuHandle";
import log from "loglevel"; import log from "loglevel";
import {Handle} from "../objects/handle";
export class Toolbox { export class Toolbox {
private readonly logger = log.getLogger('Toolbox'); private readonly logger = log.getLogger('Toolbox');
@ -18,7 +19,7 @@ export class Toolbox {
private readonly xObserver; private readonly xObserver;
public readonly colorChangeObservable: Observable<{ oldColor: string, newColor: string }> = public readonly colorChangeObservable: Observable<{ oldColor: string, newColor: string }> =
new Observable<{ oldColor: string; newColor: string }>() new Observable<{ oldColor: string; newColor: string }>()
private handle: MenuHandle; private handle: Handle;
constructor(scene: Scene, controllers: Controllers) { constructor(scene: Scene, controllers: Controllers) {
this.scene = scene; this.scene = scene;
this.controllers = controllers; this.controllers = controllers;
@ -26,7 +27,7 @@ export class Toolbox {
this.manager = new GUI3DManager(scene); this.manager = new GUI3DManager(scene);
this.manager.addControl(this.addPanel); this.manager.addControl(this.addPanel);
this.node = new TransformNode("toolbox", this.scene); this.node = new TransformNode("toolbox", this.scene);
this.handle = new MenuHandle(this.node); this.handle = new Handle(this.node);
this.node.position.y = .1; this.node.position.y = .1;
this.node.position.z = .2; this.node.position.z = .2;
this.node.scaling = new Vector3(0.6, 0.6, 0.6); this.node.scaling = new Vector3(0.6, 0.6, 0.6);

4
src/util/customEnvironment.ts
View File

@ -1,5 +1,6 @@
import { import {
GroundMesh, GroundMesh,
HemisphericLight,
MeshBuilder, MeshBuilder,
Observable, Observable,
PBRMaterial, PBRMaterial,
@ -24,6 +25,9 @@ export class CustomEnvironment {
constructor(scene: Scene, name: string = "default", config: AppConfig) { constructor(scene: Scene, name: string = "default", config: AppConfig) {
this.scene = scene; this.scene = scene;
this.name = name; this.name = name;
new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
new HemisphericLight("light2", new Vector3(-1, 1, 0), scene);
const physics = new CustomPhysics(this.scene, config); const physics = new CustomPhysics(this.scene, config);
physics physics
.initializeAsync() .initializeAsync()

45
src/util/functions/groundMeshObserver.ts Normal file
View File

@ -0,0 +1,45 @@
import {Vector3, WebXRDefaultExperience, WebXRState} from "@babylonjs/core";
import log from "loglevel";
import {WebController} from "../../controllers/webController";
export async function groundMeshObserver(ground, scene, diagramManager, controllers, spinner) {
const xr = await WebXRDefaultExperience.CreateAsync(scene, {
floorMeshes: [ground],
disableTeleportation: true,
outputCanvasOptions: {
canvasOptions: {
framebufferScaleFactor: 1
}
},
optionalFeatures: true,
pointerSelectionOptions: {
enablePointerSelectionOnAllControllers: true
}
});
if (spinner) {
spinner.hide();
}
xr.baseExperience.sessionManager.onXRSessionInit.add((session) => {
session.addEventListener('visibilitychange', (ev) => {
this.logger.debug(ev);
});
});
xr.baseExperience.onStateChangedObservable.add((state) => {
if (state == WebXRState.IN_XR) {
scene.audioEnabled = true;
xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
window.addEventListener(('pa-button-state-change'), (event: any) => {
if (event.detail) {
log.debug('App', event.detail);
}
});
}
});
import('../../controllers/rigplatform').then((rigmodule) => {
const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers);
const webController = new WebController(scene, rig, diagramManager, controllers);
});
}