dev

2025-03-18 12:21:21 +02:00
parent eaa46eeda8
commit 1f6ee77c24
17 changed files with 407 additions and 275 deletions
@@ -0,0 +1,66 @@
+<template>
+    <v-chip-group variant="flat" v-if="!hideFilter" class="pa-4" multiple column v-model="selectedTypes">
+        <v-chip v-for="(f,i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color" filter></v-chip>
+    </v-chip-group>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <!-- <router-link :to="`/game-objects/${v.id}`"> -->
+                <v-img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></v-img>
+                <!-- </router-link> -->
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-btn density="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" 
+                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-6"></v-btn>
+                    <v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)" 
+                        color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
+                    <slot name="action-buttons" v-bind:object="v"></slot>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-dialog v-model="previewDialog" width="auto" max-width="1200">
+        <AssetPreview :object="previewObject" autoplay></AssetPreview>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    props:[
+        'modelValue', 'query', 'hideFilter'
+    ],
+    emits:['select', 'preview'],
+    data(){
+        return {
+            items: [],
+            q: {},
+            selectedTypes: this.$p.objectTypes.map(f=>f.value),
+            previewObject: null,
+            previewDialog: false,
+        }
+    },
+    
+    async created(){
+        await this.load();
+    },
+
+    watch:{
+        async selectedTypes(n){
+            this.q.type = { $in: n };
+            await this.load();
+        }
+    },
+
+    methods:{
+        async load(){
+            Object.assign(this.q, this.query || {});
+            this.items = (await this.$api.gameObject.search(this.q)).data.data;
+        },
+        preview(v){
+            this.previewObject = v;
+            this.previewDialog = true;
+        }
+    }
+}
+</script>
@@ -0,0 +1,97 @@
+<template>
+    <div v-show="forRendering">
+        <div ref="target"></div>
+        <v-slide-group show-arrows>
+            <v-slide-group-item v-for="(a, i) in animations" :key="i" v-slot="{ isSelected }">
+                <v-btn :color="isSelected ? 'primary' : undefined" class="ma-2"
+                    :prepend-icon="'mdi-' + (a.playing ? 'stop' : 'play')" rounded @click="toggleAnimation(a)">
+                    {{ a.name }}
+                </v-btn>
+            </v-slide-group-item>
+        </v-slide-group>
+    </div>
+    <v-img v-if="obj && !forRendering && obj.type == 'object2d'" :src="`/asset/default/${obj.asset?.name}`"></v-img>
+    <video v-if="obj && !forRendering && obj.type == 'video'" controls :autoplay="autoplay ? 'autoplay' : ''" 
+        :src="`/asset/default/${obj.asset?.name}`"></video>
+</template>
+
+<script>
+import { GameEngine } from '@/lib/gameEngine.js';
+let gameEngine = null;
+
+export default{
+    props:{
+        object: Object,
+        objectId: Number,
+        autoplay: Boolean
+    },
+    data(){
+        return {
+            animations: [],
+            obj: null
+        }
+    },
+    async mounted(){
+        if (this.object) {
+            this.obj = this.object;
+        }else{
+            this.obj = (await this.$api.gameObject.load(this.objectId)).data; 
+        }
+    },
+    beforeUnmount() {
+        gameEngine?.stop();
+    },
+    watch:{
+        async obj(){
+            gameEngine = new GameEngine();
+            this.gameEngine = gameEngine;
+            await gameEngine.init(this.$refs.target);
+            await this.loadAsset();
+        }
+    },
+    computed:{
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.obj?.type)?.render
+        }
+    },
+    methods:{
+        async loadAsset() {
+            if (this.forRendering) {
+                gameEngine.scene.clear();
+                if (this.obj.type == 'panorama2d') {
+                    let t = await gameEngine.loadTexture(`/asset/default/${this.obj.asset.name}`);
+                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
+                    gameEngine.scene.background = t;
+                    gameEngine.scene.environment = t;
+                    gameEngine.scene.add(gameEngine.camera);
+                } else {
+                    let gltf = await gameEngine.load(`/asset/default/${this.obj.asset.name}`);
+                    console.debug('GLTF', gltf);
+                    this.loadedAsset = gltf;
+                    this.animations = gltf.animations.map(a => ({
+                        name: a.name, id: a.uuid
+                    }));
+                    let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
+                    gltf.scene.traverse(function (o) {
+                        o.frustumCulled = false;
+                    });
+                    gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
+                    gameEngine.controls.target.set((bb.max.x + bb.min.x) / 2, (bb.max.y + bb.min.y) / 2, (bb.max.z + bb.min.z) / 2)
+                    gameEngine.controls.update();
+                    gameEngine.scene.add(gltf.scene);
+                    //gameEngine.scene.add(gameEngine.light);
+                }
+            }
+        },
+
+        async toggleAnimation(animation){
+            animation.playing = !animation.playing;
+            gameEngine.playAnimation(
+                gameEngine.scene, 
+                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
+                animation.playing
+            );
+        },
+    }
+}
+</script>
@@ -0,0 +1,39 @@
+<template>
+    <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
+    <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
+        <v-card title="Assets">
+            <AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
+            <v-card-actions>
+                <v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    props:[
+        'modelValue', 'type'
+    ],
+    emits:['select'],
+    data(){
+        return {
+            query: {
+                type: { $in: this.$p.objectTypes.filter(t=>t.type == this.type || !this.type).map(t=>t.value) }
+            },
+            activatorProps:{},
+            dialog: false
+        }
+    },
+    
+    async created(){},
+
+    methods:{
+        select(v){
+            this.$emit('select', { id: v.id, name: v.name });
+            this.dialog = false;
+        }
+    }
+}
+</script>