#53 scene header

src/lib/Dashboard.js

@@ -6,6 +6,7 @@ import {
 import { Text } from "troika-three-text";
 import { EventManager } from "./EventManager";
 import Utils from "#/app/Utils";
+import { TextObject } from "@/components/InteractiveObjects/TextObject";
 class DashBoard extends EventManager {
 	#points = 0;
 	constructor(engine) {
@@ -20,7 +21,7 @@ class DashBoard extends EventManager {
 
 		const dash = new Group(), hud = new Group(), hudTarget = new Group();
 		hud.visible = false;
-		let hudAnimation, hudPlane, textPlane, startBtn;
+		let hudAnimation, hudPlane, textPlane, sceneHeader;
 		this.group = dash;
 		dash.add(hud);
 		hud.add(hudTarget)
@@ -54,7 +55,6 @@ class DashBoard extends EventManager {
 
 		this.ready = new Promise(async(resolve, reject)=>{
 			let map = await engine.loadTexture('/static/textures/hud.png', '');
-			let start = await engine.loadTexture('/static/textures/play.webp', '');
 			hudPlane = new Mesh(
 				new PlaneGeometry(dashWidth * 0.96, dashHeight * 0.9), 
 				new MeshBasicMaterial({
@@ -82,17 +82,8 @@ class DashBoard extends EventManager {
 			// fix #44
 			textPlane.material.depthTest = false;
 			//hudPlane.material.depthTest = false;
-			startBtn = new Mesh(
-				new SphereGeometry(dashWidth * 0.11), 
-				new MeshStandardMaterial({
-					color: 0xffffff,
-					roughnessMap: start,
-					metalness: 1
-				})
-			)
-			startBtn.visible = false;
-			startBtn.rotation.y = Math.PI/6;
-			dash.add(startBtn);
+			this.sceneHeader = sceneHeader = await new SceneHeader(engine, {dashWidth, dashHeight});
+			dash.add(sceneHeader.object);
 			resolve();
 		});
 
@@ -124,14 +115,9 @@ class DashBoard extends EventManager {
 			dash.translateZ(-0.75/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom);
 		})
 
-		this.initScene = function(startBtnCallback){
+		this.initScene = function(scene, startBtnCallback){
 			this.loading(0,0);
-			startBtn.visible = false;
-			engine.clickable.add(startBtn, ()=>{
-				startBtnCallback();
-				startBtn.visible = false;
-				engine.motionQueue.clear(startBtn)
-			});
+			sceneHeader.init(scene, startBtnCallback);
 		}
 
 		this.updateText = function(t, hideOnFinish = false, textScrolledCallback){
@@ -163,7 +149,7 @@ class DashBoard extends EventManager {
 				}else{
 					if (hideOnFinish){
 						await Utils.wait(10000);
-						this.updateText('')
+						if (text.text == t) this.updateText('')
 						textScrolledCallback?.(false)
 					}else{
 						textScrolledCallback?.(false)
@@ -287,12 +273,7 @@ class DashBoard extends EventManager {
 			loadingPlane.visible = progress > 0 && progress < 1;
 			loadingProgress.update(progress, tt)
 			if (progress == 1){
-				startBtn.visible = true;
-				engine.motionQueue.add(
-					{ o: startBtn, a:{
-						scale: (k,s)=>s.setScalar(1+0.05*Math.sin(4*k*Math.PI))
-					}, r: true, t: 3 },
-				)
+				sceneHeader.show();
 			}
 		}
 		this.loading(0,0);
@@ -345,4 +326,58 @@ class ProgressBar{
 	}
 }
 
+class SceneHeader{
+	constructor(engine, params){
+		return new Promise(async(resolve, reject)=>{
+			this.object = new Group();
+			let start = await engine.loadTexture('/static/textures/play.webp', '');
+			let startBtn = new Mesh(
+				new SphereGeometry(params.dashWidth * 0.11), 
+				new MeshStandardMaterial({
+					color: 0xffffff,
+					roughnessMap: start,
+					metalness: 1
+				})
+			)
+			startBtn.visible = false;
+			startBtn.position.y = 0.1 * params.dashHeight;
+			startBtn.rotation.y = Math.PI/6;
+
+			let title = await new TextObject(engine, {
+				position: [0, -0.22 * params.dashHeight,0], 
+				fontSize: 0.055 * params.dashHeight, color: 0xffffff, outlineColor: 0x373737, outlineWidth: '3%'
+			});
+			let description = await new TextObject(engine, {
+				position: [0, -0.25 * params.dashHeight,0], anchorY: 'top', lineHeight: 1.33, color: 0x0,
+				fontSize: 0.025 * params.dashHeight, outlineWidth: '11%', maxWidth: params.dashWidth * 0.8
+			});
+			
+			this.object.add(startBtn);
+			this.object.add(title.object);
+			this.object.add(description.object);
+
+			resolve(this);
+
+			this.init = function(scene, startBtnCallback){
+				[startBtn, title.object, description.object].forEach(o=>o.visible = false);
+				title.object.text = scene.data.title;
+				description.object.text = scene.data.description;
+				engine.clickable.add(startBtn, ()=>{
+					startBtnCallback();
+					[startBtn, title.object, description.object].forEach(o=>o.visible = false);
+					engine.motionQueue.clear(startBtn)
+				});
+			}
+			this.show = function(){
+				[startBtn, title.object, description.object].forEach(o=>o.visible = true);
+				engine.motionQueue.add(
+					{ o: startBtn, a:{
+						scale: (k,s)=>s.setScalar(1+0.05*Math.sin(4*k*Math.PI))
+					}, r: true, t: 3 },
+				)
+			}
+		})
+	}
+}
+
 export { DashBoard };

src/lib/GameEngine.js

@@ -55,7 +55,7 @@ class GameEngine extends THREE.EventDispatcher{
         hemiLight.position.set(0, 33, 0);
         scene.add( hemiLight );
 
-        const dirLight = new THREE.DirectionalLight(0xffffff, 4);
+        const dirLight = new THREE.DirectionalLight(0xffffff, 0.51);
         dirLight.color.setHSL(0.1, 1, 0.95);
         dirLight.position.set(12, 33, -37);
         // dirLight.position.multiplyScalar( 0.20 );

src/lib/MeshUtils.js

@@ -2,7 +2,10 @@ import { TextureLoader, Box3, Vector3, Group } from "three";
 
 function assignParams(mesh, params){
     ['scale', 'rotation', 'position'].forEach(p=>params[p] && mesh[p].fromArray(params[p]));
-    ['visible', 'name', 'fontSize', 'color', 'lineHeight', 'maxWidth', 'anchorX', 'anchorY'].forEach(p=>{
+    [
+        'visible', 'name', 'fontSize', 'color', 'lineHeight', 
+        'maxWidth', 'anchorX', 'anchorY', 'outlineColor', 'outlineWidth', 'textAlign'
+    ].forEach(p=>{
         if (params[p]!==undefined) mesh[p] = params[p];
     });
 }