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

Fixed up persistenceManager.ts and created mesh converter.

Browse Source
This commit is contained in:
Michael Mainguy 2023-07-19 16:36:31 -05:00
parent d32995c999
commit 745aed33af
6 changed files with 201 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/controllers/left.ts
View File

@ -50,7 +50,7 @@ export class Left extends Base {
Base.stickVector.x = 0;
}
if (Math.abs(value.y) > .1) {
Controllers.controllerObserver.notifyObservers({type: 'updown', value: value.y * this.speedFactor});
Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: value.y * this.speedFactor});
Base.stickVector.y = 1;
} else {
Base.stickVector.y = 0;
@ -58,7 +58,7 @@ export class Left extends Base {
if (Base.stickVector.equals(Vector3.Zero())) {
Controllers.controllerObserver.notifyObservers({type: 'leftright', value: 0});
Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
} else {
}

6
src/controllers/right.ts
View File

@ -103,14 +103,14 @@ export class Right extends Base {
Controllers.controllerObserver.notifyObservers({type: 'turn', value: 0});
}
if (Math.abs(value.y) > .1) {
Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: value.y * this.speedFactor});
Controllers.controllerObserver.notifyObservers({type: 'updown', value: value.y * this.speedFactor});
Base.stickVector.z = 1;
} else {
Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
Base.stickVector.z = 0;
}
if (Base.stickVector.equals(Vector3.Zero())) {
Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
}
}

128
src/diagram/diagramManager.ts
View File

