character selector

src/components/InteractiveObjects/CharacterObject.js

@@ -0,0 +1,11 @@
+class CharacterObject{
+    constructor(engine, data){
+        return new Promise(async(resolve, reject)=>{
+            this.source = await engine.load(data.$go.asset.name);
+            this.object = this.source.scene;
+            resolve(this);
+        })
+    }
+}
+
+export { CharacterObject }

src/components/InteractiveObjects/CharacterObject.vue

@@ -0,0 +1,34 @@
+<template>
+    <div v-if="modelValue.go">
+        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
+    <asset-selector @select="assignCharacter" :type="['Character']">
+        <template v-slot:activator="props">
+            <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Select character</v-btn>
+        </template>
+    </asset-selector>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            active: false
+        }
+    },
+    mounted(){
+        this.active = true;
+    },
+    props:{
+        modelValue: Object
+    },
+    methods:{
+        assignCharacter(e){
+            this.modelValue.go = e.id;
+            this.modelValue.title = e.name
+        }
+    }
+}
+</script>

src/components/InteractiveObjects/InteractiveObject.js

@@ -1,20 +1,23 @@
 import { Group } from "three";
 
 import { GenericObject } from "./GenenricObject";
+import { TextObject } from "./TextObject";
+import { ImageObject } from "./ImageObject";
+import { CharacterObject } from "./CharacterObject";
+import { VideoPlayer } from "./VideoPlayer";
 import { PuzzleGame1 } from "./PuzzleGame1";
 import { PuzzleGame2 } from "./PuzzleGame2";
 // import { Game3 } from "./games/Game3";
 import { PuzzleGame4 } from "./PuzzleGame4";
 // import { Game5 } from "./games/Game5";
 // import { Game6 } from "./games/Game6";
-import { TextObject } from "./TextObject";
-import { ImageObject } from "./ImageObject";
-import { VideoPlayer } from "./VideoPlayer";
 import { MazeQuizGame } from "./MazeQuizGame/MazeQuizGame";
 import { Particles } from "./Particles";
 import { assignMaterial, assignParams } from "@/lib/MeshUtils";
 
-const InteractiveObjectsImports = { PuzzleGame1, PuzzleGame2, PuzzleGame4, MazeQuizGame, Particles };
+const InteractiveObjectsImports = { 
+    PuzzleGame1, PuzzleGame2, PuzzleGame4, 
+    GenericObject, CharacterObject, MazeQuizGame, Particles };
 
 class InteractiveObject {
     constructor(gameEngine, obj) {
@@ -61,7 +64,8 @@ class InteractiveObject {
                     this.source = gltf;
                     break;
                 case 'GenericObject':
-                    let go = await new GenericObject(gameEngine, obj) //await gameEngine.load(obj.$go.asset.name);
+                case 'CharacterObject':
+                    let go = await new InteractiveObjectsImports[obj.type](gameEngine, obj) //await gameEngine.load(obj.$go.asset.name);
                     this.source = go.source;
                     this.object = go.object;
                     break;
@@ -82,7 +86,6 @@ 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;
@@ -95,6 +98,8 @@ class InteractiveObject {
 
 const InteractiveObjectTypes = [
     {
+        id: 'CharacterObject', name: 'Character'
+    }, {
         id: 'PuzzleGame1', name: 'Puzzle Game 1'
     },{
         id: 'PuzzleGame2', name: 'Puzzle Game 2'

src/components/InteractiveObjects/PuzzleGame1.vue

@@ -1,12 +1,10 @@
 <template>
-    <v-card v-if="modelValue.go">
-        <v-card-item>
-            <v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
-            <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
-            <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-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
+        <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
+        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
     <asset-selector @select="assignTexture" :type="['Texture']">
         <template v-slot:activator="props">
             <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose image object</v-btn>

src/components/InteractiveObjects/PuzzleGame2.vue

@@ -1,12 +1,10 @@
 <template>
-    <v-card v-if="modelValue.go">
-        <v-card-item>
-            <v-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
-            <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
-            <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-number-input density="compact" label="Width" v-model="modelValue.w"></v-number-input>
+        <v-number-input density="compact" label="Height" v-model="modelValue.h"></v-number-input>
+        <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
+        <div class="text-caption text-center">{{ modelValue.title }}</div>
+    </div>
     <asset-selector @select="assignTexture" :type="['Texture']">
         <template v-slot:activator="props">
             <v-btn v-bind="props" prepend-icon="mdi-video-box" color="deep-orange-darken-4" block>Choose image object</v-btn>