refactoring

src/components/InteractiveObjects/GenericObject.vue

@@ -0,0 +1,10 @@
+<template>
+</template>
+
+<script>
+
+export default {
+//for now this will be dummy
+}
+
+</script>

src/components/InteractiveObjects/InteractiveObject.js

@@ -1,7 +1,4 @@
-//import { Hint } from "./Hint";
+import { Group } from "three";
-import { Group, AnimationMixer, LoopPingPong, Vector3 } from "three";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { assignMaterial, assignParams } from "@/lib/MeshUtils";
 import { PuzzleGame1 } from "./PuzzleGame1";
 import { PuzzleGame2 } from "./PuzzleGame2";
 // import { Game3 } from "./games/Game3";
@@ -19,8 +16,8 @@ class InteractiveObject {
         this.name = obj.name;
         this.ready = new Promise((resolve, reject) => {
             let mesh;
-            switch (obj.id) {
+            switch (obj.type || 'GenericObject') {
-                case 'group':
+                case 'Group':
                     mesh = new Group();
                     obj.group.forEach(g => {
                         let go = new InteractiveObject(g, context);
@@ -30,51 +27,18 @@ class InteractiveObject {
                     });
                     resolve(mesh);
                     break;
-                case 'text':
+                case 'Text':
                     let text = new TextObject(obj, context);
                     resolve(text.object);
                     break;
-                case 'mesh':
+                case 'Image':
-                    mesh = obj.value;
-                    resolve(mesh);
-                    break;
-                case 'image':
                     let imo = new ImageObject(obj, context);
                     mesh = imo.object;
                     resolve(mesh);
                     break;
-                case 'hint':
+                case 'GenericObject':
-                    let hint = new Hint(obj, context);
+                    let promise = context.load(`/asset/default/${obj.$go.asset.name}`);
-                    mesh = hint.object;
+                    promise.then(resolve);
-                    resolve(mesh);
-                    break;
-                case 'gltf':
-                    //console.log('loadingg', obj.value)
-                    new GLTFLoader().load(obj.value, (gltf) => {
-                        let gltfObj = gltf.scene;
-                        gltf.scene.traverse(function (object) {
-                            object.frustumCulled = false;
-                            if (obj.name && obj.name == object.name) {
-                                gltfObj = object;
-                            }
-                            // object.castShadow = true;
-                            // object.receiveShadow = true;
-                        });
-                        assignMaterial(gltfObj, obj, context);
-                        if (gltf.animations && gltf.animations.length) {
-                            let mixer = new AnimationMixer(gltfObj);
-                            context.mixers.push(mixer);
-                            let action = mixer.clipAction(gltf.animations[0]);
-                            action.setLoop(LoopPingPong);
-                            action.play();
-                        }
-                        resolve(gltfObj);
-                    });
-                    break;
-                case 'asset':
-                    mesh = context.assets[obj.value].clone();
-                    assignMaterial(mesh, obj, context);
-                    resolve(mesh);
                     break;
                 case 'PuzzleGame1':
                 case 'PuzzleGame2':
@@ -94,41 +58,6 @@ class InteractiveObject {
             }
         });
         this.ready.then((mesh) => {
-            mesh.go = {};
-            // let restriction;
-            // if (!context.disableRestrictions && obj.restriction) {
-            //     restriction = {
-            //         type: 'deny',
-            //         a: [obj.room.localToWorld(new Vector3().fromArray(obj.restriction[0])), obj.room.localToWorld(new Vector3().fromArray(obj.restriction[1]))]
-            //     };
-            //     context.areas.push(restriction);
-            // }
-            mesh.go.finish = () => {
-                if (obj.finish) {
-                    var f;
-                    if (obj.finish.nextAction) {
-                        var next = obj.finish.nextAction;
-                        delete obj.finish.nextAction;
-                        f = () => {
-                            if (next.activate) {
-                                context.activate(next.activate);
-                            }
-                        };
-                    }
-                    var me = obj.finish._ || {};
-                    delete obj.finish._;
-                    context.motionEngine.add({ o: mesh, a: obj.finish, t: me.t || 1, f: me.f || f, d: me.d || 0 });
-                }
-                if (restriction) context.areas.splice(context.areas.indexOf(restriction), 1);
-            };
-            if (mesh.object) mesh.object.onfinish = mesh.go.finish;
-            assignParams(mesh, obj);
-            obj.animation && context.motionEngine.add({
-                o: mesh,
-                a: obj.animation.motion,
-                r: obj.animation.repeat,
-                t: obj.animation.duration || 1
-            });
             this.object = mesh;
         });
     }

src/components/InteractiveObjects/VideoPlayer.js

@@ -30,7 +30,7 @@ class VideoPlayer {
                         vi.pause();
                     }
                 });
-                resolve(plane);
+                resolve(this);
             })
             vi.addEventListener('play', ()=>{
                 if (context.dashboard?.active){
@@ -48,7 +48,7 @@ class VideoPlayer {
                             scale: plane.scale.clone()
                         }
                     }
-                    console.log(data.location)
+                    //console.log(data.location)
                     context.dashboard.group.attach(plane);
                     //plane.applyMatrix4(m.invert())
 

src/components/InteractiveObjects/VideoPlayer.vue

@@ -1,15 +1,15 @@
 <template>
-    <asset-selector @select="assignVideoObject" :type="['Descriptive']">
-        <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>
-        </template>
-    </asset-selector>
     <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>
+    <asset-selector @select="assignVideoObject" :type="['Descriptive']">
+        <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>
+        </template>
+    </asset-selector>
 </template>
 
 <script>

src/components/SceneDesigner/GameObject.vue

@@ -23,8 +23,8 @@
         </v-form>
     </v-card>
     
-    <v-container v-if="selected && modelValue.io">
+    <v-container v-if="selected && modelValue.type">
-        <component :is="modelValue.io.id" v-model="modelValue.io"></component>
+        <component :is="modelValue.type" v-model="mv"></component>
     </v-container>
 </template>
 
@@ -35,10 +35,11 @@ import Utils from '@/lib/Utils';
 import VideoPlayer from '../InteractiveObjects/VideoPlayer.vue';
 import PuzzleGame1 from '../InteractiveObjects/PuzzleGame1.vue';
 import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
+import GenericObject from '../InteractiveObjects/GenericObject.vue';
 
 export default {
   emits:['target', 'preview'],
-  components: { SvgIcon, VideoPlayer, PuzzleGame1, MazeQuizGame },
+  components: { SvgIcon, VideoPlayer, PuzzleGame1, MazeQuizGame, GenericObject },
     data(){
         return {
             active: false
@@ -60,6 +61,9 @@ export default {
         showInView(){
             this.vd.__showInView = this.visible && this.parent.visible;
             return this.vd.__showInView;
+        },
+        mv(){
+            return this.modelValue
         }
     },
     steps: [['x1', 'y1']],
@@ -76,9 +80,9 @@ export default {
                 delete this.modelValue.io;
             }
             if (e.type == 'InteractiveObject'){
-                this.modelValue.io = {
+                this.modelValue.type = e.id;
-                    id: e.id
+            }else{
-                };
+                this.modelValue.type = 'Object3D'
             }
         }
     }

src/mixins/GameEnvironmentMixin.js

@@ -129,24 +129,21 @@ export default {
                 gameEngine.activeObjects.add(env.scene);
             }
             for (let i of this.scene.data.items || []) {
-                if (i.data.io){
+                let io = new InteractiveObject(i.data, gameEngine)
-                    i.data.$io = new InteractiveObject(i.data.io, gameEngine)
+                await io.ready;
-                    i.data.$io.ready.then(o=>{
+
-                        this.setObjectAttributes(l, i.data, { scene: o }, 1);
+                //let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
-                        gameEngine.activeObjects.add(o);
+                let objKey = (i.data.type == 'GenericObject' || !i.data.type) ? 'scene' : 'object'
-                    })
+                console.log(i.data, io.object)
-                }else{
+                this.setObjectAttributes(l, i.data, io.object, 1, objKey);
-                    let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
+                gameEngine.activeObjects.add(io.object[objKey]);
-                    this.setObjectAttributes(l, i.data, gltf, 1);
+                if (this.env == 'GamePlaying'){
-                    gameEngine.activeObjects.add(gltf.scene);
+                    if (i.data.$go.type == 'player3d'){
-                    if (this.env == 'GamePlaying'){
+                        let hero = new Hero(io.object, i.data.$go);
-                        if (i.data.$go.type == 'player3d'){
+                        hero.init(gameEngine);
-                            let hero = new Hero(gltf, i.data.$go);
+                    }else{
-                            hero.init(gameEngine);
+                        if (io.object.animations?.length){
-                        }else{
+                            gameEngine.playAnimation(gameEngine.scene, io.object.animations[0]);
-                            if (gltf.animations?.length){
-                                gameEngine.playAnimation(gameEngine.scene, gltf.animations[0]);
-                            }
                         }
                     }
                 }
@@ -184,22 +181,22 @@ export default {
             }
         },
 
-        setObjectAttributes(l, data, o, autoScaleFactor = 1){
+        setObjectAttributes(l, data, o, autoScaleFactor = 1, objectKey = 'scene'){
             if (l[data.id]){
                 ['position', 'scale', 'rotation'].forEach(p=>{
-                    o.scene[p].copy(l[data.id][p])
+                    o[objectKey][p].copy(l[data.id][p])
                 })
             }else{
-                gameEngine.autoScale(o.scene, autoScaleFactor);
+                gameEngine.autoScale(o[objectKey], autoScaleFactor);
             }
             l[data.id] = l[data.id] || {};
             ['position', 'scale', 'rotation', 'visible'].forEach(p=>{
-                l[data.id][p] = o.scene[p];
+                l[data.id][p] = o[objectKey][p];
             })
-            l[data.id].__o = o.scene;
+            l[data.id].__o = o[objectKey];
             l[data.id].__g = o;
             l[data.id].__title = data.title;
-            o.scene.__pn_id = data.id;
+            o[objectKey].__pn_id = data.id;
         },
 
         async toggleAnimation(animation){