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

loading progress added

Browse Source
This commit is contained in:
goynov
2025-11-11 08:09:07 +02:00
parent 03edeaef2d
commit 35fa1863ff
11 changed files with 170 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/Dashboard.js
+72 -40
View File
@@ -18,13 +18,14 @@ class DashBoard {
<text x="90%" text-anchor="middle" y="8%" font-family="MyriadPro-Regular, &apos;Myriad Pro&apos;" font-size="150%">Points</text>
</svg>`;
let img = new Image(), url, progressCylinder;
let img = new Image(), url, levelProgress;
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let texture = new CanvasTexture(canvas)
let updating = false;
let params = {}
let occupied = false;
let points = 0;
img.addEventListener('load', function () {
ctx.drawImage(img, 0, 0, engine.w, engine.h);
@@ -50,6 +51,18 @@ class DashBoard {
dash.add(dashMesh);
engine.scene.add(dash);
const loadingPlane = new Mesh(
new PlaneGeometry(engine.aspect, 1),
new MeshBasicMaterial({
color:0xFAFAFA,
})
);
const loadingProgress = new ProgressBar();
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.1)
loadingPlane.add(loadingProgress.object);
dash.add(loadingPlane);
(async()=>{
hudPlane = new Mesh(
new PlaneGeometry(engine.aspect, 1),
@@ -122,30 +135,15 @@ class DashBoard {
})
}
this.createProgressBar = function(){
const padLeft = engine.aspect/30;
const progressGeometry = new CylinderGeometry( 0.5, 0.5, 1, 3, 1, false, 0, Math.PI );
const staticCylinder = new Mesh( progressGeometry, new MeshStandardMaterial({
roughness: 0, metalness:0.1, transparent: true, opacity:0.52, color: 0x55ff00, side: DoubleSide
}) );
staticCylinder.rotation.set(-Math.PI/2, 0, Math.PI/2,)
staticCylinder.scale.set(0.02, engine.aspect/3, 0.02)
staticCylinder.position.set(padLeft - engine.aspect/3, 0.45, 0);
dash.add( staticCylinder );
levelProgress = new ProgressBar({})
dash.add(levelProgress.object);
levelProgress.object.position.set(-engine.aspect/2 + engine.aspect/30, 0.45, -0.01)
levelProgress.object.scale.set(engine.aspect/3, 0.02, 0.02)
this.levelProgress = levelProgress;
progressCylinder = new Mesh( progressGeometry, new MeshStandardMaterial({
roughness: 0, metalness:0.1, transparent: true, opacity:0.77, color: 0x11ff00
}) );
progressCylinder.rotation.set(Math.PI/2, 0, Math.PI/2,)
progressCylinder.scale.set(0.017, 0, 0.017)
progressCylinder.position.set(0, 0.45, 0);
dash.add( progressCylinder );
}
this.updateProgress = function(value){
const padLeft = engine.aspect/30;
progressCylinder.scale.y = engine.aspect/3 * value;
progressCylinder.position.x = padLeft - engine.aspect/2 + progressCylinder.scale.y/2
this.addPoints = function(p){
points += p;
console.log('adding points', p, points)
}
this.enable = ()=>{
@@ -157,14 +155,15 @@ class DashBoard {
}
this.reset = ()=>{
this.updateProgress(0);
this.levelProgress.update(0);
this.updateText('');
}
this.attach = (object, dashPlacement, rotate = false, plane = false)=>{
//dashPlacement, rotate = false, plane = false
this.attach = (object, opts = {})=>{
hud.visible = true;
hudPlane.visible = plane;
if (plane){
hudPlane.visible = !!opts.plane;
if (opts.plane){
hudPlane.scale.set(0, .1, 1);
hudPlane.material.opacity = 0.5;
engine.motionQueue.add([{
@@ -190,17 +189,17 @@ class DashBoard {
let result = new Promise((resolve, reject)=>{
engine.motionQueue.add({
o: object,
a: dashPlacement || {
a: opts.placement || {
quaternion: { x:0, y:0, z:0, w:0 },
position: { x:0, y:0, z:0 },
scale: { x: 1, y:1, z:1 }
scale: { x: 1, y: 1, z: 1 }
},
t: 1,
t: opts.skipTransition ? 0 : 1,
f: resolve
})
})
if (rotate){
if (opts.rotate){
engine.motionQueue.add(hudAnimation = {
o: hudTarget,
a: {
@@ -214,22 +213,28 @@ class DashBoard {
return result;
}
this.detach = object=>{
this.detach = (object, opts = {})=>{
engine.motionQueue.remove(hudAnimation);
object._hud.parent.attach(object);
object._hud.parent?.attach(object);
hud.rotation.y = 0;
hud.visible = false;
engine.motionQueue.add({
o: object,
a: object._hud.placement,
t: 1
});
if (!opts.skipTransition){
engine.motionQueue.add({
o: object,
a: object._hud.placement,
t: 1
});
}
delete object._hud;
occupied = false;
hudAnimation = null;
}
this.createProgressBar();
this.loading = function(progress){
loadingPlane.visible = progress > 0 && progress < 1;
loadingProgress.update(progress)
}
this.loading(1);
}
get active(){
@@ -241,4 +246,31 @@ class DashBoard {
}
}
class ProgressBar{
constructor(params = {}){
this.object = new Group();
const geometry = new CylinderGeometry( 0.5, 0.5, 1, 3, 1, false, 0, Math.PI );
const staticCylinder = new Mesh( geometry, new MeshStandardMaterial({
roughness: 0, metalness:0.1, transparent: true, opacity:0.52, color: 0x55ff00, side: DoubleSide
}) );
staticCylinder.rotation.set(-Math.PI/2, 0, Math.PI/2,)
staticCylinder.position.x = 0.5;
this.object.add( staticCylinder );
const progressCylinder = new Mesh( geometry, new MeshStandardMaterial({
roughness: 0, metalness:0.1, transparent: true, opacity:0.77, color: 0x11ff00
}) );
progressCylinder.rotation.set(Math.PI/2, 0, Math.PI/2,)
this.object.add( progressCylinder );
this.update = function(value){
progressCylinder.visible = !!value;
progressCylinder.scale.y = value;
progressCylinder.position.x = progressCylinder.scale.y / 2
}
this.update(0)
}
}
export { DashBoard };
src/lib/MotionEngine.js
+6 -1
View File
@@ -31,7 +31,12 @@ class MotionEngine {
this.add = function (a) {
a = Array.isArray(a) ? a : [a];
a.forEach(e => {
aq.push(e);
if (e.t == 0){
e.t = 1;
this.animate(e, 1)
}else{
aq.push(e);
}
});
};