character selector
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
|
||||
<v-card title="Assets">
|
||||
<v-container v-if="type?.includes('GameObject')">
|
||||
<v-btn v-for="(v, i) in InteractiveObjectTypes" @click="select(v, 'InteractiveObject')">{{ v.id }}</v-btn>
|
||||
<v-btn v-for="(v, i) in InteractiveObjectTypes" @click="select(v, 'InteractiveObject')">{{ v.name }}</v-btn>
|
||||
</v-container>
|
||||
<AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
|
||||
<v-card-actions>
|
||||
|
||||
@@ -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 }
|
||||
@@ -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>
|
||||
@@ -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'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</g>
|
||||
</teleport>
|
||||
<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
|
||||
<asset-selector @select="assignGameObject" :type="['GameObject', 'Player']">
|
||||
<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>
|
||||
@@ -37,10 +37,11 @@ import PuzzleGame2 from '../InteractiveObjects/PuzzleGame2.vue';
|
||||
import MazeQuizGame from '../InteractiveObjects/MazeQuizGame/MazeQuizGame.vue';
|
||||
import Particles from '../InteractiveObjects/Particles.vue';
|
||||
import GenericObject from '../InteractiveObjects/GenericObject.vue';
|
||||
import CharacterObject from '../InteractiveObjects/CharacterObject.vue';
|
||||
|
||||
export default {
|
||||
emits:['target', 'preview'],
|
||||
components: { SvgIcon, GenericObject, VideoPlayer, PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, },
|
||||
components: { SvgIcon, GenericObject, CharacterObject, VideoPlayer, PuzzleGame1, PuzzleGame2, MazeQuizGame, Particles, },
|
||||
data(){
|
||||
return {
|
||||
active: false
|
||||
@@ -78,7 +79,6 @@ export default {
|
||||
this.modelValue.go = e.id;
|
||||
if (this.modelValue.id == this.modelValue.title){
|
||||
this.modelValue.title = e.name
|
||||
delete this.modelValue.io;
|
||||
}
|
||||
if (e.type == 'InteractiveObject'){
|
||||
this.modelValue.type = e.id;
|
||||
|
||||
Reference in New Issue
Block a user