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

Standardized widget sizing, added logging library, cleaned up dualshock implementation.

Browse Source
This commit is contained in:
Michael Mainguy 2023-07-26 16:54:07 -05:00
parent ff0f8c7816
commit d55b82833d
11 changed files with 97 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -22,6 +22,7 @@
"express": "^4.18.2", "express": "^4.18.2",
"express-http-proxy": "^1.6.3", "express-http-proxy": "^1.6.3",
"google-static-maps-tile": "1.0.0", "google-static-maps-tile": "1.0.0",
"loglevel": "^1.8.1",
"query-string": "^8.1.0", "query-string": "^8.1.0",
"ring-client-api": "^11.8.0", "ring-client-api": "^11.8.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
@ -2907,6 +2908,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/loglevel": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
"integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
"engines": {
"node": ">= 0.6.0"
},
"funding": {
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/loglevel"
}
},
"node_modules/long": { "node_modules/long": {
"version": "5.2.3", "version": "5.2.3",
"resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",

1
package.json
View File

@ -26,6 +26,7 @@
"google-static-maps-tile": "1.0.0", "google-static-maps-tile": "1.0.0",
"query-string": "^8.1.0", "query-string": "^8.1.0",
"vite-express": "^0.9.1", "vite-express": "^0.9.1",
"loglevel": "^1.8.1",
"express-http-proxy": "^1.6.3", "express-http-proxy": "^1.6.3",
"earcut": "^2.2.4", "earcut": "^2.2.4",
"uuid": "^9.0.0" "uuid": "^9.0.0"

48
src/app.ts
View File

@ -132,54 +132,6 @@ export class App {
} }
}); });
const buttonMap = [
{buttonIndex: 3, objectName: "right-controller"},
{buttonIndex: 3, objectName: "right-Controller"},
{buttonIndex: 4, objectName: "right-Controller"},
{buttonIndex: 4, objectName: "right-Controller"},
];
/*
gamepad.onButtonDownObservable.add((button, state) => {
console.log(buttonIndex);
console.log(buttonMap);
if (buttonIndex < 4) {
window.dispatchEvent(new CustomEvent('pa-button-state-change', {
detail: {
objectName: buttonMap[buttonIndex].objectName,
pressed: true,
touched: false,
buttonIndex: buttonMap[buttonIndex].buttonIndex,
value: 1
}
}
));
}
});
gamepad.onButtonUpObservable.add((buttonIndex, state) => {
console.log(buttonIndex);
console.log(state);
if (buttonIndex < 4) {
window.dispatchEvent( new CustomEvent('pa-button-state-change', {
detail: {
objectName: buttonMap[buttonIndex].objectName,
pressed: false,
touched: false,
buttonIndex: buttonMap[buttonIndex].buttonIndex,
value: 0
}
}
));
}
});
*/
gamepad.onleftstickchanged((values) => { gamepad.onleftstickchanged((values) => {
window.dispatchEvent( window.dispatchEvent(
new CustomEvent('pa-analog-value-change', { new CustomEvent('pa-analog-value-change', {

1
src/controllers/base.ts
View File

@ -11,6 +11,7 @@ import {
import {MeshConverter} from "../diagram/meshConverter"; import {MeshConverter} from "../diagram/meshConverter";
import {DiagramManager} from "../diagram/diagramManager"; import {DiagramManager} from "../diagram/diagramManager";
import {DiagramEvent, DiagramEventType} from "../diagram/diagramEntity"; import {DiagramEvent, DiagramEventType} from "../diagram/diagramEntity";
import log from 'loglevel';
export class Base { export class Base {
static stickVector = Vector3.Zero(); static stickVector = Vector3.Zero();

5
src/controllers/left.ts
View File

@ -22,6 +22,11 @@ export class Left extends Base {
this.moveMovable(value); this.moveMovable(value);
} }
}); });
init.components['xr-standard-thumbstick'].onButtonStateChangedObservable.add((value) => {
if (value.pressed) {
Controllers.controllerObserver.notifyObservers({type: 'decreaseVelocity', value: value.value});
}
});
} }
}); });

2
src/controllers/right.ts
View File

@ -72,7 +72,7 @@ export class Right extends Base {
}); });
thumbstick.onButtonStateChangedObservable.add((value) => { thumbstick.onButtonStateChangedObservable.add((value) => {
if (value.pressed) { if (value.pressed) {
Controllers.toggleMovementMode(); Controllers.controllerObserver.notifyObservers({type: 'increaseVelocity', value: value.value});
} }
}); });
} }