@ -1,8 +1,6 @@
import {
AbstractMesh,
Color3, DynamicTexture,
Mesh,
MeshBuilder,
Color3,
Observable,
Scene,
StandardMaterial,
@ -10,10 +8,12 @@ import {
} from "@babylonjs/core";
import {v4 as uuidv4} from 'uuid';
import {DiagramEntity, DiagramEvent, DiagramEventType} from "./diagramEntity";
import {PersistenceManager} from "./persistenceManager";
import {IPersistenceManager} from "./persistenceManager";
import {IndexdbPersistenceManager} from "./indexdbPersistenceManager";
import {MeshConverter} from "./meshConverter";
export class DiagramManager {
private persistenceManager: PersistenceManager = new PersistenceManager();
private persistenceManager: IPersistenceManager = new IndexdbPersistenceManager("diagram");
static onDiagramEventObservable = new Observable();
private readonly scene: Scene;
private xr: WebXRExperienceHelper;
@ -48,12 +48,8 @@ export class DiagramManager {
#onDiagramEvent(event: DiagramEvent) {
const entity = event.entity;
let mesh;
let material
if (entity) {
mesh = this.scene.getMeshByName(entity.id);
if (mesh) {
material = mesh.material;
}
}
switch (event.type) {
@ -67,18 +63,17 @@ export class DiagramManager {
break;
case DiagramEventType.DROP:
if (DiagramManager.currentMesh) {
this.persistenceManager.add(DiagramManager.currentMesh);
const newName = uuidv4();
const newMesh = DiagramManager.currentMesh.clone("id" + newName, DiagramManager.currentMesh.parent);
newMesh.id = "id" + newName;
newMesh.material = DiagramManager.currentMesh.material.clone("material" + newName);
DiagramManager.currentMesh.setParent(null);
//DiagramManager.currentMesh.billboardMode = Mesh.BILLBOARDMODE_Y;
DiagramManager.currentMesh = newMesh;
this.persistenceManager.add(DiagramManager.currentMesh);
DiagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.DROPPED,
entity: entity
entity: MeshConverter.toDiagramEntity(DiagramManager.currentMesh)
});
DiagramManager.currentMesh = newMesh;
}
break;
case DiagramEventType.ADD:
@ -89,12 +84,6 @@ export class DiagramManager {
return;
} else {
mesh = this.#createMesh(entity);
if (!material) {
}
if (!mesh) {
return;
}
}
DiagramManager.currentMesh = mesh;
break;
@ -102,17 +91,7 @@ export class DiagramManager {
if (!mesh) {
} else {
if (!material) {
}
mesh.material = material;
mesh.position = entity.position;
mesh.rotation = entity.rotation;
if (entity.parent) {
mesh.parent = this.scene.getMeshByName(entity.parent);
} else {
}
}
DiagramManager.currentMesh = mesh;
break;
@ -120,94 +99,7 @@ export class DiagramManager {
break;
}
}
#createMesh(entity: DiagramEntity) {
if (!entity.id) {
entity.id = "id" + uuidv4();
}
let mesh: Mesh;
switch (entity.template) {
case "#plane-template":
case "#text-template":
const material = new StandardMaterial("material-" + entity.id, this.scene);
material.backFaceCulling = false;
const font_size = 48;
const font = "bold 48px roboto";
const planeHeight=1;
const DTHeight = 1.5*font_size;
const ratio = planeHeight / DTHeight;
const text = 'This is some text to put on a plane';
const tempText = new DynamicTexture("dynamic texture", 64, this.scene);
const tempContext = tempText.getContext();
tempContext.font = font;
const DTWidth = tempContext.measureText(text).width;
const planeWidth = DTWidth * ratio;
const myDynamicTexture = new DynamicTexture("dynamic texture",
{width: DTWidth, height: DTHeight},
this.scene, false);
mesh= MeshBuilder.CreatePlane(entity.id, {
width: planeWidth,
height: planeHeight
}, this.scene);
myDynamicTexture.drawText('This is some short text',
null, null,
font, "#000000", "#FFFFFF",
true, true);
material.diffuseTexture = myDynamicTexture;
mesh.material = material;
break;
case "#box-template":
mesh = MeshBuilder.CreateBox(entity.id,
{
width: 1,
height: 1,
depth: 1
}, this.scene);
break;
case "#sphere-template":
mesh = MeshBuilder.CreateSphere(entity.id, {diameter: 1}, this.scene);
break
case "#cylinder-template":
mesh = MeshBuilder.CreateCylinder(entity.id, {
diameter: 1,
height: 1
}, this.scene);
break;
default:
mesh = null;
}
if (mesh) {
mesh.metadata = {template: entity.template};
if (entity.text) {
mesh.metadata.text = entity.text;
}
if (entity.position) {
mesh.position = entity.position;
}
if (entity.rotation) {
mesh.rotation = entity.rotation;
}
if (entity.parent) {
mesh.parent = this.scene.getMeshByName(entity.parent);
}
if (entity.scale) {
mesh.scaling = entity.scale;
}
if (!mesh.material) {
const material = new StandardMaterial("material-" + entity.id, this.scene);
material.diffuseColor = Color3.FromHexString(entity.color);
mesh.material = material;
}
}
return mesh;
return MeshConverter.fromDiagramEntity(entity, this.scene);
}
}

58
src/diagram/indexdbPersistenceManager.ts Normal file
View File

@ -0,0 +1,58 @@
import {IPersistenceManager} from "./persistenceManager";
import {AbstractMesh, Observable, Vector3} from "@babylonjs/core";
import {DiagramEntity} from "./diagramEntity";
import Dexie from "dexie";
import {MeshConverter} from "./meshConverter";
export class IndexdbPersistenceManager implements IPersistenceManager {
public updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>();
private db: Dexie;
constructor(name: string) {
this.db = new Dexie(name);
this.db.version(1).stores({entities: "id,position,rotation,last_seen,template,text,scale,color"});
}
public add(mesh: AbstractMesh) {
const entity = <any>MeshConverter.toDiagramEntity(mesh);
entity.position = this.vectoxys(mesh.position);
entity.rotation = this.vectoxys(mesh.rotation);
entity.scale = this.vectoxys(mesh.scaling);
this.db["entities"].add(entity);
}
private vectoxys(v: Vector3): {x, y ,z} {
return {x: v.x, y: v.y, z: v.z};
}
private xyztovec(xyz: {x, y, z}): Vector3 {
return new Vector3(xyz.x, xyz.y, xyz.z);
}
public remove() {
}
public modify() {
}
public initialize() {
this.db['entities'].each((e) => {
e.position = this.xyztovec(e.position);
e.rotation = this.xyztovec(e.rotation);
e.scale = this.xyztovec(e.scale);
console.log(e);
this.updateObserver.notifyObservers(e);
});
}
private dummyEntity(): DiagramEntity {
const entity: DiagramEntity = <DiagramEntity>{};
entity.id = "test";
entity.position = new Vector3(0,2,-5);
entity.rotation = Vector3.Zero();
entity.last_seen = new Date();
entity.scale = new Vector3(.1,.1,.1);
entity.color = "#ff0000";
entity.text = "test";
entity.parent = null;
entity.template = "#text-template";
return entity;
}
}

120
src/diagram/meshConverter.ts Normal file
View File

@ -0,0 +1,120 @@
import {DiagramEntity} from "./diagramEntity";
import {
AbstractMesh,
Color3,
DynamicTexture,
Mesh,
MeshBuilder,
Scene,
StandardMaterial
} from "@babylonjs/core";
import {v4 as uuidv4} from 'uuid';
export class MeshConverter {
public static toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
const entity = <DiagramEntity>{};
entity.id = mesh.id;
entity.position = mesh.position;
entity.rotation = mesh.rotation;
entity.last_seen = new Date();
entity.template = mesh?.metadata?.template;
entity.text = mesh?.metadata?.text;
entity.scale = mesh.scaling;
if (mesh.material) {
entity.color = (mesh.material as any).diffuseColor.toHexString();
}
return entity;
}
public static fromDiagramEntity(entity: DiagramEntity, scene: Scene): AbstractMesh {
if (!entity.id) {
entity.id = "id" + uuidv4();
}
let mesh: Mesh;
switch (entity.template) {
case "#plane-template":
case "#text-template":
const material = new StandardMaterial("material-" + entity.id, scene);
material.backFaceCulling = false;
const font_size = 48;
const font = "bold 48px roboto";
const planeHeight=1;
const DTHeight = 1.5*font_size;
const ratio = planeHeight / DTHeight;
const text = 'This is some text to put on a plane';
const tempText = new DynamicTexture("dynamic texture", 64, scene);
const tempContext = tempText.getContext();
tempContext.font = font;
const DTWidth = tempContext.measureText(text).width;
const planeWidth = DTWidth * ratio;
const myDynamicTexture = new DynamicTexture("dynamic texture",
{width: DTWidth, height: DTHeight},
scene, false);
mesh= MeshBuilder.CreatePlane(entity.id, {
width: planeWidth,
height: planeHeight
}, scene);
myDynamicTexture.drawText('This is some short text',
null, null,
font, "#000000", "#FFFFFF",
true, true);
material.diffuseTexture = myDynamicTexture;
mesh.material = material;
break;
case "#box-template":
mesh = MeshBuilder.CreateBox(entity.id,
{
width: 1,
height: 1,
depth: 1
}, scene);
break;
case "#sphere-template":
mesh = MeshBuilder.CreateSphere(entity.id, {diameter: 1}, scene);
break
case "#cylinder-template":
mesh = MeshBuilder.CreateCylinder(entity.id, {
diameter: 1,
height: 1
}, scene);
break;
default:
mesh = null;
}
if (mesh) {
mesh.metadata = {template: entity.template};
if (entity.text) {
mesh.metadata.text = entity.text;
}
if (entity.position) {
mesh.position = entity.position;
}
if (entity.rotation) {
mesh.rotation = entity.rotation;
}
if (entity.parent) {
mesh.parent = scene.getMeshByName(entity.parent);
}
if (entity.scale) {
mesh.scaling = entity.scale;
}
if (!mesh.material) {
const material = new StandardMaterial("material-" + entity.id, scene);
material.diffuseColor = Color3.FromHexString(entity.color);
mesh.material = material;
}
}
return mesh;
}
}

