dash hud tint

src/lib/Dashboard.js

@@ -2,7 +2,8 @@ import {
 	PlaneGeometry, CylinderGeometry, CanvasTexture, Group, 
 	Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide 
 } from "three";
-import Utils from "./Utils";
+
+import { Text } from "troika-three-text";
 class DashBoard {
 	constructor(engine) {
 		let svg = p=>`<?xml version="1.0" encoding="UTF-8"?>
@@ -58,25 +59,53 @@ class DashBoard {
 					transparent:true
 				})
 			);
-			hudPlane.position.z = -0.25;
-
+			hudPlane.position.z = -0.22;
+			hudPlane.position.y = -0.05
 			hud.add(hudPlane)
 		})()
 
+		const text = new Text()
+		Object.assign(text, {
+			text:``, 
+			fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8,
+			textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
+			anchorX: 'center', anchorY: 0.05, depthOffset: 0.1, color: 0x000000,
+			clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0]
+		})
+		text.sync();
+		text.position.y = -0.33;
+		dash.add(text);
+
 		engine.addEventListener('beforeRender', ()=>{
 			dash.quaternion.copy(engine.camera.quaternion)
 			dash.position.copy(engine.camera.position)
 			dash.translateZ(-1.2 * engine.camera.zoom);
 		})
 
-		this.update = function(p = {}){
-			Object.assign(params, p);
-			if (updating) return false;
-			updating = true;
-			canvas.width = engine.w;
-			canvas.height = engine.h;
-			url = URL.createObjectURL(new Blob([svg(params)],{ type:"image/svg+xml;charset=utf-8" }));
-			img.src = url;
+		this.updateText = function(t, textScrolledCallback){
+			engine.motionQueue.clear(text);
+			text.text = t;
+			text.anchorY = 0.05;
+			text.sync(()=>{
+				let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1];
+				if (dh > 0){
+					let updateFn = ()=>{
+						//text.sync();
+						if (text.textRenderInfo.blockBounds[1]> text.clipRect[1] * 1.33 ){
+							textScrolledCallback?.(true);
+							textScrolledCallback = null;
+						}
+					}
+					engine.motionQueue.add({
+						o: text,
+						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.05 },
+						t: dh*177,
+						u: updateFn
+					})
+				}else{
+					textScrolledCallback?.(false)
+				}
+			})
 		}
 
 		this.createProgressBar = function(){
@@ -115,22 +144,23 @@ class DashBoard {
 
 		this.reset = ()=>{
 			this.updateProgress(0);
-			this.update({
-				hint: ''
-			});
+			this.updateText('');
 		}
 
-		this.attach = (object, dashPlacement, rotate)=>{
+		this.attach = (object, dashPlacement, rotate = false, plane = false)=>{
 			hud.visible = true;
-			hudPlane.scale.set(0, .1, 1);
-			hudPlane.material.opacity = 0.5;
-			engine.motionQueue.add([{
-				o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8
-			},{
-				o:hudPlane, a:{scale:{x:1}}, t:.4
-			},{
-				o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4,
-			}])
+			hudPlane.visible = plane;
+			if (plane){
+				hudPlane.scale.set(0, .1, 1);
+				hudPlane.material.opacity = 0.5;
+				engine.motionQueue.add([{
+					o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8
+				},{
+					o:hudPlane, a:{scale:{x:1}}, t:.4
+				},{
+					o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4,
+				}])
+			}
 			if (occupied) return false;
 			object._hud = {
 				parent: object.parent,
@@ -143,14 +173,17 @@ class DashBoard {
 			hudTarget.attach(object);
 			occupied = true;
 
-			engine.motionQueue.add({
-				o: object,
-				a: dashPlacement || { 
-					quaternion: { x:0, y:0, z:0, w:0 },
-					position: { x:0, y:0, z:0 },
-					scale: { x: 1, y:1, z:1 }
-				},
-				t: 1
+			let result = new Promise((resolve, reject)=>{
+				engine.motionQueue.add({
+					o: object,
+					a: dashPlacement || { 
+						quaternion: { x:0, y:0, z:0, w:0 },
+						position: { x:0, y:0, z:0 },
+						scale: { x: 1, y:1, z:1 }
+					},
+					t: 1,
+					f: resolve
+				})
 			})
 
 			if (rotate){
@@ -164,6 +197,7 @@ class DashBoard {
 					d: 1
 				})
 			}
+			return result;
 		}
 
 		this.detach = object=>{
@@ -182,7 +216,6 @@ class DashBoard {
 		}
 
 		this.createProgressBar();
-		this.update();
 	}
 
 	get active(){