change event dispatcher

src/lib/Dashboard.js

@@ -53,11 +53,13 @@ class DashBoard {
 
 		const loadingPlane = new Mesh(
 			new PlaneGeometry(engine.aspect, 1), 
-			new MeshBasicMaterial({
-				color:0xFAFAFA,
+			new MeshStandardMaterial({
+				color:0xffffff,
+				opacity:0, transparent:true,
+				roughness:0, metalness:0.1
 			})
 		);
-		const loadingProgress = new ProgressBar();
+		const loadingProgress = new ProgressBar(engine);
 		loadingProgress.object.scale.set(engine.aspect*0.8, 0.05, 0.05)
 		loadingProgress.object.position.set(-engine.aspect/2 + engine.aspect*0.1, 0, 0.1)
 		loadingPlane.add(loadingProgress.object);
@@ -135,7 +137,7 @@ class DashBoard {
 			})
 		}
 
-		levelProgress = new ProgressBar({})
+		levelProgress = new ProgressBar(engine)
 		dash.add(levelProgress.object);
 		levelProgress.object.position.set(-engine.aspect/2 + engine.aspect/30, 0.45, -0.01)
 		levelProgress.object.scale.set(engine.aspect/3, 0.02, 0.02)
@@ -230,11 +232,11 @@ class DashBoard {
 			hudAnimation = null;
 		}
 
-		this.loading = function(progress){
+		this.loading = function(progress, tt){
 			loadingPlane.visible = progress > 0 && progress < 1;
-			loadingProgress.update(progress)
+			loadingProgress.update(progress, tt)
 		}
-		this.loading(1);
+		this.loading(0,0);
 	}
 
 	get active(){
@@ -247,7 +249,7 @@ class DashBoard {
 }
 
 class ProgressBar{
-	constructor(params = {}){
+	constructor(engine, params = {}){
 		this.object = new Group();
 		const geometry = new CylinderGeometry( 0.5, 0.5, 1, 3, 1, false, 0, Math.PI ); 
 		const staticCylinder = new Mesh( geometry, new MeshStandardMaterial({
@@ -263,10 +265,17 @@ class ProgressBar{
 		progressCylinder.rotation.set(Math.PI/2, 0, Math.PI/2,)
 		this.object.add( progressCylinder );
 
-		this.update = function(value){
+		this.update = function(value, transitionTime = 0.5){
 			progressCylinder.visible = !!value;
-			progressCylinder.scale.y = value;
-			progressCylinder.position.x = progressCylinder.scale.y / 2
+			engine.motionQueue.clear(progressCylinder);
+			engine.motionQueue.add({
+				o: progressCylinder,
+				a: {
+					scale: {y: value},
+					position: {x: value / 2}
+				},
+				t: transitionTime
+			})
 		}
 		
 		this.update(0)

src/lib/GameEngine.js

@@ -99,12 +99,12 @@ class GameEngine extends THREE.EventDispatcher{
         this.stereo = new StereoEffect(renderer);
         this.stereo.setSize(this.w, this.h);
 
-        const dashboard = new DashBoard(this);
-        this.dashboard = dashboard;
-
         this.motionQueue = new MotionEngine();
         this.assetPath = assetPath;
 
+        const dashboard = new DashBoard(this);
+        this.dashboard = dashboard;
+
         this.activeObjects = new THREE.Group();
         scene.add(this.activeObjects);