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/components/InteractiveObjects/GenenricObject.js
+3 -1
View File
@@ -27,7 +27,9 @@ class GenericObject{
z: scale*this.object.scale.z
}
}
await engine.dashboard.attach(this.object, placement, true, true);
await engine.dashboard.attach(this.object, {
placement, rotate: true, plane: true
});
}
}
if (data.description){
src/components/InteractiveObjects/InteractiveObject.js
+3 -5
View File
@@ -16,8 +16,9 @@ import { Particles } from "./Particles";
import { assignMaterial, assignParams } from "@/lib/MeshUtils";
const InteractiveObjectsImports = {
PuzzleGame1, PuzzleGame2, PuzzleGame4,
GenericObject, CharacterObject, MazeQuizGame, Particles };
PuzzleGame1, PuzzleGame2, PuzzleGame4, VideoPlayer,
GenericObject, CharacterObject, MazeQuizGame, Particles
};
class InteractiveObject {
constructor(gameEngine, obj) {
@@ -77,9 +78,6 @@ class InteractiveObject {
this.object.game = game;
break;
case 'VideoPlayer':
this.source = await new VideoPlayer(gameEngine, obj.$go.asset.name, gameEngine.assetPath);
this.object = this.source.object;
break;
case 'PuzzleGame1':
case 'PuzzleGame2':
case 'MazeQuizGame':
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js
+2 -2
View File
@@ -47,7 +47,7 @@ class MazeQuizGame {
let ud = {...ud1, ...ud2}
if (ud?.finish){
if (e.started){
engine.dashboard.updateProgress(1)
engine.dashboard.levelProgress.update(1)
engine.hero.animationsMap._idle = engine.hero.animationsMap.idle
if ( engine.hero.animationsMap?.win){
engine.hero.animationsMap.idle = engine.hero.animationsMap.win
@@ -65,7 +65,7 @@ class MazeQuizGame {
}
if (ud.qid !== undefined && e.started){
engine.dashboard.updateText(ud.question.q)
engine.dashboard.updateProgress(ud.qid / questions.length)
engine.dashboard.levelProgress.update(ud.qid / questions.length)
}
//console.log(e, ud, engine.hero?.animationsMap);
})
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue
+9 -2
View File
@@ -1,5 +1,4 @@
<template>
<v-checkbox v-model="modelValue.shuffle" label="Shuffle questions"></v-checkbox>
<v-dialog max-width="1400" scrollable>
<template v-slot:activator="{ props: activatorProps }">
<v-btn v-bind="activatorProps">Manage Questions</v-btn>
@@ -30,10 +29,16 @@
</v-card>
</div>
</v-card-text>
<v-btn @click="addQuestion" block>Add question</v-btn>
<v-card-actions>
<v-btn color="success" @click="addQuestion" block>Add question</v-btn>
<v-btn color="primary" @click="isActive.value = false" >Close</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-checkbox v-model="modelValue.shuffle" hide-details label="Shuffle questions"></v-checkbox>
<v-number-input density="compact" label="Correct answer points" v-model="modelValue.questionPoints"></v-number-input>
<v-number-input density="compact" label="Wrong answer penalty points" v-model="modelValue.questionPenalty"></v-number-input>
</template>
<script>
@@ -41,6 +46,8 @@ export default {
props:['modelValue'],
mounted(){
this.modelValue.questions ??= [];
this.modelValue.questionPoints ??= 10;
this.modelValue.questionPenalty ??= 0
},
methods:{
addQuestion(){
src/components/InteractiveObjects/PuzzleGame1.js
+5 -3
View File
@@ -1,4 +1,4 @@
import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
import { BoxGeometry, Mesh, MeshStandardMaterial, Group } from 'three';
import { MotionEngine } from '../../lib/MotionEngine';
import { centerOrigin } from '@/lib/MeshUtils';
@@ -13,8 +13,10 @@ class PuzzleGame1 {
let bm = new BoxGeometry(1, 1, 1);
let material = new MeshBasicMaterial({
map: await engine.loadTexture(data.$go.asset.name)
let material = new MeshStandardMaterial({
map: await engine.loadTexture(data.$go.asset.name),
// roughness:1, metalness:0,
// normalMap: await engine.loadTexture('NormalMap.png', '/static/textures/'),
});
//material.map.encoding = sRGBEncoding;
src/components/InteractiveObjects/VideoPlayer.js
+15 -6
View File
@@ -2,11 +2,11 @@ import * as THREE from 'three';
class VideoPlayer {
constructor(engine, src, path = ''){
constructor(engine, data){
let vi, plane;
return new Promise((resolve, reject)=>{
vi = document.createElement('video');
vi.src = path + src;
vi.src = engine.assetPath + data.$go.asset.name;
vi.addEventListener('loadedmetadata', ()=>{
this.aspect = vi.videoWidth / vi.videoHeight;
let geometry = new THREE.PlaneGeometry( this.aspect, 1 );
@@ -31,13 +31,22 @@ class VideoPlayer {
vi.addEventListener('play', ()=>{
material.opacity = 1
if (engine.dashboard?.active){
engine.dashboard.attach(plane);
if (data.playInHud && engine.dashboard?.active){
engine.dashboard.attach(plane, {
skipTransition: data.skipTransition
});
}
})
vi.addEventListener('pause', ()=>{
material.opacity = 0.5;
engine.dashboard?.detach(plane);
//material.opacity = 0.5;
if (data.playInHud){
engine.dashboard?.detach(plane, {
skipTransition: !data.skipTransition
});
}
})
vi.addEventListener('ended', ()=>{
this.onfinish?.();
})
this.video = vi;
src/components/InteractiveObjects/VideoPlayer.vue
+5 -6
View File
@@ -1,10 +1,9 @@
<template>
<v-card v-if="modelValue.go">
<v-card-item>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</v-card-item>
</v-card>
<div v-if="modelValue.go">
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
<v-checkbox density="compact" v-model="modelValue.playInHud" hide-details label="Play in full screen"></v-checkbox>
</div>
<asset-selector @select="assignVideoObject" :type="['Video']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose video object</v-btn>
src/components/SceneDesigner/GameObject.vue
+2
View File
@@ -19,6 +19,7 @@
<v-form class="pt-4">
<v-text-field density="compact" :label="l.name" v-model="modelValue.title"></v-text-field>
<v-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
<v-number-input density="compact" label="Completion points" v-model="modelValue.points"></v-number-input>
</v-form>
</v-card>
@@ -49,6 +50,7 @@ export default {
},
mounted(){
this.active = true;
this.modelValue.points ??= 10;
},
props:{
//context: Object,
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);
}
});
};
src/mixins/GameEnvironmentMixin.js
+48 -29
View File
@@ -3,6 +3,7 @@ import { VideoPlayer } from '@/components/InteractiveObjects/VideoPlayer';
import { GameEngine } from '@/lib/GameEngine';
import { Hero } from '@/lib/Hero';
import { autoScale, getBoundingBox, getBoundingBoxCenterPoint, getBoundingBoxSize } from '@/lib/MeshUtils';
import Utils from '@/lib/Utils';
let gameEngine = null;
export default {
@@ -117,7 +118,13 @@ export default {
async loadEnvironment(scene, target){
//await gameEngine.loadPanorama(`/asset/default/43.webp`);
gameEngine.clearScene();
gameEngine.activeObjects.visible = false;
gameEngine.dashboard?.loading(0);
await this.expandScenarioData(scene);
gameEngine.dashboard?.loading(0.1);
//this is needed cause when mounted canvas has different size
this.resize();
target.objects = target.objects || {};
let l = target.objects;
if (this.scene.data.$environment){
@@ -136,49 +143,61 @@ export default {
}
gameEngine.activeObjects.add(env.scene);
}
if (this.scene.data.items){
let loaded = 0;
for (let i of this.scene.data.items) {
let io = await new InteractiveObject(gameEngine, i.data)
//let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
//console.log(i.data, io.object)
this.setObjectAttributes(l, i.data, io.object, io.source, 1);
gameEngine.activeObjects.add(io.object);
if (this.env == 'GamePlaying'){
if (i.data.$go?.type == 'player3d'){
let hero = new Hero(io.source, i.data.$go);
hero.init(gameEngine);
}else{
if (io.source?.animations?.length){
gameEngine.playAnimation(gameEngine.scene, io.source.animations[0]);
}
if (!i.data.noPhysics){
let bb = getBoundingBox(io.object);
let bbs = getBoundingBoxSize(bb);
gameEngine.physics.add(io.object, 'fixed', false, undefined, 'capsule', {
radius: Math.max(bbs.x, bbs.z)/2, halfHeight: bbs.y/2
})
}
}
io.onfinish=()=>{
gameEngine.dashboard?.addPoints(i.data.points)
i.data.points = 0;
}
}
loaded += 1/this.scene.data.items.length
gameEngine.dashboard?.loading(0.1 + 0.89*loaded);
}
}
if (this.scene.data.$intro && this.env == 'GamePlaying'){
let intro = await new VideoPlayer(gameEngine, this.scene.data.$intro.asset.name, gameEngine.assetPath);
let intro = await new VideoPlayer(gameEngine, {$go: this.scene.data.$intro, skipTransition: true, playInHud: true});
gameEngine.activeObjects.add(intro.object);
intro.video.addEventListener('pause',()=>{
intro.object.removeFromParent();
gameEngine.activeObjects.visible = true;
});
intro.video.play();
}else{
gameEngine.activeObjects.visible = true;
}
for (let i of this.scene.data.items || []) {
let io = await new InteractiveObject(gameEngine, i.data)
//let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
//console.log(i.data, io.object)
this.setObjectAttributes(l, i.data, io.object, io.source, 1);
gameEngine.activeObjects.add(io.object);
if (this.env == 'GamePlaying'){
if (i.data.$go?.type == 'player3d'){
let hero = new Hero(io.source, i.data.$go);
hero.init(gameEngine);
}else{
if (io.source?.animations?.length){
gameEngine.playAnimation(gameEngine.scene, io.source.animations[0]);
}
if (!i.data.noPhysics){
let bb = getBoundingBox(io.object);
let bbs = getBoundingBoxSize(bb);
gameEngine.physics.add(io.object, 'fixed', false, undefined, 'capsule', {
radius: Math.max(bbs.x, bbs.z)/2, halfHeight: bbs.y/2
})
}
}
}
}
gameEngine.dashboard?.loading(1)
// let camera = new gameEngine.$.PerspectiveCamera();
// let cameraHelper = new gameEngine.$.CameraHelper(camera);
// gameEngine.activeObjects.add(cameraHelper);
// gameEngine.activeObjects.add(camera);
// this.setObjectAttributes(l, { id: 'camera', 'title': 'Main camera' }, { scene: camera })
// cameraHelper.update();
//this is needed cause when mounted canvas has different size
this.resize();
},
targetPointerDown(){