61
src/controllers/rigplatform.ts
View File

@ -10,7 +10,7 @@ import {
PhysicsShapeType, PhysicsShapeType,
Quaternion, Quaternion,
Scene, Scene,
StandardMaterial, StandardMaterial, TransformNode,
Vector3, Vector3,
WebXRDefaultExperience WebXRDefaultExperience
} from "@babylonjs/core"; } from "@babylonjs/core";
@ -18,13 +18,11 @@ import {Right} from "./right";
import {Left} from "./left"; import {Left} from "./left";
import {Bmenu} from "../menus/bmenu"; import {Bmenu} from "../menus/bmenu";
import {Controllers} from "./controllers"; import {Controllers} from "./controllers";
import {BmenuState} from "../menus/MenuState";
export class Rigplatform { export class Rigplatform {
static LINEAR_VELOCITY = 4; private velocityIndex = 2;
static ANGULAR_VELOCITY = 3; private readonly velocityArray = [0.01, 0.1, 1, 2, 5];
static x90 = Quaternion.RotationAxis(Vector3.Up(), 1.5708);
public bMenu: Bmenu; public bMenu: Bmenu;
private scene: Scene; private scene: Scene;
public static instance: Rigplatform; public static instance: Rigplatform;
@ -34,6 +32,7 @@ export class Rigplatform {
public rigMesh: Mesh; public rigMesh: Mesh;
private camera: Camera; private camera: Camera;
private turning: boolean = false; private turning: boolean = false;
private velocity: Vector3 = Vector3.Zero();
constructor(scene: Scene, xr: WebXRDefaultExperience) { constructor(scene: Scene, xr: WebXRDefaultExperience) {
@ -41,11 +40,19 @@ export class Rigplatform {
Rigplatform.xr = xr; Rigplatform.xr = xr;
Rigplatform.instance = this; Rigplatform.instance = this;
this.bMenu = new Bmenu(scene, xr.baseExperience); this.bMenu = new Bmenu(scene, xr.baseExperience);
this.camera = scene.activeCamera; this.camera = scene.activeCamera;
this.rigMesh = MeshBuilder.CreateBox("platform", {width: 2, height: .02, depth: 2}, scene); this.rigMesh = MeshBuilder.CreateBox("platform", {width: 2, height: .02, depth: 2}, scene);
//new Hud(this.rigMesh, scene); //new Hud(this.rigMesh, scene);
const transform = new TransformNode("transform", scene);
transform.parent=this.rigMesh;
transform.position = new Vector3(0, 1.6, -5);
const pointer = MeshBuilder.CreateSphere("pointer", {diameter: .1}, scene);
pointer.parent = transform;
pointer.position = this.velocity;
for (const cam of scene.cameras) { for (const cam of scene.cameras) {
cam.parent = this.rigMesh; cam.parent = this.rigMesh;
@ -80,33 +87,23 @@ export class Rigplatform {
} }
public forwardback(val: number) { public forwardback(val: number) {
const ray = this.camera.getForwardRay(); this.velocity.z = (val * this.velocityArray[this.velocityIndex])*-1;
this.body.setLinearVelocity(ray.direction.scale(val * -1)); const vel = this.velocity.applyRotationQuaternion(this.camera.absoluteRotation);
} this.body.setLinearVelocity(vel);
public forwardbackleftright(x: number, y: number) {
const ray = this.camera.getForwardRay();
const direction = ray.direction.applyRotationQuaternion(Rigplatform.x90).scale(x);
direction.z = y;
this.body.setLinearVelocity(direction);
} }
public leftright(val: number) { public leftright(val: number) {
const ray = this.camera.getForwardRay(); this.velocity.x = (val * this.velocityArray[this.velocityIndex]);
const direction = ray.direction.applyRotationQuaternion(Rigplatform.x90).scale(val); const vel = this.velocity.applyRotationQuaternion(this.camera.absoluteRotation);
this.body.setLinearVelocity(direction); this.body.setLinearVelocity(vel);
} }
public stop() { public stop() {
this.body.setLinearVelocity(Vector3.Zero());
this.body.setAngularVelocity(Vector3.Zero());
} }
public updown(val: number) { public updown(val: number) {
let direction = Vector3.Zero(); this.velocity.y = (val * this.velocityArray[this.velocityIndex])*-1;
this.body.getLinearVelocityToRef(direction); const vel = this.velocity.applyRotationQuaternion(this.camera.absoluteRotation);
direction.y = (val * -1); this.body.setLinearVelocity(vel);
this.body.setLinearVelocity(direction);
} }
public turn(val: number) { public turn(val: number) {
@ -141,6 +138,20 @@ export class Rigplatform {
Right.instance = new Right(source, this.scene, Rigplatform.xr); Right.instance = new Right(source, this.scene, Rigplatform.xr);
Controllers.controllerObserver.add((event: { type: string, value: number }) => { Controllers.controllerObserver.add((event: { type: string, value: number }) => {
switch (event.type) { switch (event.type) {
case "increaseVelocity":
if (this.velocityIndex < this.velocityArray.length -1) {
this.velocityIndex++;
} else {
this.velocityIndex = 0;
}
break;
case "decreaseVelocity":
if (this.velocityIndex > 0) {
this.velocityIndex--;
} else {
this.velocityIndex = this.velocityArray.length-1;
}
break;
case "turn": case "turn":
this.turn(event.value); this.turn(event.value);
break; break;

8
src/diagram/diagramManager.ts
View File

@ -14,7 +14,8 @@ import {MeshConverter} from "./meshConverter";
export class DiagramManager { export class DiagramManager {
private persistenceManager: IPersistenceManager = new IndexdbPersistenceManager("diagram"); private persistenceManager: IPersistenceManager = new IndexdbPersistenceManager("diagram");
static onDiagramEventObservable = new Observable(); static onDiagramEventObservable: Observable<DiagramEvent> = new Observable();
private readonly scene: Scene; private readonly scene: Scene;
private xr: WebXRExperienceHelper; private xr: WebXRExperienceHelper;
static currentMesh: AbstractMesh; static currentMesh: AbstractMesh;
@ -47,7 +48,6 @@ export class DiagramManager {
const nodeMaterial = new NodeMaterial("nodeMaterial", this.scene, { emitComments: true }); const nodeMaterial = new NodeMaterial("nodeMaterial", this.scene, { emitComments: true });
const positionInput = new InputBlock("position"); const positionInput = new InputBlock("position");
positionInput.setAsAttribute("position"); positionInput.setAsAttribute("position");
} }
#onDiagramEvent(event: DiagramEvent) { #onDiagramEvent(event: DiagramEvent) {
const entity = event.entity; const entity = event.entity;
@ -66,6 +66,7 @@ export class DiagramManager {
case DiagramEventType.ADD: case DiagramEventType.ADD:
break; break;
case DiagramEventType.MODIFY: case DiagramEventType.MODIFY:
this.persistenceManager.modify(mesh);
break; break;
case DiagramEventType.REMOVE: case DiagramEventType.REMOVE:
if (mesh) { if (mesh) {
@ -75,7 +76,4 @@ export class DiagramManager {
break; break;
} }
} }
#createMesh(entity: DiagramEntity) {
return MeshConverter.fromDiagramEntity(entity, this.scene);
}
} }

22
src/menus/bmenu.ts
View File

@ -62,7 +62,17 @@ export class Bmenu {
if (this.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh?.id == pointerInfo.pickInfo?.pickedMesh?.id) { if (this.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh?.id == pointerInfo.pickInfo?.pickedMesh?.id) {
this.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh = null; this.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh = null;
} else { } else {
this.gizmoManager.attachToMesh(pointerInfo.pickInfo.pickedMesh); const mesh = pointerInfo.pickInfo.pickedMesh;
this.gizmoManager.attachToMesh(mesh);
this.gizmoManager.gizmos.boundingBoxGizmo.onScaleBoxDragObservable.add(() => {
DiagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.MODIFY,
entity: MeshConverter.toDiagramEntity(mesh),
}
)
console.log(mesh.scaling);
});
} }
} }
@ -71,7 +81,7 @@ export class Bmenu {
case BmenuState.LABELING: case BmenuState.LABELING:
const mesh = pointerInfo.pickInfo.pickedMesh; const mesh = pointerInfo.pickInfo.pickedMesh;
console.log("labeling " + mesh.id); console.log("labeling " + mesh.id);
const myPlane = MeshBuilder.CreatePlane("myPlane", {width: 1, height: .125}, this.scene); /* const myPlane = MeshBuilder.CreatePlane("myPlane", {width: 1, height: .125}, this.scene);
//myPlane.parent=mesh; //myPlane.parent=mesh;
const pos = mesh.absolutePosition; const pos = mesh.absolutePosition;
pos.y += .2; pos.y += .2;
@ -88,16 +98,14 @@ export class Bmenu {
inputText.margin="0px"; inputText.margin="0px";
inputText.fontSize= "48px"; inputText.fontSize= "48px";
advancedTexture2.addControl(inputText); advancedTexture2.addControl(inputText);
*/
const textInput = document.createElement("input"); const textInput = document.createElement("input");
textInput.type = "text"; textInput.type = "text";
document.body.appendChild(textInput); document.body.appendChild(textInput);
textInput.value = ""; textInput.value = "";
inputText.focus();
textInput.focus(); textInput.focus();
textInput.addEventListener('input', (event)=> { textInput.addEventListener('input', (event)=> {
inputText.text = textInput.value;
console.log(event); console.log(event);
}); });
textInput.addEventListener('keydown', (event)=> { textInput.addEventListener('keydown', (event)=> {
@ -105,10 +113,8 @@ export class Bmenu {
if (event.key == "Enter") { if (event.key == "Enter") {
textInput.blur(); textInput.blur();
textInput.remove(); textInput.remove();
inputText.dispose();
} }
}); });
break; break;
} }

15
src/toolbox/toolbox.ts
View File

@ -86,7 +86,9 @@ export class Toolbox {
private calculatePosition(i: number) { private calculatePosition(i: number) {
return (i/this.gridsize)-.5-(1/this.gridsize/2); return (i/this.gridsize)-.5-(1/this.gridsize/2);
} }
private static WIDGET_SIZE = .1;
private buildColor(color: Color3) { private buildColor(color: Color3) {
const width = 1; const width = 1;
const depth = .2; const depth = .2;
const material = new StandardMaterial("material-" + color.toHexString(), this.scene); const material = new StandardMaterial("material-" + color.toHexString(), this.scene);
@ -102,7 +104,10 @@ export class Toolbox {
newItem.position = new Vector3(this.calculatePosition(++i), .1, 0); newItem.position = new Vector3(this.calculatePosition(++i), .1, 0);
} }
} }
const myPlane = MeshBuilder.CreatePlane("myPlane", {width: .1, height: .1}, this.scene); const myPlane = MeshBuilder
.CreatePlane("myPlane",
{width: Toolbox.WIDGET_SIZE,
height: Toolbox.WIDGET_SIZE}, this.scene);
myPlane.parent=mesh; myPlane.parent=mesh;
myPlane.position= new Vector3(this.calculatePosition(++i), .1, 0); myPlane.position= new Vector3(this.calculatePosition(++i), .1, 0);
@ -117,6 +122,9 @@ export class Toolbox {
material.name = "material-" + value.toHexString(); material.name = "material-" + value.toHexString();
mesh.id = "toolbox-color-" + value.toHexString(); mesh.id = "toolbox-color-" + value.toHexString();
mesh.name = "toolbox-color-" + value.toHexString(); mesh.name = "toolbox-color-" + value.toHexString();
console.log(mesh.getChildren( (node) => {
return (node?.parent?.id!="toolbox") &&
(node?.parent?.parent?.id != "toolbox")}));
}); });
advancedTexture2.addControl(colorPicker); advancedTexture2.addControl(colorPicker);
@ -164,7 +172,10 @@ export class Toolbox {
if (tool === ToolType.PLANE) { if (tool === ToolType.PLANE) {
newItem.material.backFaceCulling = false; newItem.material.backFaceCulling = false;
} }
newItem.scaling = new Vector3(0.1, 0.1, 0.1);
newItem.scaling = new Vector3(Toolbox.WIDGET_SIZE,
Toolbox.WIDGET_SIZE,
Toolbox.WIDGET_SIZE);
newItem.parent = parent; newItem.parent = parent;
if (!newItem.material) { if (!newItem.material) {
newItem.material = parent.material; newItem.material = parent.material;

11
src/util/DualshockEventMapper.ts
View File

@ -68,7 +68,16 @@ export class DualshockEventMapper {
case 15: case 15:
console.log('D-Pad Right'); console.log('D-Pad Right');
break; break;
case 10:
console.log('L3');
buttonEvent.objectName = "left-controller";
buttonEvent.buttonIndex = 0;
break;
case 11:
console.log('R3');
buttonEvent.objectName = "right-controller";
buttonEvent.buttonIndex = 0;
break;
default: default:
console.log(buttonid); console.log(buttonid);