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

scene switcher feature

Browse Source
This commit is contained in:
goynov
2025-12-06 09:30:50 +02:00
parent 7397c6dfe7
commit 82c3a0dec8
8 changed files with 228 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InteractiveObjects/InteractiveObject.js
+64 -21
View File
@@ -1,4 +1,5 @@
import { Group, EventDispatcher, MeshStandardMaterial, Mesh, SphereGeometry } from "three";
import { Group, MeshStandardMaterial, Mesh, SphereGeometry, Vector3 } from "three";
import { EventManager } from '@/lib/EventManager';
import { GenericObject } from "./GenenricObject";
import { TextObject } from "./TextObject";
@@ -15,16 +16,17 @@ import { ClassicPuzzle } from "./ClassicPuzzle";
// import { Game6 } from "./games/Game6";
import { MazeQuizGame } from "./MazeQuizGame/MazeQuizGame";
import { Particles } from "./Particles";
import { assignMaterial, assignParams, wrapInGroup, getBoundingBoxMaxLength } from "@/lib/MeshUtils";
import { GameEngine } from "@/lib/GameEngine";
import { SceneSwitcher } from "./SceneSwitcher";
import { assignParams, wrapInGroup, getBoundingBoxMaxLength } from "@/lib/MeshUtils";
import { GameEngine } from "@/lib/GameEngine";
const InteractiveObjectsImports = {
GenericObject, CharacterObject, TextObject, ImageObject, GltfObject, VideoPlayer, Particles,
GenericObject, CharacterObject, TextObject, ImageObject, GltfObject, VideoPlayer, Particles, SceneSwitcher,
PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, ClassicPuzzle
};
class InteractiveObject extends EventDispatcher{
constructor(gameEngine, obj) {
class InteractiveObject extends EventManager{
constructor(engine, obj) {
super();
this.name = obj.name;
return new Promise(async (resolve, reject) => {
@@ -32,7 +34,7 @@ class InteractiveObject extends EventDispatcher{
case 'Group':
this.object = new Group();
for (let g of obj.group){
let gameMesh = await new InteractiveObject(gameEngine, g);
let gameMesh = await new InteractiveObject(engine, g);
this.object.add(gameMesh.object);
}
break;
@@ -47,38 +49,72 @@ class InteractiveObject extends EventDispatcher{
case 'MazeQuizGame':
case 'ClassicPuzzle':
case 'Particles':
this.io = await new InteractiveObjectsImports[obj.type](gameEngine, obj);
case 'SceneSwitcher':
this.io = await new InteractiveObjectsImports[obj.type](engine, obj);
this.source = this.io.source || this.io;
this.object = this.io.object;
this.emits = this.io.emits;
this.io.emits?.forEach(event=>{
this.io.addEventListener?.(event, this.dispatchEvent.bind(this))
})
// this.io.emits?.forEach(event=>{
// this.io.addEventListener?.(event, this.dispatchEvent.bind(this))
// })
this.io.forwardEvents?.(this);
break;
}
if (obj.shouldBeLocked){
this.object = wrapInGroup(this.object)
this.locker = new Locker(gameEngine, this.object);
this.locker.lock();
this.activator = new (obj.activationType == 'unlock' ? LockActivator : VisibilityActivator)(engine, this.object);
this.activator.deactivate();
}
assignParams(this.object, obj);
if (obj.motion){
gameEngine.motionQueue.add({
engine.motionQueue.add({
o: this.object, ...obj.motion
});
}
if (obj.distance) {
const o = this.object;
let dstm = obj.distance;
let v = new Vector3();
o.visible = false;
engine.addEventListener('beforeRender', function () {
o.getWorldPosition(v);
var dst = engine.camera.position.distanceTo(v);
if (dst <= dstm && !o.visible) {
o.visible = true;
}else if (dst > dstm && o.visible){
o.visible = false;
}
});
}
resolve(this);
});
}
}
class Locker{
class VisibilityActivator{
constructor(engine, group){
this.deactivate = function(){
group.visible = false;
group.__active = false;
}
this.activate = function(){
group.visible = true;
group.__active = true;
}
this.isActive = function(){
return group.__active;
}
}
}
class LockActivator{
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);
const bckMesh = new Mesh(bckGeometry, LockActivator.materialLocked);
bckMesh.visible = false;
group.add(bckMesh)
function animate(){
@@ -91,24 +127,29 @@ class Locker{
)
}
this.object = bckMesh;
this.lock = function(){
this.deactivate = function(){
bckMesh.visible = true;
//bckMesh.material.needsUpdate = true;
engine.motionQueue.clear(bckMesh);
group.__locked = true;
group.__active = false;
animate();
}
this.unlock = function(){
this.activate = function(){
bckMesh.visible = false;
engine.motionQueue.clear(bckMesh);
group.__locked = false;
group.__active = true;
}
this.isActive = function(){
return group.__active;
}
}
}
GameEngine.loadTexture('locked.webp', '/static/textures/', null, [Locker.materialLocked, 'alphaMap'])
GameEngine.loadTexture('locked.webp', '/static/textures/', null, [LockActivator.materialLocked, 'alphaMap'])
const InteractiveObjectTypes = [
{
id: 'GenericObject', name: 'Generic Game Object'
},{
id: 'CharacterObject', name: 'Character'
}, {
id: 'PuzzleGame1', name: 'Puzzle Game 1'
@@ -122,6 +163,8 @@ const InteractiveObjectTypes = [
id: 'VideoPlayer', name: 'Video Player'
},{
id: 'Particles', name: 'Particles'
},{
id: 'SceneSwitcher', name: 'Scene Switcher'
}
];
src/components/InteractiveObjects/MazeQuizGame/MazeObject.js
+1
View File
@@ -126,6 +126,7 @@ class MazeObject {
go.object.scale.multiplyScalar(wallSize)
go.object.position.multiplyScalar(wallSize)
go.object.applyMatrix4(def.matrix);
go.forwardEvents?.(params.io);
root.add(go.object);
});
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js
+17 -10
View File
@@ -1,6 +1,6 @@
import { MazeObject } from "./MazeObject";
import Utils from "@/lib/Utils";
import { EventDispatcher } from "three";
import { EventManager } from '@/lib/EventManager';
const params = {
scale: 3,
@@ -17,7 +17,7 @@ const imgParams = {
}
const textParams = {
type: 'TextObject', width:0.44,
type: 'TextObject', maxWidth:0.44,
fontPath:'/static/fonts/Montserrat-Regular.ttf',
fontSize:0.025, distance: params.wallSize*2
}
@@ -37,12 +37,14 @@ const defaults = {
const tl = 4;
class MazeQuizGame extends EventDispatcher {
emits = ['finish']
class MazeQuizGame extends EventManager {
emits = ['finish', 'sceneSwitch']
constructor(engine, data) {
super();
this.data = data;
data.noPhysics = true;
params.mazeFile = data.style || 'quiz-s2.gltf';
params.io = this;
return new Promise(async (resolve, reject)=>{
let questions = data.shuffle ? Utils.shuffleArray(data.questions) : data.questions;
let def = this.generate(questions);
@@ -101,11 +103,16 @@ class MazeQuizGame extends EventDispatcher {
len,
userData: { finish: true },
objects:[
// {
// type: 'GltfObject',
// position:[0,.22,len + .52], scale: [0.33, 0.33, 0.33], rotation: [0, Math.PI/4, 0],
// value: 'trophy.glb', path: imgParams.path, distance: params.wallSize*2,
// motion: { a:{rotation: { y: k=>k*Math.PI*2 }}, r: true, t: 4 }
// }
{
type: 'GltfObject',
position:[0,.22,len + .52], scale: [0.33, 0.33, 0.33], rotation: [0, Math.PI/4, 0],
value: 'trophy.glb', path: imgParams.path, distance: params.wallSize*2,
motion: { a:{rotation: { y: k=>k*Math.PI*2 }}, r: true, t: 4 }
type: 'SceneSwitcher', switchScene: this.data.switchScene, switchType: this.data.switchType,
position:[0,.22,len + .52], scale: [0.33, 0.33, 0.33],
distance: params.wallSize*2
}
]
};
@@ -116,7 +123,7 @@ class MazeQuizGame extends EventDispatcher {
len, userData: { question, qid },
objects:[
{
...textParams, text: question.q, fontSize:0.033, width:0.55, position:[0,.55,len + .96], rotation:[0,Math.PI, 0]
...textParams, text: question.q, fontSize:0.033, maxWidth:0.55, position:[0,.55,len + .96], rotation:[0,Math.PI, 0]
}
]
}
@@ -149,7 +156,7 @@ class MazeQuizGame extends EventDispatcher {
len: 3,
objects:[
{
...textParams, color:0xc71414, text: question.h, fontSize:0.033, width:0.66, position:[0,.44,3+.96], rotation:[0,Math.PI, 0]
...textParams, color:0xc71414, text: question.h, fontSize:0.033, maxWidth:0.66, position:[0,.44,3+.96], rotation:[0,Math.PI, 0]
},{
...imgParams, value:'x.webp', position:[0,.33,3+.96], rotation:[0,Math.PI, 0]
}
src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue
+9 -1
View File
@@ -39,10 +39,13 @@
<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>
<v-select v-model="modelValue.style" :items="styles" density="compact" label="VIsual style"></v-select>
<v-select v-model="modelValue.style" :items="styles" density="compact" label="Visual style"></v-select>
<SceneSwitcher v-model="mv"></SceneSwitcher>
</template>
<script>
import SceneSwitcher from '../SceneSwitcher.vue';
export default {
props:['modelValue'],
data(){
@@ -61,6 +64,11 @@ export default {
this.modelValue.questionPenalty ??= 0;
this.modelValue.exclude = true;
},
computed:{
mv(){
return this.modelValue;
}
},
methods:{
addQuestion(){
this.modelValue.questions.push({
src/components/InteractiveObjects/SceneSwitcher.js
+38
View File
@@ -0,0 +1,38 @@
import { getBoundingBox, getBoundingBoxCenterPoint, getBoundingBoxMaxLength, centerOrigin } from "@/lib/MeshUtils";
import { SphereGeometry, Mesh, MeshStandardMaterial, BackSide, Group } from "three";
import { EventManager } from '@/lib/EventManager';
class SceneSwitcher extends EventManager{
emits = ['sceneSwitch']
constructor(engine, data){
super();
return new Promise(async(resolve, reject)=>{
this.source = this;
this.object = new Group()
if (data.switchType == 'award'){
let gltf = await engine.load('trophy.glb', '/static/meshes/scene-switcher/');
this.object.add(gltf.scene);
engine.motionQueue.add({
o: gltf.scene,
a:{rotation: { y: k=>k*Math.PI*2 }}, r: true, t: 4
})
}else if(data.switchType == 'sphere'){
let geo = new SphereGeometry(1);
let material = new MeshStandardMaterial({
map: await engine.loadTexture(data.$go_env.asset.name)
})
let sphere = new Mesh(geo, material);
sphere.position.y = 0.5;
this.object.add(sphere);
}else{
//sensor, TODO!!!, to be implemented
}
engine.clickable.add(this.object, async e=>{
this.dispatchEvent({type:'sceneSwitch', scene: data.switchScene});
})
resolve(this);
})
}
}
export { SceneSwitcher }
src/components/InteractiveObjects/SceneSwitcher.vue
+53
View File
@@ -0,0 +1,53 @@
<template>
<div>
<v-select label="Switch to scene" v-model="modelValue.switchScene" density="compact"
:items="scenes"></v-select>
<v-select label="Switch type" v-model="modelValue.switchType" density="compact"
:items="switchTypes"></v-select>
<!-- <div class="text-caption text-center">{{ modelValue.title }}</div> -->
</div>
</template>
<script>
import { computed } from 'vue';
import OffsetLine from '../SceneDesigner/OffsetLine.vue';
export default {
components:{ OffsetLine },
data(){
return {
active: false,
switchTypes: [
{ title: 'Award', value: 'award' },
{ title: 'Sphere', value: 'sphere' },
{ title: 'Sensor', value: 'sensor' }
]
}
},
mounted(){
this.active = true;
},
props:{
modelValue: Object
},
computed:{
scenes(){
return this.modelValue.__root.scenes.map(s=>({title: s.data.title, value: s.data.id}))
},
},
methods:{
},
__transform(data){
data.go_env = computed(()=>{
if (data.switchType == 'sphere' && data.switchScene){
return data.__root.scenes.find(s=>s.data.id == data.switchScene).data.environment;
}
})
}
}
</script>
src/components/SceneDesigner/GameObject.vue
+37 -32
View File
@@ -16,12 +16,14 @@
</image>
</g>
</teleport>
<teleport to=".scene-designer .lines" v-if="active && targetScene">
<OffsetLine :x1="targetScene.vd.x1" :y1="targetScene.vd.y1"
:x2="modelValue.__this.vd.x1" :y2="modelValue.__this.vd.y1" :o1="88" :o2="55"
class="scene-switcher" marker-start="url(#arrow)" ></OffsetLine>
</teleport>
<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
<asset-selector @select="assignGameObject" :type="['GameObject']">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
</template>
</asset-selector>
<v-select label="Game Object Type" v-model="modelValue.type" density="compact" hide-details
:items="InteractiveObjectTypes.map(e=>({title: e.name, value: e.id}))"></v-select>
<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> -->
@@ -35,10 +37,10 @@
<v-number-input density="compact" label="Level score should be above" v-model="modelValue.activationScore"></v-number-input>
<v-select density="compact" label="Following elements should be completed" v-model="modelValue.activationTriggers"
:items="parent.data.items.filter(v=>!v.data.exclude && v.data!==modelValue).map(v=>({title: v.data.title, value: v.data.id}))" multiple ></v-select>
<v-select label="Activation Type" :items="activationTypes" density="compact" v-model="modelValue.activationType"></v-select>
</v-card>
</v-card>
</template>
<script>
@@ -52,24 +54,18 @@ import ClassicPuzzle from '../InteractiveObjects/ClassicPuzzle.vue';
import Particles from '../InteractiveObjects/Particles.vue';
import GenericObject from '../InteractiveObjects/GenericObject.vue';
import CharacterObject from '../InteractiveObjects/CharacterObject.vue';
import SceneSwitcher from '../InteractiveObjects/SceneSwitcher.vue';
import OffsetLine from './OffsetLine.vue';
import { InteractiveObjectTypes } from '../InteractiveObjects/InteractiveObject';
const components = {
SvgIcon, OffsetLine, GenericObject, CharacterObject, VideoPlayer, SceneSwitcher,
PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, ClassicPuzzle
};
export default {
emits:['target', 'preview'],
components: {
SvgIcon, OffsetLine, GenericObject, CharacterObject, VideoPlayer,
PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, ClassicPuzzle
},
data(){
return {
active: false
}
},
mounted(){
this.active = true;
this.modelValue.points ??= 10;
this.modelValue.activationScore ??= 0;
},
props:{
//context: Object,
modelValue: Object,
@@ -79,6 +75,23 @@ export default {
visible: Boolean,
parent: Object
},
components,
data(){
return {
InteractiveObjectTypes,
active: false,
activationTypes: [{ title:'Unlock', value:'unlock'}, { title:'Appear', value:'appear'}]
}
},
mounted(){
this.active = true;
this.modelValue.points ??= 10;
this.modelValue.activationScore ??= 0;
this.modelValue.type ??= 'GenericObject';
if (components[this.modelValue.type].__transform){
components[this.modelValue.type].__transform(this.modelValue)
}
},
computed:{
showInView(){
this.vd.__showInView = this.visible && this.parent.visible;
@@ -86,7 +99,10 @@ export default {
},
mv(){
return this.modelValue
}
},
targetScene(){
return this.modelValue.__root.scenes.find(s=>s.data.id == this.modelValue?.switchScene)
},
},
steps: [['x1', 'y1']],
name: 'game-object',
@@ -94,17 +110,6 @@ export default {
methods:{
intersect(v){
return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
},
assignGameObject(e){
this.modelValue.go = e.id;
if (this.modelValue.id == this.modelValue.title){
this.modelValue.title = e.name
}
if (e.type == 'InteractiveObject'){
this.modelValue.type = e.id;
}else{
this.modelValue.type = 'GenericObject'
}
}
}
}