presentation

src/pages/game-objects/[[id]].vue

@@ -2,6 +2,7 @@
     <v-card :title="id == 'add' ? $l.createGameObject : $l.editGameObject" class="container my-3">
         <v-form class="pa-4" v-model="valid">
             <v-text-field :label="$l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+            <v-textarea :label="$l.description" v-model="object.description"></v-textarea>
             <v-select :label="$l.objectType" v-model="object.type" :items="$p.objectTypes" :rules="[rules.required]">
             </v-select>
             <v-file-input :label="$l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
@@ -18,17 +19,7 @@
     </v-card>
 
     <v-card :title="$l.preview" class="container my-3" v-show="object.asset">
-        <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-show="!forRendering" :src="`/asset/default/${object.asset?.name}`"></v-img>
+        <AssetPreview :object="object" ref="assetPreview" autoplay></AssetPreview>
         <v-card-actions>
             <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
                 {{ $l.captureThumbnail }}
@@ -38,8 +29,6 @@
 </template>
 
 <script>
-import { GameEngine } from '@/lib/gameEngine.js';
-let gameEngine = null;
 
 export default {
     data() {
@@ -50,20 +39,13 @@ export default {
                 required: v => v ? true : this.$l.fieldRequired,
                 requiredFile: v => (v?.size || this.id != 'add') ? true : this.$l.fieldRequired
             },
-            loading: false,
-            animations: []
+            loading: false
         }
     },
     async mounted() {
         if (this.id && this.id != 'add') {
             this.object = (await this.$api.gameObject.load(this.id)).data;
         }
-        gameEngine = new GameEngine();
-        await gameEngine.init(this.$refs.target);
-        await this.loadAsset();
-    },
-    beforeUnmount() {
-        gameEngine?.stop();
     },
     computed: {
         fileToUpload() {
@@ -74,7 +56,7 @@ export default {
         },
         forRendering() {
             return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
-        }
+        },
     },
     methods: {
         async saveAndPreview(params) {
@@ -92,54 +74,18 @@ export default {
                 if (this.id == 'add') {
                     this.$router.replace({ params: { id: this.object.id } });
                 }
-                if (!params?.thumbOnly) await this.loadAsset();
+                if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
             } catch (err) {
                 console.error(err);
             }
             this.loading = false
         },
-        async loadAsset() {
-            if (this.forRendering) {
-                gameEngine.scene.clear();
-                if (this.object.type == 'panorama2d') {
-                    let t = await gameEngine.loadTexture(`/asset/default/${this.object.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.object.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 (object) {
-                        object.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 captureThumbnail() {
-            this.object.thumb = await gameEngine.captureScreenshot();
+            this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
             await this.saveAndPreview({ thumbOnly: true });
         },
 
-        async toggleAnimation(animation){
-            animation.playing = !animation.playing;
-            gameEngine.playAnimation(
-                gameEngine.scene, 
-                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
-                animation.playing
-            );
-        },
-
         async publish() {
 
         }