dashboard and progressbar

src/lib/GameEngine.js

@@ -1,11 +1,8 @@
 import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/Addons.js';
-import { DRACOLoader } from 'three/examples/jsm/Addons.js';
-import { OrbitControls } from 'three/examples/jsm/Addons.js';
+import { GLTFLoader, DRACOLoader, OrbitControls } from 'three/examples/jsm/Addons.js';
 //import { Controller as OrbitControls } from './3rd-party/phy/3TH/Controller.js';
 import { ViewportGizmo } from "three-viewport-gizmo";
 import Stats from 'three/examples/jsm/libs/stats.module';
-//import { AnaglyphEffect } from './three/AnaglyphEffect';
 import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
 import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
 import { MapControls } from 'three/addons/controls/MapControls.js';
@@ -25,7 +22,7 @@ class GameEngine extends THREE.EventDispatcher{
         this.opts = opts;
         const gameEngine = this;
 
-        this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 250);
+        this.perspectiveCamera = new THREE.PerspectiveCamera(45, this.aspect, 0.01, 200);
         this.raycaster = new THREE.Raycaster();
         this.perspectiveCamera.position.set(0, 0, 10);
 
@@ -99,7 +96,7 @@ class GameEngine extends THREE.EventDispatcher{
         this.stereo = new StereoEffect(renderer);
         this.stereo.setSize(this.w, this.h);
 
-        const dashboard = new DashBoard(renderer, this.w, this.h);
+        const dashboard = new DashBoard(this);
         this.dashboard = dashboard;
 
         this.activeObjects = new THREE.Group();
@@ -132,13 +129,16 @@ class GameEngine extends THREE.EventDispatcher{
             gameEngine.hero?.update();
             gameEngine.mixers.forEach(m => m.update(delta));
             gameEngine.handleXrAction(gameEngine, delta)
+
+            gameEngine.dispatchEvent({type: 'beforeRender'})
+
             gameEngine.render(scene, gameEngine.camera);
             if (!renderer.xr.isPresenting) {
                 gameEngine.gizmo?.render();
             }
-            renderer.autoClear = false;
-            dashboard.render();
-            renderer.autoClear = true;
+            // renderer.autoClear = false;
+            // dashboard.render();
+            // renderer.autoClear = true;
         }
         renderer.setAnimationLoop(animate);