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

28
index.html
View File

@ -24,28 +24,8 @@
height: 100%;
margin: 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 {
position: fixed;
top: 30px;
@ -69,7 +49,6 @@
background: #000;
color: #fff;
}
</style>
<link as="script" href="/newRelic.js" rel="preload">
<script src="/newRelic.js"></script>
@ -82,11 +61,11 @@
<script src='/niceware.js'></script>
</head>
<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>
</div>
<div id="download"><a href="#" id="downloadLink">Download Model</a></div>
-->
<script>
/*
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
@ -114,6 +93,5 @@
<div class="scene">
<canvas id="gameCanvas"></canvas>
</div>
</body>
</html>
</html>

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

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

34
package-lock.json generated
View File

@ -17,7 +17,7 @@
"@babylonjs/procedural-textures": "^6.21.3",
"@babylonjs/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0",
"@netlify/functions": "^2.3.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8",
"@types/file-saver": "^2.0.6",
"@types/node": "^18.14.0",
@ -639,16 +639,37 @@
}
},
"node_modules/@netlify/functions": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-1.6.0.tgz",
"integrity": "sha512-6G92AlcpFrQG72XU8YH8pg94eDnq7+Q0YJhb8x4qNpdGsvuzvrfHWBmqFGp/Yshmv4wex9lpsTRZOocdrA2erQ==",
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.3.0.tgz",
"integrity": "sha512-E3kzXPWMP/r1rAWhjTaXcaOT47dhEvg/eQUJjRLhD9Zzp0WqkdynHr+bqff4rFNv6tuXrtFZrpbPJFKHH0c0zw==",
"dependencies": {
"@netlify/serverless-functions-api": "1.9.0",
"is-promise": "^4.0.0"
},
"engines": {
"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": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -4532,6 +4553,11 @@
"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": {
"version": "1.0.0",
"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/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0",
"@netlify/functions": "^2.3.0",
"events": "^3.3.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8",
"@types/node": "^18.14.0",

118
src/app.ts
View File

@ -1,12 +1,4 @@
import {
Engine,
FreeCamera,
HemisphericLight,
Scene,
Vector3,
WebXRDefaultExperience,
WebXRState
} from "@babylonjs/core";
import {Engine, FreeCamera, Scene, Vector3} from "@babylonjs/core";
import '@babylonjs/loaders';
import {DiagramManager} from "./diagram/diagramManager";
import {Toolbox} from "./toolbox/toolbox";
@ -21,9 +13,9 @@ import {DiagramEventType} from "./diagram/diagramEntity";
import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
import {DiagramExporter} from "./util/diagramExporter";
import {Spinner} from "./util/spinner";
import {WebController} from "./controllers/webController";
import {PouchdbPersistenceManager} from "./integration/pouchdbPersistenceManager";
import {addSceneInspector} from "./util/functions/sceneInspctor";
import {groundMeshObserver} from "./util/functions/groundMeshObserver";
export class App {
@ -59,8 +51,6 @@ export class App {
}
const scene = new Scene(engine);
const spinner = new Spinner(scene);
spinner.show();
const config = new AppConfig();
@ -76,7 +66,6 @@ export class App {
*/
const controllers = new Controllers();
const toolbox = new Toolbox(scene, controllers);
const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
const db = new PouchdbPersistenceManager("diagram");
//diagramManager.setPersistenceManager(db);
@ -120,111 +109,14 @@ export class App {
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);
/*persistenceManager.initialize().then(() => {
if (!config.current?.demoCompleted) {
const intro = new Introduction(scene, config);
intro.start();
}
});
*/
const camera: FreeCamera = new FreeCamera("Camera",
new Vector3(0, 1.6, 3), scene);
camera.setTarget(new Vector3(0, 1.6, 0));
// camera.attachControl(canvas, true);
new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
new HemisphericLight("light1", new Vector3(-1, 1, 0), scene);
environment.groundMeshObservable.add(async (ground) => {
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);
*/
});
});
environment.groundMeshObservable.add((ground) => {
groundMeshObserver(ground, scene, diagramManager, controllers, spinner);
}, -1, false, this);
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 {ConfigMenu} from "../menus/configMenu";
import {DiagramManager} from "../diagram/diagramManager";
import {Button} from "../objects/button";
import {RoundButton} from "../objects/roundButton";
export class Left extends Base {
@ -39,8 +39,8 @@ export class Left extends Base {
transform.parent = controller.grip;
transform.rotation.x = Math.PI / 2;
transform.scaling = new Vector3(.2, .2, .2);
const xbutton = new Button(transform, 'X', 'toggle toolbox menu', new Vector2(-.5, -.1));
const ybutton = new Button(transform, 'Y', 'toggle settings menu', new Vector2(-.4, .1));
const xbutton = new RoundButton(transform, 'X', 'toggle toolbox menu', new Vector2(-.5, -.1));
const ybutton = new RoundButton(transform, 'Y', 'toggle settings menu', new Vector2(-.4, .1));
}
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 {DiagramManager} from "../diagram/diagramManager";
import {DiagramListingMenu} from "../menus/diagramListingMenu";
import {Button} from "../objects/button";
import {RoundButton} from "../objects/roundButton";
export class Right extends Base {
private listingMenu: DiagramListingMenu;
@ -50,8 +50,8 @@ export class Right extends Base {
transform.parent = controller.grip;
transform.rotation.x = Math.PI / 2;
transform.scaling = new Vector3(.2, .2, .2);
const abutton = new Button(transform, 'A', 'toggle edit menu', new Vector2(.5, -.1));
const bbutton = new Button(transform, 'B', 'toggle diagram selector', new Vector2(.4, .1));
const abutton = new RoundButton(transform, 'A', 'toggle edit menu', new Vector2(.5, -.1));
const bbutton = new RoundButton(transform, 'B', 'toggle diagram selector', new Vector2(.4, .1));
}
this.initBButton(init.components['b-button']);

5
src/controllers/webController.ts
View File

@ -10,7 +10,6 @@ export class WebController {
private scene: Scene;
private speed: number = 1;
private readonly referencePlane: AbstractMesh;
private grabbedMesh: AbstractMesh;
private pickedMesh: AbstractMesh;
private rig: Rigplatform;
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.shiftKey) {
setMenuPosition(this.referencePlane, this.scene, new Vector3(0, 0, 5));
@ -135,7 +134,6 @@ export class WebController {
};
this.scene.onPointerMove = (evt) => {
if (this.mouseDown) {
//this.rig.leftright(evt.movementX);
this.rig.turn(evt.movementX);
}
const meshPickInfo = scene.pick(this.scene.pointerX, this.scene.pointerY, (mesh) => {
@ -150,7 +148,6 @@ export class WebController {
this.mesh = meshPickInfo.pickedMesh;
} else {
if (this._mesh.id != meshPickInfo.pickedMesh.id) {
//const clone = grabAndClone()
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 {Controllers} from "../controllers/controllers";
import {MenuHandle} from "./menuHandle";
import {Button3D, TextBlock} from "@babylonjs/gui";
import {Handle} from "../objects/handle";
export abstract class AbstractMenu {
protected handle: MenuHandle;
protected handle: Handle;
protected scene: Scene;
protected xr: WebXRDefaultExperience;
protected controllers: Controllers;
@ -28,7 +28,7 @@ export abstract class AbstractMenu {
}
protected createHandle(mesh: TransformNode) {
this.handle = new MenuHandle(mesh);
this.handle = new Handle(mesh);
}
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";
export class Button {
export class RoundButton {
private parent: TransformNode;
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 {setMenuPosition} from "../util/functions/setMenuPosition";
import {buildColor} from "./functions/buildColor";
import {MenuHandle} from "../menus/menuHandle";
import log from "loglevel";
import {Handle} from "../objects/handle";
export class Toolbox {
private readonly logger = log.getLogger('Toolbox');
@ -18,7 +19,7 @@ export class Toolbox {
private readonly xObserver;
public readonly colorChangeObservable: Observable<{ oldColor: string, newColor: string }> =
new Observable<{ oldColor: string; newColor: string }>()
private handle: MenuHandle;
private handle: Handle;
constructor(scene: Scene, controllers: Controllers) {
this.scene = scene;
this.controllers = controllers;
@ -26,7 +27,7 @@ export class Toolbox {
this.manager = new GUI3DManager(scene);
this.manager.addControl(this.addPanel);
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.z = .2;
this.node.scaling = new Vector3(0.6, 0.6, 0.6);

4
src/util/customEnvironment.ts
View File

@ -1,5 +1,6 @@
import {
GroundMesh,
HemisphericLight,
MeshBuilder,
Observable,
PBRMaterial,
@ -24,6 +25,9 @@ export class CustomEnvironment {
constructor(scene: Scene, name: string = "default", config: AppConfig) {
this.scene = scene;
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);
physics
.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);
});
}