64
src/diagram/persistenceManager.ts
View File

@ -1,61 +1,11 @@
import {AbstractMesh, Observable, StandardMaterial, Vector3} from "@babylonjs/core";
import {AbstractMesh, Observable} from "@babylonjs/core";
import {DiagramEntity} from "./diagramEntity";
import Dexie from "dexie";
export class PersistenceManager {
public updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>();
private db: Dexie = new Dexie("diagram");
constructor() {
this.db.version(1).stores({entities: "id,position,rotation,last_seen,template,text,scale,color"});
}
public add(mesh: AbstractMesh) {
const entity = <any>{};
entity.id = mesh.id;
entity.position = this.vectoxys(mesh.position);
entity.rotation = this.vectoxys(mesh.rotation);
entity.last_seen = new Date().getDate();
entity.template = mesh?.metadata?.template;
entity.text = mesh?.metadata?.text;
entity.scale = this.vectoxys(mesh.scaling);
if (mesh.material) {
entity.color = (mesh.material as StandardMaterial).diffuseColor.toHexString();
}
this.db["entities"].add(entity);
}
private vectoxys(v: Vector3): {x, y ,z} {
return {x: v.x, y: v.y, z: v.z};
}
private xyztovec(xyz: {x, y, z}): Vector3 {
return new Vector3(xyz.x, xyz.y, xyz.z);
}
export interface IPersistenceManager {
add(mesh: AbstractMesh);
remove(mesh: AbstractMesh);
modify(mesh: AbstractMesh);
initialize();
updateObserver: Observable<DiagramEntity>;
public remove() {
}
public modify() {
}
public initialize() {
this.db['entities'].each((e: DiagramEntity) => {
e.position = this.xyztovec(e.position);
e.rotation = this.xyztovec(e.rotation);
e.scale = this.xyztovec(e.scale);
console.log(e);
this.updateObserver.notifyObservers(e);
});
}
private dummyEntity(): DiagramEntity {
const entity: DiagramEntity = <DiagramEntity>{};
entity.id = "test";
entity.position = new Vector3(0,2,-5);
entity.rotation = Vector3.Zero();
entity.last_seen = new Date();
entity.scale = new Vector3(.1,.1,.1);
entity.color = "#ff0000";
entity.text = "test";
entity.parent = null;
entity.template = "#text-template";
return entity;
}
}