video player as interactive object + move to HUD

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);