diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index 2f3ec67..24e13d6 100644 --- a/src/lib/Dashboard.js +++ b/src/lib/Dashboard.js @@ -40,9 +40,12 @@ class DashBoard { this.group = dash; dash.add(hud); hud.add(hudTarget) + hudTarget.position.set(0,0,0.55); 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({ transparent: true, map: texture @@ -52,7 +55,7 @@ class DashBoard { engine.scene.add(dash); const loadingPlane = new Mesh( - new PlaneGeometry(engine.aspect, 1), + new PlaneGeometry(dashWidth, dashHeight), new MeshStandardMaterial({ color:0xffffff, opacity:0, transparent:true, @@ -60,26 +63,26 @@ class DashBoard { }) ); const loadingProgress = new ProgressBar(engine); - loadingProgress.object.scale.set(engine.aspect*0.8, 0.05, 0.05) - loadingProgress.object.position.set(-engine.aspect/2 + engine.aspect*0.1, 0, 0) + loadingProgress.object.scale.set(dashWidth*0.8, 0.05*dashHeight, 0.05*dashHeight) + loadingProgress.object.position.set(-dashWidth/2 + dashWidth*0.1, 0, 0) loadingPlane.add(loadingProgress.object); dash.add(loadingPlane); (async()=>{ hudPlane = new Mesh( - new PlaneGeometry(engine.aspect, 1), + new PlaneGeometry(dashWidth, dashHeight), new MeshBasicMaterial({ map: await engine.loadTexture('/static/textures/hud.png', ''), opacity: 0.37, transparent:true }) ); - hudPlane.position.z = 0; - hudPlane.position.y = -0.05 + hudPlane.position.z = -0.07 * dashHeight; + hudPlane.position.y = -0.05 * dashHeight hud.add(hudPlane) textPlane = new Mesh( - new PlaneGeometry(engine.aspect, 0.17), + new PlaneGeometry(dashWidth, 0.17 * dashHeight), new MeshBasicMaterial({ map: await engine.loadTexture('/static/textures/hud.png', ''), opacity: 0.52, @@ -87,7 +90,7 @@ class DashBoard { }) ); textPlane.position.z = -0.002; - textPlane.position.y = -0.41 + textPlane.position.y = -0.41 * dashHeight textPlane.visible = false; dash.add(textPlane) })() @@ -95,13 +98,13 @@ class DashBoard { const text = new Text() Object.assign(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', - anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000, - clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0] + anchorX: 'center', anchorY: 0.03 * dashHeight, depthOffset: 0.1, color: 0x000000, + clipRect: [-dashWidth * 0.4, -0.12 * dashHeight, dashWidth * 0.4, 0] }) text.sync(); - text.position.y = -0.33; + text.position.set(0, -0.33 * dashHeight, 0.001); dash.add(text); const pointsText = new Text() @@ -109,14 +112,14 @@ class DashBoard { text:``, fontSize: 0.044, font: '/static/fonts/Montserrat-Bold.ttf', 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); engine.addEventListener('beforeRender', ()=>{ dash.quaternion.copy(engine.camera.quaternion) dash.position.copy(engine.camera.position) //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){ @@ -137,7 +140,7 @@ class DashBoard { engine.motionQueue.add({ o: text, a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 }, - t: dh*177, + t: dh*177 / dashHeight, u: updateFn }) }else{ @@ -148,8 +151,8 @@ class DashBoard { levelProgress = new ProgressBar(engine) dash.add(levelProgress.object); - levelProgress.object.position.set(-engine.aspect/2 + engine.aspect/30, 0.45, -0.001) - levelProgress.object.scale.set(engine.aspect/3, 0.02, 0.02) + levelProgress.object.position.set(-dashWidth/2 + dashWidth/30, 0.45 * dashHeight, -0.001) + levelProgress.object.scale.set(dashWidth/3, 0.02 * dashHeight, 0.02 * dashHeight) this.levelProgress = levelProgress; this.addPoints = function(p){