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

objects locking system

Browse Source
This commit is contained in:
goynov
2025-11-13 16:32:55 +02:00
parent c8e501ff6e
commit a2f9f73e85
10 changed files with 119 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppHeader.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<v-list nav>
<v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item>
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item>
<v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item>
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
<v-divider></v-divider>
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item>
<v-list-item prepend-icon="mdi-cog-play" :title="l.play" to="/play/list"></v-list-item>
src/components/InteractiveObjects/GenenricObject.js
-14
View File
@@ -9,20 +9,6 @@ class GenericObject extends EventDispatcher{
this.object = centerOrigin(this.source.scene)
if (!data.exclude){
const bckGeometry = new SphereGeometry(getBoundingBoxMaxLength(this.object.userData.bbox)/2,8,8)
const bckMesh = new Mesh(bckGeometry, new MeshStandardMaterial({
transparent: true,
opacity:1, color: 0xaaaaaa,
alphaMap: await engine.loadTexture('locked.webp', '/static/textures/'),
}))
this.object.add(bckMesh)
engine.motionQueue.add(
{ o: bckMesh, a:{
material: { opacity: k=>0.11 + 0.52*Math.sin(k*Math.PI)},
rotation: { y: k=>k*Math.PI*2},
scale: (k,s)=>s.setScalar(1+0.11*Math.sin(2*k*Math.PI))
}, r: true, t: 3 },
)
engine.clickable.add(this.object, async e=>{
this.object._active = !this.object._active;
if (engine.dashboard){
src/components/InteractiveObjects/InteractiveObject.js
+43 -2
View File
@@ -1,4 +1,4 @@
import { Group, EventDispatcher } from "three";
import { Group, EventDispatcher, MeshStandardMaterial, Mesh, SphereGeometry } from "three";
import { GenericObject } from "./GenenricObject";
import { TextObject } from "./TextObject";
@@ -13,7 +13,8 @@ import { PuzzleGame4 } from "./PuzzleGame4";
// import { Game6 } from "./games/Game6";
import { MazeQuizGame } from "./MazeQuizGame/MazeQuizGame";
import { Particles } from "./Particles";
import { assignMaterial, assignParams } from "@/lib/MeshUtils";
import { assignMaterial, assignParams, wrapInGroup, getBoundingBoxMaxLength } from "@/lib/MeshUtils";
import { GameEngine } from "@/lib/GameEngine";
const InteractiveObjectsImports = {
GenericObject, CharacterObject, TextObject, ImageObject, VideoPlayer, Particles,
@@ -72,12 +73,52 @@ class InteractiveObject extends EventDispatcher{
this.io.addEventListener?.('finish', this.dispatchEvent.bind(this))
break;
}
if (obj.shouldBeLocked){
this.object = wrapInGroup(this.object)
this.locker = new Locker(gameEngine, this.object);
this.locker.lock();
}
assignParams(this.object, obj);
resolve(this);
});
}
}
class Locker{
static materialLocked = new MeshStandardMaterial({
transparent: true, opacity:1, color: 0xaaaaaa
})
constructor(engine, group){
const bckGeometry = new SphereGeometry(getBoundingBoxMaxLength(group.userData.bbox)/2,8,8)
const bckMesh = new Mesh(bckGeometry, Locker.materialLocked);
bckMesh.visible = false;
group.add(bckMesh)
function animate(){
engine.motionQueue.add(
{ o: bckMesh, a:{
material: { opacity: k=>0.11 + 0.52*Math.sin(k*Math.PI)},
rotation: { y: k=>k*Math.PI*2},
scale: (k,s)=>s.setScalar(1+0.11*Math.sin(2*k*Math.PI))
}, r: true, t: 3 },
)
}
this.object = bckMesh;
this.lock = function(){
bckMesh.visible = true;
//bckMesh.material.needsUpdate = true;
engine.motionQueue.clear(bckMesh);
group.__locked = true;
animate();
}
this.unlock = function(){
bckMesh.visible = false;
engine.motionQueue.clear(bckMesh);
group.__locked = false;
}
}
}
GameEngine.loadTexture('locked.webp', '/static/textures/', null, [Locker.materialLocked, 'alphaMap'])
const InteractiveObjectTypes = [
{
id: 'CharacterObject', name: 'Character'
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue
+2 -1
View File
@@ -47,7 +47,8 @@ export default {
mounted(){
this.modelValue.questions ??= [];
this.modelValue.questionPoints ??= 10;
this.modelValue.questionPenalty ??= 0
this.modelValue.questionPenalty ??= 0;
this.modelValue.exclude = true;
},
methods:{
addQuestion(){
src/components/InteractiveObjects/VideoPlayer.js
+1 -1
View File
@@ -44,7 +44,7 @@ class VideoPlayer extends EventDispatcher {
//material.opacity = 0.5;
if (data.playInHud){
engine.dashboard?.detach(plane, {
skipTransition: !data.skipTransition
skipTransition: data.skipTransition
});
}
})
src/lib/Clickable.js
+7 -1
View File
@@ -24,7 +24,13 @@ class Clickable {
this.update = function (mouse, camera, event) {
raycaster.setFromCamera(mouse, camera);
let forExecute = [];
objects.forEach(o => {
objects.filter(o=>{
do {
if (o.__locked) return false;
o = o.parent;
} while (o);
return true;
}).forEach(o => {
o.getWorldPosition(v);
if (camera.position.distanceTo(v) <= o._clickable.distance && o.visible) {
const intersects = raycaster.intersectObject(o);
src/lib/Dashboard.js
+12 -10
View File
@@ -5,6 +5,7 @@ import {
import { Text } from "troika-three-text";
class DashBoard {
#points = 0;
constructor(engine) {
let svg = p=>`<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -25,7 +26,6 @@ class DashBoard {
let updating = false;
let params = {}
let occupied = false;
let points = 0;
img.addEventListener('load', function () {
ctx.drawImage(img, 0, 0, engine.w, engine.h);
@@ -152,13 +152,13 @@ class DashBoard {
this.levelProgress = levelProgress;
this.addPoints = function(p){
points += p;
this.#points += p;
engine.motionQueue.add({
o: pointsText,
a: {rotation:{y: Math.PI}, scale:{x:1.5, y:1.5, z:1.5}},
t: 0.25,
f:()=>{
pointsText.text = points;
pointsText.text = this.#points;
pointsText.sync();
engine.motionQueue.add({
o: pointsText,
@@ -242,13 +242,11 @@ class DashBoard {
object._hud.parent?.attach(object);
hud.rotation.y = 0;
hud.visible = false;
if (!opts.skipTransition){
engine.motionQueue.add({
o: object,
a: object._hud.placement,
t: 1
});
}
engine.motionQueue.add({
o: object,
a: object._hud.placement,
t: opts.skipTransition ? 0 : 1
});
delete object._hud;
occupied = false;
hudAnimation = null;
@@ -268,6 +266,10 @@ class DashBoard {
set active(v){
this.group.visible = v;
}
get points(){
return this.#points;
}
}
class ProgressBar{
src/lib/GameEngine.js
+19 -12
View File
@@ -16,6 +16,8 @@ import { Clickable } from './Clickable.js';
import { DashBoard } from './Dashboard.js';
import { MotionEngine } from './MotionEngine.js';
THREE.Cache.enabled = true
const assetPath = '/asset/default/';
class GameEngine extends THREE.EventDispatcher{
@@ -161,7 +163,7 @@ class GameEngine extends THREE.EventDispatcher{
domNode.appendChild(renderer.domElement);
let texture = await this.loadTexture('/static/textures/bck.webp', '');
let texture = await GameEngine.loadTexture('/static/textures/bck.webp', '');
// let bck = await this.loadTexture('/static/textures/bck.webp');
// bck.premultiplyAlpha = true;
texture.mapping = THREE.EquirectangularReflectionMapping;
@@ -415,18 +417,8 @@ class GameEngine extends THREE.EventDispatcher{
})
}
async loadTexture(url, path = assetPath, progress) {
return new Promise((resolve, reject) => {
new THREE.TextureLoader().load(`${path}${url}`, texture => {
//texture.encoding = THREE.sRGBEncoding;
texture.colorSpace = THREE.SRGBColorSpace;
resolve(texture)
}, progress, reject)
})
}
async loadPanorama(url, path = assetPath) {
let t = await this.loadTexture(url, path);
let t = await GameEngine.loadTexture(url, path);
t.mapping = THREE.EquirectangularReflectionMapping;
this.scene.background = t;
this.scene.environment = t;
@@ -567,6 +559,21 @@ class GameEngine extends THREE.EventDispatcher{
this.clickable.removeAll();
this.motionQueue.clearAll();
}
static textureLoader = new THREE.TextureLoader();
static async loadTexture(url, path = assetPath, progress, assignTo) {
return new Promise((resolve, reject) => {
GameEngine.textureLoader.load(`${path}${url}`, texture => {
texture.colorSpace = THREE.SRGBColorSpace;
if (assignTo){
assignTo[0][assignTo[1]] = texture;
}
resolve(texture)
}, progress, reject)
})
}
loadTexture = GameEngine.loadTexture
}
export { GameEngine }
src/lib/MeshUtils.js
+14 -6
View File
@@ -55,16 +55,24 @@ function autoScale(object, mk = 1) {
object.scale.multiplyScalar(mk / k);
}
function wrapInGroup(object){
if (object.isWrapper) return object;
let group = new Group();
group.userData.bbox = getBoundingBox(object);
group.add(object);
group.userData.object = object;
group.isWrapper = true;
return group;
}
function centerOrigin(object){
let result = new Group();
result.userData.bbox = getBoundingBox(object);
let position = getBoundingBoxCenterPoint(result.userData.bbox, object.position).negate();
let group = wrapInGroup(object);
let position = getBoundingBoxCenterPoint(group.userData.bbox, object.position).negate();
object.position.copy(position)
result.add(object);
return result;
return group;
}
export {
assignParams, assignMaterial, autoScale, centerOrigin,
assignParams, assignMaterial, autoScale, centerOrigin, wrapInGroup,
getBoundingBox, getBoundingBoxSize, getBoundingBoxMaxLength, getBoundingBoxCenterPoint
}
src/mixins/GameEnvironmentMixin.js
+20 -8
View File
@@ -146,7 +146,13 @@ export default {
if (this.scene.data.items){
let loaded = 0;
for (let i of this.scene.data.items) {
if (this.env == 'GamePlaying'){
if (i.data.activationTriggers?.length || i.data.activationScore){
i.data.shouldBeLocked = true;
}
}
let io = await new InteractiveObject(gameEngine, i.data)
i.__io = io;
this.setObjectAttributes(l, i.data, io.object, io.source, 1);
gameEngine.activeObjects.add(io.object);
if (this.env == 'GamePlaying'){
@@ -167,8 +173,20 @@ export default {
}
}
io.addEventListener('finish', ()=>{
gameEngine.dashboard?.addPoints(i.data.points)
i.data.points = 0;
if (!i.data.pointsGiven){
gameEngine.dashboard?.addPoints(i.data.points)
}
i.data.pointsGiven = true;
this.scene.data.items.forEach(di=>{
if (di.data.activationTriggers?.includes(i.data.id)){
let idx = di.data.activationTriggers.indexOf(i.data.id)
di.data.activationTriggers.splice(idx, 1);
}
if (!di.data.activationTriggers?.length && di.__io.object.__locked &&
gameEngine.dashboard.points > di.data.activationScore){
di.__io.locker.unlock();
}
})
})
}
loaded += 1/this.scene.data.items.length
@@ -189,12 +207,6 @@ export default {
}
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();
},
targetPointerDown(){