hud observation for generic game objects

src/lib/Dashboard.js

@@ -1,4 +1,7 @@
-import { PlaneGeometry, CylinderGeometry, CanvasTexture, Group, Mesh, MeshStandardMaterial, DoubleSide } from "three";
+import { 
+	PlaneGeometry, CylinderGeometry, CanvasTexture, Group, 
+	Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide 
+} from "three";
 import Utils from "./Utils";
 class DashBoard {
 	constructor(engine) {
@@ -20,6 +23,7 @@ class DashBoard {
 		let texture = new CanvasTexture(canvas)
 		let updating = false;
 		let params = {}
+		let occupied = false;
 		
 		img.addEventListener('load', function () {
 			ctx.drawImage(img, 0, 0, engine.w, engine.h); 
@@ -28,18 +32,36 @@ class DashBoard {
 			updating = false;
 		})
 
-		const dash = new Group();
+		const dash = new Group(), hud = new Group(), hudTarget = new Group();
+		hud.visible = false;
+		let hudAnimation, hudPlane;
 		this.group = dash;
+		dash.add(hud);
+		hud.add(hudTarget)
 		dash.visible = false;
 
 		const dashGeometry = new PlaneGeometry(engine.aspect, 1);
-		const dashMesh = new Mesh(dashGeometry, new MeshStandardMaterial({
-			roughness: 0, metalness:0.1, transparent: true,
+		const dashMesh = new Mesh(dashGeometry, new MeshBasicMaterial({
+			transparent: true,
 			map: texture
 		}))
 
 		dash.add(dashMesh);
-		engine.scene.add(dash)
+		engine.scene.add(dash);
+
+		(async()=>{
+			hudPlane = new Mesh(
+				new PlaneGeometry(engine.aspect, 1), 
+				new MeshBasicMaterial({
+					map: await engine.loadTexture('/static/textures/hud.png', ''),
+					opacity: 0.37,
+					transparent:true
+				})
+			);
+			hudPlane.position.z = -0.25;
+
+			hud.add(hudPlane)
+		})()
 
 		engine.addEventListener('beforeRender', ()=>{
 			dash.quaternion.copy(engine.camera.quaternion)
@@ -98,6 +120,67 @@ class DashBoard {
 			});
 		}
 
+		this.attach = (object, dashPlacement, rotate)=>{
+			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,
+			}])
+			if (occupied) return false;
+			object._hud = {
+				parent: object.parent,
+				placement: {
+					position: object.position.clone(),
+					quaternion: object.quaternion.clone(),
+					scale: object.scale.clone()
+				}
+			}
+			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
+			})
+
+			if (rotate){
+				engine.motionQueue.add(hudAnimation = {
+					o: hudTarget,
+					a: { 
+						rotation: { y: 2*Math.PI }
+					},
+					t: 4,
+					r: true,
+					d: 1
+				})
+			}
+		}
+
+		this.detach = object=>{
+			engine.motionQueue.remove(hudAnimation);
+			object._hud.parent.attach(object);
+			hud.rotation.y = 0;
+			hud.visible = false;
+			engine.motionQueue.add({
+				o: object,
+				a: object._hud.placement,
+				t: 1
+			});
+			delete object._hud;
+			occupied = false;
+			hudAnimation = null;
+		}
+
 		this.createProgressBar();
 		this.update();
 	}