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

#39

Browse Source
This commit is contained in:
goynov
2025-12-04 11:27:36 +02:00
parent 375a848a14
commit ee627fb025
1 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/Dashboard.js
+21 -18
View File
@@ -40,9 +40,12 @@ class DashBoard {
this.group = dash; this.group = dash;
dash.add(hud); dash.add(hud);
hud.add(hudTarget) hud.add(hudTarget)
hudTarget.position.set(0,0,0.55);
dash.visible = false; dash.visible = false;
const k = 1.55;
const dashWidth = engine.aspect * k, dashHeight = k;
const dashGeometry = new PlaneGeometry(engine.aspect, 1); const dashGeometry = new PlaneGeometry(dashWidth, dashHeight);
const dashMesh = new Mesh(dashGeometry, new MeshBasicMaterial({ const dashMesh = new Mesh(dashGeometry, new MeshBasicMaterial({
transparent: true, transparent: true,
map: texture map: texture
@@ -52,7 +55,7 @@ class DashBoard {
engine.scene.add(dash); engine.scene.add(dash);
const loadingPlane = new Mesh( const loadingPlane = new Mesh(
new PlaneGeometry(engine.aspect, 1), new PlaneGeometry(dashWidth, dashHeight),
new MeshStandardMaterial({ new MeshStandardMaterial({
color:0xffffff, color:0xffffff,
opacity:0, transparent:true, opacity:0, transparent:true,
@@ -60,26 +63,26 @@ class DashBoard {
}) })
); );
const loadingProgress = new ProgressBar(engine); const loadingProgress = new ProgressBar(engine);
loadingProgress.object.scale.set(engine.aspect*0.8, 0.05, 0.05) loadingProgress.object.scale.set(dashWidth*0.8, 0.05*dashHeight, 0.05*dashHeight)
loadingProgress.object.position.set(-engine.aspect/2 + engine.aspect*0.1, 0, 0) loadingProgress.object.position.set(-dashWidth/2 + dashWidth*0.1, 0, 0)
loadingPlane.add(loadingProgress.object); loadingPlane.add(loadingProgress.object);
dash.add(loadingPlane); dash.add(loadingPlane);
(async()=>{ (async()=>{
hudPlane = new Mesh( hudPlane = new Mesh(
new PlaneGeometry(engine.aspect, 1), new PlaneGeometry(dashWidth, dashHeight),
new MeshBasicMaterial({ new MeshBasicMaterial({
map: await engine.loadTexture('/static/textures/hud.png', ''), map: await engine.loadTexture('/static/textures/hud.png', ''),
opacity: 0.37, opacity: 0.37,
transparent:true transparent:true
}) })
); );
hudPlane.position.z = 0; hudPlane.position.z = -0.07 * dashHeight;
hudPlane.position.y = -0.05 hudPlane.position.y = -0.05 * dashHeight
hud.add(hudPlane) hud.add(hudPlane)
textPlane = new Mesh( textPlane = new Mesh(
new PlaneGeometry(engine.aspect, 0.17), new PlaneGeometry(dashWidth, 0.17 * dashHeight),
new MeshBasicMaterial({ new MeshBasicMaterial({
map: await engine.loadTexture('/static/textures/hud.png', ''), map: await engine.loadTexture('/static/textures/hud.png', ''),
opacity: 0.52, opacity: 0.52,
@@ -87,7 +90,7 @@ class DashBoard {
}) })
); );
textPlane.position.z = -0.002; textPlane.position.z = -0.002;
textPlane.position.y = -0.41 textPlane.position.y = -0.41 * dashHeight
textPlane.visible = false; textPlane.visible = false;
dash.add(textPlane) dash.add(textPlane)
})() })()
@@ -95,13 +98,13 @@ class DashBoard {
const text = new Text() const text = new Text()
Object.assign(text, { Object.assign(text, {
text:``, text:``,
fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8, fontSize: 0.033 * dashHeight, lineHeight: 1.1 * dashHeight, maxWidth: dashWidth * 0.8,
textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf', textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000, anchorX: 'center', anchorY: 0.03 * dashHeight, depthOffset: 0.1, color: 0x000000,
clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0] clipRect: [-dashWidth * 0.4, -0.12 * dashHeight, dashWidth * 0.4, 0]
}) })
text.sync(); text.sync();
text.position.y = -0.33; text.position.set(0, -0.33 * dashHeight, 0.001);
dash.add(text); dash.add(text);
const pointsText = new Text() const pointsText = new Text()
@@ -109,14 +112,14 @@ class DashBoard {
text:``, fontSize: 0.044, font: '/static/fonts/Montserrat-Bold.ttf', text:``, fontSize: 0.044, font: '/static/fonts/Montserrat-Bold.ttf',
outlineColor: 0x113377, outlineWidth: '3%', anchorX: 'center', outlineColor: 0x113377, outlineWidth: '3%', anchorX: 'center',
}) })
pointsText.position.set(0.86 * engine.aspect/2, 0.47, -0.001); pointsText.position.set(0.86 * dashWidth/2, 0.47 * dashHeight, -0.001);
dash.add(pointsText); dash.add(pointsText);
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);
dash.translateZ(-0.5/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom); dash.translateZ(-0.75/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom);
}) })
this.updateText = function(t, textScrolledCallback){ this.updateText = function(t, textScrolledCallback){
@@ -137,7 +140,7 @@ class DashBoard {
engine.motionQueue.add({ engine.motionQueue.add({
o: text, o: text,
a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 }, a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 },
t: dh*177, t: dh*177 / dashHeight,
u: updateFn u: updateFn
}) })
}else{ }else{
@@ -148,8 +151,8 @@ class DashBoard {
levelProgress = new ProgressBar(engine) levelProgress = new ProgressBar(engine)
dash.add(levelProgress.object); dash.add(levelProgress.object);
levelProgress.object.position.set(-engine.aspect/2 + engine.aspect/30, 0.45, -0.001) levelProgress.object.position.set(-dashWidth/2 + dashWidth/30, 0.45 * dashHeight, -0.001)
levelProgress.object.scale.set(engine.aspect/3, 0.02, 0.02) levelProgress.object.scale.set(dashWidth/3, 0.02 * dashHeight, 0.02 * dashHeight)
this.levelProgress = levelProgress; this.levelProgress = levelProgress;
this.addPoints = function(p){ this.addPoints = function(p){