diff --git a/src/components/ConsoleHeader.vue b/src/components/ConsoleHeader.vue
index da82e44..c74c9be 100644
--- a/src/components/ConsoleHeader.vue
+++ b/src/components/ConsoleHeader.vue
@@ -6,7 +6,9 @@
- {{ l.workshop }}
+
+ {{ l.workshop }}
+
diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js
index 5adbd0e..98ed47e 100644
--- a/src/lib/Dashboard.js
+++ b/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 };
\ No newline at end of file
diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js
index 9db72dd..80dbd63 100644
--- a/src/lib/GameEngine.js
+++ b/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 );
diff --git a/src/lib/MeshUtils.js b/src/lib/MeshUtils.js
index dc6bee9..94be714 100644
--- a/src/lib/MeshUtils.js
+++ b/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];
});
}
diff --git a/src/mixins/GameEnvironmentMixin.js b/src/mixins/GameEnvironmentMixin.js
index 16a5d35..c54b5c5 100644
--- a/src/mixins/GameEnvironmentMixin.js
+++ b/src/mixins/GameEnvironmentMixin.js
@@ -126,7 +126,7 @@ export default {
gameEngine.clearScene();
gameEngine.activeObjects.visible = false;
await gameEngine.dashboard.ready;
- gameEngine.dashboard?.initScene(async ()=>{
+ gameEngine.dashboard?.initScene(scene, async ()=>{
if (this.scene.data.$audio){
await gameEngine.playAmbientSound(this.scene.data.$audio.asset.name);
gameEngine.ambientSound.setVolume( 0.5 );
@@ -305,7 +305,6 @@ export default {
},
async fullScreen(){
- console.log(gameEngine.renderer.domElement);
await gameEngine.renderer.domElement.requestFullscreen()
}
}