diff --git a/src/controllers/rigplatform.ts b/src/controllers/rigplatform.ts index d4e74c2..7b011ec 100644 --- a/src/controllers/rigplatform.ts +++ b/src/controllers/rigplatform.ts @@ -173,7 +173,7 @@ export class Rigplatform { } break; case LEFT: - if (this.leftController) { + if (!this.leftController) { this.leftController = new Left(source, this.xr, this.diagramManager); } break; diff --git a/src/diagram/diagramManager.ts b/src/diagram/diagramManager.ts index 7506a2d..3543e56 100644 --- a/src/diagram/diagramManager.ts +++ b/src/diagram/diagramManager.ts @@ -40,6 +40,14 @@ export class DiagramManager { } }); document.addEventListener('uploadImage', (event: CustomEvent) => { + let position = {x: 0, y: 1.6, z: 0}; + if (event.detail.position) { + position = { + x: event.detail.position.x, + y: event.detail.position.y, + z: event.detail.position.z + } + } const diagramEntity: DiagramEntity = { template: '#image-template', image: event.detail.data, diff --git a/src/objects/spinner.ts b/src/objects/spinner.ts index 53f4456..ab1d62e 100644 --- a/src/objects/spinner.ts +++ b/src/objects/spinner.ts @@ -8,7 +8,8 @@ import { Scene, SphereParticleEmitter, StandardMaterial, - Texture + Texture, + Vector3 } from "@babylonjs/core"; import {DefaultScene} from "../defaultScene"; @@ -22,7 +23,13 @@ export class Spinner { this.build(); } + public get position(): Vector3 { + return this.spinner.position; + } public show() { + if (!this.spinner || !this.particleSystem) { + this.build(); + } this.spinner.setEnabled(true); this.particleSystem.start(); } @@ -30,10 +37,18 @@ export class Spinner { public hide() { this.spinner.setEnabled(false); this.particleSystem.stop(true); + this.spinner.dispose(); + this.particleSystem.dispose(); + this.spinner = null; + this.particleSystem = null; } private build() { - const spinner: AbstractMesh = MeshBuilder.CreateSphere("spinner", {diameter: 2}, this._scene); + const camera = this._scene.activeCamera; + if (!camera) { + return; + } + const spinner: AbstractMesh = MeshBuilder.CreateSphere("spinner", {diameter: .5}, this._scene); const material = new StandardMaterial("spinner", this._scene); const text = new DynamicTexture("spinner", {width: 1024, height: 1024}, this._scene, false); text.drawText("Please Wait", 250, 500, "bold 150px Segoe UI", "white", "transparent", true, true); @@ -59,14 +74,14 @@ export class Spinner { spinner.material = material; let particleSystem; if (GPUParticleSystem.IsSupported) { - particleSystem = new GPUParticleSystem("particles", {capacity: 100000}, this._scene); - particleSystem.activeParticleCount = 2048; + particleSystem = new GPUParticleSystem("particles", {capacity: 1024}, this._scene); + particleSystem.activeParticleCount = 512; } else { - particleSystem = new ParticleSystem("particles", 2048, this._scene); + particleSystem = new ParticleSystem("particles", 512, this._scene); } - particleSystem.emitRate = 10; - const emitter = new SphereParticleEmitter(.9); - emitter.radiusRange = .2; + particleSystem.emitRate = 512; + const emitter = new SphereParticleEmitter(.2); + emitter.radiusRange = .1; particleSystem.particleEmitterType = emitter; particleSystem.particleTexture = new Texture("/assets/textures/flare.png", this._scene); @@ -81,8 +96,9 @@ export class Spinner { particleSystem.maxSize = 0.05; particleSystem.emitter = spinner; particleSystem.parent = spinner; - spinner.position.y = 1; - spinner.position.z = 6; + + const ray = camera.position.add(camera.getForwardRay(1).direction.scale(2)); + spinner.position = ray; this.spinner = spinner; this.spinner.setEnabled(false); diff --git a/src/react/functions/uploadImage.ts b/src/react/functions/uploadImage.ts index 195490a..21e6702 100644 --- a/src/react/functions/uploadImage.ts +++ b/src/react/functions/uploadImage.ts @@ -1,5 +1,8 @@ -const uploadImage = async (evt) => { +import {Spinner} from "../../objects/spinner"; +const uploadImage = async (evt) => { + const spinner = new Spinner(); + spinner.show(); const file = (evt.target as HTMLInputElement).files[0]; if (!file) { console.log('no file selected'); @@ -30,17 +33,21 @@ const uploadImage = async (evt) => { const uploadEvent = new CustomEvent('uploadImage', { detail: { name: file.name, - data: variant + data: variant, + position: spinner.position.clone() } }); document.dispatchEvent(uploadEvent); evt.target.remove(); + console.log(variant); } } } } catch (err) { console.error(err); + } finally { + spinner.hide(); } } export {uploadImage}; \ No newline at end of file diff --git a/src/vrApp.ts b/src/vrApp.ts index 0219ac3..b33137c 100644 --- a/src/vrApp.ts +++ b/src/vrApp.ts @@ -1,5 +1,5 @@ import {Color3, Engine, FreeCamera, Scene, Vector3, WebGPUEngine} from "@babylonjs/core"; -//import '@babylonjs/loaders'; +import '@babylonjs/loaders'; import {DiagramManager} from "./diagram/diagramManager"; import log, {Logger} from "loglevel"; import {GamepadManager} from "./controllers/gamepadManager"; @@ -74,7 +74,16 @@ export class VrApp { }); */ + /* + const chair = new GaussianSplattingMesh('chair', null, scene); + const m = await chair.loadFileAsync('https://models.deepdiagram.com/drill1.ply'); + chair.position.y = 1.6; + chair.rotation.y = Math.PI; + chair.scaling = chair.scaling.scale(3); + chair.showBoundingBox = true; + + */ const el = document.querySelector('#download'); if (el) { el.addEventListener('click', () => {