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

dash hud tint

Browse Source
This commit is contained in:
goynov
2025-11-07 18:08:09 +02:00
parent 48c7ea2e2a
commit 87a8e07aa3
6 changed files with 89 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InteractiveObjects/GenenricObject.js
+8 -6
View File
@@ -7,11 +7,9 @@ class GenericObject{
this.object = this.source.scene; this.object = this.source.scene;
if (!data.exclude){ if (!data.exclude){
engine.clickable.add(this.object, e=>{ engine.clickable.add(this.object, async e=>{
this.object._active = !this.object._active;
if (engine.dashboard){ if (engine.dashboard){
if (data.description){
engine.dashboard.update({ hint: data.description })
}
if (data.hud){ if (data.hud){
if (this.object._hud ){ if (this.object._hud ){
engine.dashboard.detach(this.object); engine.dashboard.detach(this.object);
@@ -29,10 +27,14 @@ class GenericObject{
z: scale*this.object.scale.z z: scale*this.object.scale.z
} }
} }
await engine.dashboard.attach(this.object, placement, true, true);
engine.dashboard.attach(this.object, placement, true);
} }
} }
if (data.description){
engine.dashboard.updateText(this.object._active ? data.description : '', (d)=>{
console.log('DONETEXT', d)
})
}
} }
}); });
} }
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js
+1 -3
View File
@@ -63,9 +63,7 @@ class MazeQuizGame {
} }
} }
if (ud.qid !== undefined && e.started){ if (ud.qid !== undefined && e.started){
engine.dashboard.update({ engine.dashboard.updateText(ud.question.q)
hint: ud.question.q
})
engine.dashboard.updateProgress(ud.qid / questions.length) engine.dashboard.updateProgress(ud.qid / questions.length)
} }
//console.log(e, ud, engine.hero?.animationsMap); //console.log(e, ud, engine.hero?.animationsMap);
src/lib/CharacterControls.js
+5 -2
View File
@@ -67,6 +67,9 @@ export class CharacterControls {
play = 'left' play = 'left'
} else if (!this.currentAction.startsWith('idle')){ } else if (!this.currentAction.startsWith('idle')){
play = 'idle' play = 'idle'
} else if (this.actionStart == -1){
this.actionStart = 0;
play = 'idle';
} }
if (this.currentAction.startsWith('idle') && play.startsWith('idle') && this.actionStart > 10){ if (this.currentAction.startsWith('idle') && play.startsWith('idle') && this.actionStart > 10){
@@ -160,7 +163,7 @@ export class CharacterControls {
} }
idleReset(){ idleReset(){
this.actionStart = 0; this.actionStart = -1;
this.currentAction = 'idle' //this.currentAction = 'idle'
} }
} }
src/lib/Dashboard.js
+66 -33
View File
@@ -2,7 +2,8 @@ import {
PlaneGeometry, CylinderGeometry, CanvasTexture, Group, PlaneGeometry, CylinderGeometry, CanvasTexture, Group,
Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide
} from "three"; } from "three";
import Utils from "./Utils";
import { Text } from "troika-three-text";
class DashBoard { class DashBoard {
constructor(engine) { constructor(engine) {
let svg = p=>`<?xml version="1.0" encoding="UTF-8"?> let svg = p=>`<?xml version="1.0" encoding="UTF-8"?>
@@ -58,25 +59,53 @@ class DashBoard {
transparent:true transparent:true
}) })
); );
hudPlane.position.z = -0.25; hudPlane.position.z = -0.22;
hudPlane.position.y = -0.05
hud.add(hudPlane) 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', ()=>{ engine.addEventListener('beforeRender', ()=>{
dash.quaternion.copy(engine.camera.quaternion) dash.quaternion.copy(engine.camera.quaternion)
dash.position.copy(engine.camera.position) dash.position.copy(engine.camera.position)
dash.translateZ(-1.2 * engine.camera.zoom); dash.translateZ(-1.2 * engine.camera.zoom);
}) })
this.update = function(p = {}){ this.updateText = function(t, textScrolledCallback){
Object.assign(params, p); engine.motionQueue.clear(text);
if (updating) return false; text.text = t;
updating = true; text.anchorY = 0.05;
canvas.width = engine.w; text.sync(()=>{
canvas.height = engine.h; let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1];
url = URL.createObjectURL(new Blob([svg(params)],{ type:"image/svg+xml;charset=utf-8" })); if (dh > 0){
img.src = url; 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(){ this.createProgressBar = function(){
@@ -115,22 +144,23 @@ class DashBoard {
this.reset = ()=>{ this.reset = ()=>{
this.updateProgress(0); this.updateProgress(0);
this.update({ this.updateText('');
hint: ''
});
} }
this.attach = (object, dashPlacement, rotate)=>{ this.attach = (object, dashPlacement, rotate = false, plane = false)=>{
hud.visible = true; hud.visible = true;
hudPlane.scale.set(0, .1, 1); hudPlane.visible = plane;
hudPlane.material.opacity = 0.5; if (plane){
engine.motionQueue.add([{ hudPlane.scale.set(0, .1, 1);
o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8 hudPlane.material.opacity = 0.5;
},{ engine.motionQueue.add([{
o:hudPlane, a:{scale:{x:1}}, t:.4 o:hudPlane, a:{material:{opacity:0.73}}, t:.4, d:.8
},{ },{
o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4, o:hudPlane, a:{scale:{x:1}}, t:.4
}]) },{
o:hudPlane, a:{scale:{y:1}}, t:.4, d:.4,
}])
}
if (occupied) return false; if (occupied) return false;
object._hud = { object._hud = {
parent: object.parent, parent: object.parent,
@@ -143,14 +173,17 @@ class DashBoard {
hudTarget.attach(object); hudTarget.attach(object);
occupied = true; occupied = true;
engine.motionQueue.add({ let result = new Promise((resolve, reject)=>{
o: object, engine.motionQueue.add({
a: dashPlacement || { o: object,
quaternion: { x:0, y:0, z:0, w:0 }, a: dashPlacement || {
position: { x:0, y:0, z:0 }, quaternion: { x:0, y:0, z:0, w:0 },
scale: { x: 1, y:1, z:1 } position: { x:0, y:0, z:0 },
}, scale: { x: 1, y:1, z:1 }
t: 1 },
t: 1,
f: resolve
})
}) })
if (rotate){ if (rotate){
@@ -164,6 +197,7 @@ class DashBoard {
d: 1 d: 1
}) })
} }
return result;
} }
this.detach = object=>{ this.detach = object=>{
@@ -182,7 +216,6 @@ class DashBoard {
} }
this.createProgressBar(); this.createProgressBar();
this.update();
} }
get active(){ get active(){
src/lib/GameEngine.js
+6 -6
View File
@@ -556,12 +556,12 @@ class GameEngine extends THREE.EventDispatcher{
} }
clearScene(){ clearScene(){
// this.hero?.destroy(); this.hero?.destroy();
// this.dashboard?.reset(); this.dashboard?.reset();
// this.activeObjects.clear(); this.activeObjects.clear();
// this.physics.clear(); this.physics.clear();
// this.clickable.removeAll(); this.clickable.removeAll();
// this.motionQueue.clearAll(); this.motionQueue.clearAll();
} }
} }
src/lib/MotionEngine.js
+3 -2
View File
@@ -26,8 +26,8 @@ class MotionEngine {
return target; return target;
} }
// a = {o-object, a-action, t-time, f-finish event, d-delay, m-mode, r-repeat, // a = {o-object, a-attributes, t-time, f-finish event, d-delay, m-mode, r-repeat,
// rd-repeat the delay, rf-reset on finish} // rd-repeat the delay, rf-reset on finish, u-on update}
this.add = function (a) { this.add = function (a) {
a = Array.isArray(a) ? a : [a]; a = Array.isArray(a) ? a : [a];
a.forEach(e => { a.forEach(e => {
@@ -84,6 +84,7 @@ class MotionEngine {
} }
} }
calcValues(e.o, e.a, e.iv, e.ct / e.t, e.m || 'value'); calcValues(e.o, e.a, e.iv, e.ct / e.t, e.m || 'value');
e.u?.();
if (e.ct == e.t && e.r) { if (e.ct == e.t && e.r) {
e.ct = e.m == 'offset' ? undefined : 0; e.ct = e.m == 'offset' ? undefined : 0;
if (e.rd) { if (e.rd) {