character selector

This commit is contained in:
2025-11-08 11:14:17 +02:00
parent 26ad885772
commit 49dc4e9f7c
10 changed files with 101 additions and 36 deletions
@@ -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>
+3 -3
View File
@@ -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;