video player as interactive object + move to HUD

src/lib/Dashboard.js

@@ -29,6 +29,8 @@ class DashBoard {
 		})
 
 		const dash = new Group();
+		this.group = dash;
+		dash.visible = false;
 
 		const dashGeometry = new PlaneGeometry(engine.aspect, 1);
 		const dashMesh = new Mesh(dashGeometry, new MeshStandardMaterial({
@@ -81,9 +83,25 @@ class DashBoard {
 			progressCylinder.position.x = padLeft - engine.aspect/2 + progressCylinder.scale.y/2
 		}
 
+		this.enable = ()=>{
+			dash.visible = true;
+		}
+
+		this.disable = ()=>{
+			dash.visible = false;
+		}
+
 		this.createProgressBar();
 		this.update();
 	}
+
+	get active(){
+		return this.group.visible;
+	}
+
+	set active(v){
+		this.group.visible = v;
+	}
 }
 
 export { DashBoard };

src/lib/GameEngine.js

@@ -14,6 +14,7 @@ import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFa
 import { Physics } from './Physics.js';
 import { Clickable } from './Clickable.js';
 import { DashBoard } from './Dashboard.js';
+import { MotionEngine } from './MotionEngine.js';
 
 class GameEngine extends THREE.EventDispatcher{
     async init(domNode, opts = {}) {
@@ -99,6 +100,8 @@ class GameEngine extends THREE.EventDispatcher{
         const dashboard = new DashBoard(this);
         this.dashboard = dashboard;
 
+        this.motionQueue = new MotionEngine();
+
         this.activeObjects = new THREE.Group();
         scene.add(this.activeObjects);
 
@@ -129,8 +132,8 @@ class GameEngine extends THREE.EventDispatcher{
             gameEngine.hero?.update();
             gameEngine.mixers.forEach(m => m.update(delta));
             gameEngine.handleXrAction(gameEngine, delta)
-
             gameEngine.dispatchEvent({type: 'beforeRender'})
+            this.motionQueue.update();
 
             gameEngine.render(scene, gameEngine.camera);
             if (!renderer.xr.isPresenting) {
@@ -140,7 +143,7 @@ class GameEngine extends THREE.EventDispatcher{
             // dashboard.render();
             // renderer.autoClear = true;
         }
-        renderer.setAnimationLoop(animate);
+        renderer.setAnimationLoop(animate.bind(this));
 
         const mixer = new THREE.AnimationMixer(this.scene);
         const clock = new THREE.Clock();
@@ -162,7 +165,7 @@ class GameEngine extends THREE.EventDispatcher{
         // scene.background = bck; //new THREE.Color(0.7,0.7,0.7);
         scene.environment = texture;
         scene.background = new THREE.Color(1, 1, 1);
-        console.log('GameEngine started')
+        //console.log('GameEngine started')
         renderer.domElement.addEventListener('wheel', (event) => {
             gameEngine.camera.zoom -= event.deltaY / 1000;
             gameEngine.camera.zoom = Math.max(gameEngine.camera.zoom, .4);