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

refactoring

Browse Source
This commit is contained in:
goynov
2025-11-06 18:17:56 +02:00
parent fd3f9a6d69
commit 4565782e9f
14 changed files with 113 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InteractiveObjects/GenenricObject.js
+9
View File
@@ -3,6 +3,15 @@ class GenericObject{
return new Promise(async(resolve, reject)=>{
this.source = await engine.load(data.$go.asset.name);
this.object = this.source.scene;
if (!data.exclude){
engine.clickable.add(this.object, e=>{
if (engine.dashboard && data.description){
engine.dashboard.update({ hint: data.description })
}
});
}
resolve(this);
})
}
src/components/InteractiveObjects/GenericObject.vue
+2 -1
View File
@@ -1,7 +1,8 @@
<template>
<div>
<v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
<v-checkbox v-model="modelValue.hud" label="Observe in head-up display"></v-checkbox>
<v-checkbox density="compact" v-model="modelValue.hud" hide-details label="Observe in head-up display"></v-checkbox>
<v-checkbox density="compact" v-model="modelValue.exclude" hide-details label="Disable interactions"></v-checkbox>
<v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
<div class="text-caption text-center">{{ modelValue.title }}</div>
</div>
src/components/InteractiveObjects/ImageObject.js
+6 -6
View File
@@ -2,24 +2,24 @@ import { TextureLoader, MeshStandardMaterial, MeshBasicMaterial, PlaneGeometry,
import { assignParams } from "@/lib/MeshUtils";
class ImageObject {
constructor(obj, engine, params) {
var t = new TextureLoader().setPath(params.path).load(obj.value);
constructor(engine, obj) {
var t = new TextureLoader().setPath(obj.path).load(obj.value);
//t.encoding = sRGBEncoding;
var mp = {
map: t,
alphaTest: 0.5
};
if (obj.nm) {
mp.normalMap = new TextureLoader().setPath(params.path).load(obj.nm);
mp.normalMap = new TextureLoader().setPath(obj.path).load(obj.nm);
}
if (obj.em) {
mp.emissiveMap = new TextureLoader().setPath(params.path).load(obj.em);
mp.emissiveMap = new TextureLoader().setPath(obj.path).load(obj.em);
}
if (obj.am) {
mp.alphaMap = new TextureLoader().setPath(params.path).load(obj.am);
mp.alphaMap = new TextureLoader().setPath(obj.path).load(obj.am);
}
obj.material && Object.assign(mp, obj.material);
let geo = new PlaneGeometry(params.wallSize * (obj.w || 1), params.wallSize * (obj.h || 1));
let geo = new PlaneGeometry(obj.width || 1, obj.height || 1);
if (obj.uv) {
var uvAttribute = geo.attributes.uv;
for (var i = 0; i < uvAttribute.count; i++) {
src/components/InteractiveObjects/InteractiveObject.js
+6 -5
View File
@@ -17,24 +17,24 @@ import { assignMaterial, assignParams } from "@/lib/MeshUtils";
const InteractiveObjectsImports = { PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, Particles };
class InteractiveObject {
constructor(obj, gameEngine, params) {
constructor(gameEngine, obj) {
this.name = obj.name;
this.ready = new Promise(async (resolve, reject) => {
switch (obj.type || 'GenericObject') {
case 'Group':
this.object = new Group();
for (let g of obj.group){
let go = new InteractiveObject(g, gameEngine);
let go = new InteractiveObject(gameEngine, g);
let gameMesh = await go.ready;
this.object.add(gameMesh.object);
}
break;
case 'Text':
this.source = new TextObject(obj, gameEngine, params);
this.source = new TextObject(gameEngine, obj);
this.object = this.source.object;
break;
case 'Image':
this.source = new ImageObject(obj, gameEngine, params);
this.source = new ImageObject(gameEngine, obj);
this.object = this.source.object;
break;
case 'Gltf':
@@ -49,7 +49,7 @@ class InteractiveObject {
// object.receiveShadow = true;
});
assignMaterial(gltfObj, obj, params);
assignMaterial(gltfObj, obj);
if (gltf.animations && gltf.animations.length) {
let mixer = new AnimationMixer(gltfObj);
gameEngine.mixers.push(mixer);
@@ -82,6 +82,7 @@ class InteractiveObject {
case 'PuzzleGame2':
case 'MazeQuizGame':
case 'Particles':
console.log(obj.type);
this.source = await new InteractiveObjectsImports[obj.type](gameEngine, obj);
this.object = this.source.object;
break;
src/components/InteractiveObjects/MazeQuizGame/MazeObject.js
+23 -33
View File
@@ -2,31 +2,21 @@ import { Group, Vector3, Matrix4, Mesh, Quaternion, PlaneGeometry, MeshStandardM
import { InteractiveObject } from '../InteractiveObject';
class MazeObject {
constructor(engine, def, params = {}){
constructor(engine, def, params){
let room = new Group();
let root = room;
this.object = room;
let context = {};
const bbox = {l:0, r:0, f:0}
const { wallSize, tubeSize, scale } = params
const scale = 5;
context.wallSize = params.wallSize || 1.2*scale; //half
context.tubeSize = params.tubeSize || 1.2*scale;
context.wallDepth = params.wallDepth || 0*scale;
context.fontPath = params.fontPath || '/static/fonts/Montserrat-Regular.ttf';
context.scale = scale;
this.context = context;
let _tf = {
rotation: {
r: 3 * Math.PI / 2, f: 0, l: Math.PI / 2, b: 0
},
pNext: {
r: [-context.wallSize/2, context.wallSize/2],
f: [0, context.wallSize],
l: [context.wallSize/2, context.wallSize/2]
r: [-wallSize/2, wallSize/2],
f: [0, wallSize],
l: [wallSize/2, wallSize/2]
}
};
@@ -53,7 +43,7 @@ class MazeObject {
let e = elements.map(e=>o[e].clone())
e[0].position.set(0, 0, offsetZ + context.wallSize/2);
e[0].position.set(0, 0, offsetZ + wallSize/2);
e[1].rotateY(_tf.rotation.b);
@@ -62,24 +52,24 @@ class MazeObject {
e[4].rotateY(_tf.rotation.l);
e[1].position.set(0, 0, offsetZ + 0);
e[2].position.set(-context.wallSize/2, 0, offsetZ + context.wallSize/2);
e[3].position.set(0, 0, offsetZ + context.wallSize);
e[4].position.set(context.wallSize/2, 0, offsetZ + context.wallSize/2);
e[2].position.set(-wallSize/2, 0, offsetZ + wallSize/2);
e[3].position.set(0, 0, offsetZ + wallSize);
e[4].position.set(wallSize/2, 0, offsetZ + wallSize/2);
if (elements[1] == 'wall'){
addPhysics(def.matrix, [0, 0, offsetZ], context.wallSize, 'front')
addPhysics(def.matrix, [0, 0, offsetZ], wallSize, 'front')
}
if (elements[2] == 'wall'){
addPhysics(def.matrix, [-context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
addPhysics(def.matrix, [-wallSize/2, 0, offsetZ + wallSize/2], wallSize)
}
if (elements[3] == 'wall'){
addPhysics(def.matrix, [0, 0, offsetZ + context.wallSize], context.wallSize, 'front')
addPhysics(def.matrix, [0, 0, offsetZ + wallSize], wallSize, 'front')
}
if (elements[4] == 'wall'){
addPhysics(def.matrix, [context.wallSize/2, 0, offsetZ + context.wallSize/2], context.wallSize)
addPhysics(def.matrix, [wallSize/2, 0, offsetZ + wallSize/2], wallSize)
}
e.forEach(g => {
@@ -98,32 +88,32 @@ class MazeObject {
let offsetZ = 0, e;
def.len = def.len || 0;
if (step == 0) {
addRoom(['floor', 'wall', 'wall', 'door', 'wall'], def, -context.wallSize)
addRoom(['floor', 'wall', 'wall', 'door', 'wall'], def, -wallSize)
}
if (def.userData?.answer !== undefined){
addPhysics(def.matrix, [0,0,0], context.wallSize, 'front', true, def.userData)
addPhysics(def.matrix, [0,0,0], wallSize, 'front', true, def.userData)
}
for (let i = 0; i < def.len; i++) {
let t = o.tunnel.clone();
t.position.set(0, 0, i * context.tubeSize);
t.position.set(0, 0, i * tubeSize);
def.matrix && t.applyMatrix4(def.matrix);
root.add(t);
}
offsetZ = def.len * context.tubeSize;
addPhysics(def.matrix, [context.tubeSize / 2, 0.6, offsetZ/2], offsetZ)
addPhysics(def.matrix, [-context.tubeSize / 2, 0.6, offsetZ/2], offsetZ)
offsetZ = def.len * tubeSize;
addPhysics(def.matrix, [tubeSize / 2, 0.6, offsetZ/2], offsetZ)
addPhysics(def.matrix, [-tubeSize / 2, 0.6, offsetZ/2], offsetZ)
addRoom(['floor', 'door', def.r ? 'door' : 'wall', def.f ? 'door' : 'wall', def.l ? 'door' : 'wall'], def, offsetZ)
if (def.userData?.qid !== undefined || def.userData?.finish){
addPhysics(def.matrix, [0,0,offsetZ + context.wallSize/2], { width: context.wallSize/2, height: context.wallSize/2, depth: context.wallSize/2}, 'side', true, def.userData)
addPhysics(def.matrix, [0,0,offsetZ + wallSize/2], { width: wallSize/2, height: wallSize/2, depth: wallSize/2}, 'side', true, def.userData)
}
//console.log('loadingggg', def.objects)
def.objects?.forEach(async obj => {
obj.room = room;
let go = new InteractiveObject(obj, engine, context)
let go = new InteractiveObject(engine, obj)
await go.ready;
go.object.scale.multiplyScalar(context.wallSize)
go.object.position.multiplyScalar(context.wallSize)
go.object.scale.multiplyScalar(wallSize)
go.object.position.multiplyScalar(wallSize)
go.object.applyMatrix4(def.matrix);
root.add(go.object);
});
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js
+28 -17
View File
@@ -1,16 +1,34 @@
import { MazeObject } from "./MazeObject";
import Utils from "@/lib/Utils";
const params = {
scale: 5,
wallSize: 5 * 1.2,
tubeSize: 5 * 1.2,
}
const imgParams = {
type: 'Image',
width: params.wallSize*0.033,
height: params.wallSize*0.033,
value: '/static/textures/arrow.png'
}
const textParams = {
type: 'Text', width:0.073 * params.wallSize,
fontPath:'/static/fonts/Montserrat-Regular.ttf', fontSize:0.025
}
const defaults = {
arrows:{
r: len => ({ type: 'Image', value: '/static/textures/arrow.png', position:[-.5,.44,len+.96], rotation:[0,Math.PI, 0], scale: [0.03, 0.03, 0.03] }),
l: len => ({ type: 'Image', value: '/static/textures/arrow.png', position:[.5,.44,len+.96], rotation:[0,Math.PI, Math.PI], scale: [0.03, 0.03, 0.03] }),
f: len => ({ type: 'Image', value: '/static/textures/arrow.png', position:[0,.7,len+.96], rotation:[0,Math.PI, Math.PI/2], scale: [0.03, 0.03, 0.03] })
r: len => ({ position:[-.5,.44,len+.96], rotation:[0,Math.PI, 0], ...imgParams }),
l: len => ({ position:[.5,.44,len+.96], rotation:[0,Math.PI, Math.PI], ...imgParams }),
f: len => ({ position:[0,.7,len+.96], rotation:[0,Math.PI, Math.PI/2], ...imgParams })
},
answers:{
r: (len, text) => ({ type: 'Text', width:0.5, text, fontSize:0.025, position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
l: (len, text) => ({ type: 'Text', width:0.5, text, fontSize:0.025, position:[.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
f: (len, text) => ({ type: 'Text', width:0.5, text, fontSize:0.025, position:[0,.55,len+.9], rotation:[0,Math.PI, 0] })
r: (len, text) => ({ ...textParams, text, position:[-.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
l: (len, text) => ({ ...textParams, text, position:[.5,.3,len+.9], rotation:[0,Math.PI, 0] }),
f: (len, text) => ({ ...textParams, text, position:[0,.55,len+.9], rotation:[0,Math.PI, 0] })
}
}
@@ -21,7 +39,7 @@ class MazeQuizGame {
return new Promise(async (resolve, reject)=>{
let questions = data.shuffle ? Utils.shuffleArray(data.questions) : data.questions;
let def = this.generate(questions);
this.mazeObject = new MazeObject(engine, def)
this.mazeObject = new MazeObject(engine, def, params)
engine.addEventListener('collision', async e=>{
let ud1 = engine.physics.world.getCollider(e.handle1)?.parent()?.userData,
ud2 = engine.physics.world.getCollider(e.handle2)?.parent()?.userData;
@@ -73,19 +91,13 @@ class MazeQuizGame {
};
len = len || Math.round(Math.random()*tl) + 2;
// let l = {
// l: Math.round(Math.random()*tl) + 2,
// r: Math.round(Math.random()*tl) + 2,
// f: Math.round(Math.random()*tl/2) + 2
// }
let directions = Utils.shuffleArray( ['l', 'r', 'f'] )
let mo = {
len, userData: { question, qid },
objects:[
{
type: 'Text', text: question.q, fontSize:0.033, width:0.5, position:[0,.33,len + .96], rotation:[0,Math.PI, 0]
...textParams, text: question.q, fontSize:0.033, position:[0,.33,len + .96], rotation:[0,Math.PI, 0]
}
]
}
@@ -116,7 +128,7 @@ class MazeQuizGame {
len: 2,
objects:[
{
type: 'Text', width:0.5, color:0xff0000, text: question.h, fontSize:0.033, position:[0,.44,2+.96], rotation:[0,Math.PI, 0]
...textParams, color:0xff0000, text: question.h, fontSize:0.033, position:[0,.44,2+.96], rotation:[0,Math.PI, 0]
}
]
}
@@ -133,9 +145,8 @@ class MazeQuizGame {
}
}
})
return mo;
}
}
export {MazeQuizGame}
export { MazeQuizGame }
src/components/InteractiveObjects/TextObject.js
+4 -3
View File
@@ -3,15 +3,16 @@ import { Text } from "troika-three-text";
import { assignParams } from "@/lib/MeshUtils";
class TextObject {
constructor(obj, engine, params) {
constructor(engine, obj) {
console.log('OBJ', obj)
const txt = new Text();
// Set properties to configure:
txt.text = obj.text;
txt.fontSize = 0.033;
txt.lineHeight = 1.1;
txt.maxWidth = obj.width || params.wallSize * .73;
txt.maxWidth = obj.width;
txt.textAlign = 'center';
txt.font = params.fontPath;
txt.font = obj.fontPath;
txt.anchorX = 'center';
txt.anchorY = 'bottom';
txt.curveRadius = 0;
src/components/InteractiveObjects/VideoPlayer.js
+6 -15
View File
@@ -2,7 +2,7 @@ import * as THREE from 'three';
class VideoPlayer {
constructor(context, src){
constructor(engine, src){
let vi, plane, data;
this.ready = new Promise((resolve, reject)=>{
@@ -22,7 +22,7 @@ class VideoPlayer {
} );
plane = new THREE.Mesh( geometry, material );
this.object = plane;
context.clickable.add(plane, ()=>{
engine.clickable.add(plane, ()=>{
material.opacity = 1
if (vi.paused){
vi.play();
@@ -33,13 +33,7 @@ class VideoPlayer {
resolve(this);
})
vi.addEventListener('play', ()=>{
if (context.dashboard?.active){
//console.log(plane);
// plane.matrix.multiply(context.dashboard.group.matrix)
// plane.applyMatrix4(plane.matrix)
// let m1 = plane.matrix.clone(), m2 = context.dashboard.group.matrix.clone();
// let m = m1.premultiply(m2);
if (engine.dashboard?.active){
data = {
parent: plane.parent,
location: {
@@ -48,12 +42,9 @@ class VideoPlayer {
scale: plane.scale.clone()
}
}
//console.log(data.location)
context.dashboard.group.attach(plane);
//plane.applyMatrix4(m.invert())
engine.dashboard.group.attach(plane);
context.motionQueue.add({
engine.motionQueue.add({
o: plane,
a: {
rotation: { x:0, y:0, z:0 },
@@ -66,7 +57,7 @@ class VideoPlayer {
})
vi.addEventListener('pause', ()=>{
data.parent.attach(plane);
context.motionQueue.add({
engine.motionQueue.add({
o: plane,
a: data.location,
t: 1
src/components/SceneDesigner/Scene.vue
+4 -2
View File
@@ -9,15 +9,17 @@
</g>
</teleport>
<v-card :title="modelValue.title" v-if="selected" class="mx-2" variant="text">
<v-img v-if="modelValue.environment" :src="`/asset/thumb/${modelValue.environment}.webp`" />
<asset-selector @select="assignEnvironment" :type="['Panorama']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-sphere-outline" block color="light-blue-darken-4">Choose environment</v-btn>
<v-btn v-bind="props" prepend-icon="mdi-panorama-sphere-outline" block color="light-blue-darken-4">Select environment</v-btn>
</template>
</asset-selector>
<v-img v-if="modelValue.scene" :src="`/asset/thumb/${modelValue.scene}.webp`" />
<asset-selector @select="assignScene" :type="['Scene']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="orange-darken-3" class="my-4">Choose scene</v-btn>
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="orange-darken-3" class="my-4">Select scene</v-btn>
</template>
</asset-selector>
src/lib/Clickable.js
+5
View File
@@ -16,6 +16,11 @@ class Clickable {
delete object._clickable;
};
this.removeAll = function(){
objects.forEach(o=>delete o._clickable)
objects.splice(0, objects.length);
}
this.update = function (mouse, camera, event) {
raycaster.setFromCamera(mouse, camera);
let forExecute = [];
src/lib/GameEngine.js
+9
View File
@@ -560,6 +560,15 @@ class GameEngine extends THREE.EventDispatcher{
}
this.stats?.update()
}
clearScene(){
// this.hero?.destroy();
// this.dashboard?.reset();
// this.activeObjects.clear();
// this.physics.clear();
// this.clickable.removeAll();
// this.motionQueue.clearAll();
}
}
export { GameEngine }
src/lib/MeshUtils.js
+4 -4
View File
@@ -7,19 +7,19 @@ function assignParams(mesh, params){
});
}
function assignMaterial(mesh, params, context){
function assignMaterial(mesh, params){
if (params.name && params.material){
//let mp = params.material.metalness ? new MeshStandardMaterial(params.material) : new MeshBasicMaterial(params.material)
Object.assign(mesh.material, params.material)
if (params.dm){
var dm = new TextureLoader().setPath(context.path).load(params.dm);
var dm = new TextureLoader().setPath(params.path).load(params.dm);
mesh.material.map = dm;
}
if (params.nm){
mesh.material.normalMap = new TextureLoader().setPath(context.path).load(params.nm);
mesh.material.normalMap = new TextureLoader().setPath(params.path).load(params.nm);
}
if (params.em) {
mesh.material.emissiveMap = new TextureLoader().setPath(context.path).load(params.em);
mesh.material.emissiveMap = new TextureLoader().setPath(params.path).load(params.em);
}
//mesh.material = mp;
mesh.material.needsUpdate = true;
src/lib/MotionEngine.js
+5 -1
View File
@@ -4,7 +4,6 @@ class MotionEngine {
constructor() {
const aq = [];
const clock = new Clock();
this.animationQueue = aq;
function calcValues(target, values, initial, k = 1, mode = 'offset') {
@@ -42,6 +41,11 @@ class MotionEngine {
}
};
this.clearAll = function(){
aq.splice(0, aq.length);
return;
}
this.remove = function (a) {
let idx = aq.indexOf(a);
if (idx > -1) {
src/mixins/GameEnvironmentMixin.js
+2 -5
View File
@@ -114,10 +114,7 @@ export default {
*/
async loadEnvironment(scene, target){
//await gameEngine.loadPanorama(`/asset/default/43.webp`);
gameEngine.hero?.destroy();
gameEngine.dashboard?.reset();
gameEngine.activeObjects.clear();
gameEngine.physics.clear();
gameEngine.clearScene();
await this.expandScenarioData(scene);
target.objects = target.objects || {};
let l = target.objects;
@@ -131,7 +128,7 @@ export default {
gameEngine.activeObjects.add(env.scene);
}
for (let i of this.scene.data.items || []) {
let io = new InteractiveObject(i.data, gameEngine)
let io = new InteractiveObject(gameEngine, i.data)
await io.ready;
//let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);