imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

#53 scene header

Browse Source
This commit is contained in:
goynov
2026-02-06 14:20:56 +02:00
parent c4ace1f779
commit 3e9524b4b2
5 changed files with 71 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConsoleHeader.vue
+3 -1
View File
@@ -6,7 +6,9 @@
<v-img src="/logo.webp" alt="ProNature Logo"></v-img>
</v-avatar>
</template>
<v-app-bar-title>{{ l.workshop }}</v-app-bar-title>
<v-app-bar-title>
{{ l.workshop }}
</v-app-bar-title>
<v-btn to="/" icon="mdi-seesaw" v-tooltip="l.playground"></v-btn>
<v-menu>
<template v-slot:activator="{ props }">
src/lib/Dashboard.js
+62 -27
View File
@@ -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
+1 -1
View File
@@ -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
+4 -1
View File
@@ -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];
});
}
src/mixins/GameEnvironmentMixin.js
+1 -2
View File
@@ -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()
}
}