game objects module

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

@@ -17,16 +17,15 @@
         </v-card-actions>
     </v-card>
 
-    <v-card :title="$l.preview" class="container my-3" v-if="object.asset">
-        <div ref="target" v-if="object?.asset?.type == 'bundle'"></div>
-        <v-img v-else :src="`/asset/default/${object.asset?.name}`"></v-img>
+    <v-card :title="$l.preview" class="container my-3" v-show="object.asset">
+        <div ref="target" v-show="object?.asset?.type == 'bundle'"></div>
+        <v-img v-show="object?.asset?.type == 'single'" :src="`/asset/default/${object.asset?.name}`"></v-img>
     </v-card>
 </template>
 
 <script>
 import { GameEngine } from '@/gameEngine';
-
-const gameEngine = new GameEngine();
+let gameEngine = null;
 
 export default {
     data() {
@@ -44,13 +43,15 @@ export default {
             loading: false
         }
     },
-    async created(){
+    async mounted() {
         if (this.id && this.id != 'add'){
             this.object = (await this.$api.gameObject.load(this.id)).data;
         }
+        gameEngine = new GameEngine(this.$refs.target);
+        await this.loadAsset();
     },
-    mounted() {
-        //this.$refs.target?.appendChild(gameEngine.renderer.domElement);
+    beforeUnmount(){
+        gameEngine?.stop();
     },
     computed: {
         fileToUpload(){
@@ -61,13 +62,14 @@ export default {
         }
     },
     methods: {
-        async saveAndPreview() {
+        async saveAndPreview(params) {
             this.loading = true;
             try {
                 let fd = new FormData();
                 let keys = ['name', 'type'];
                 if (this.fileToUpload) keys.push('file');
                 if (this.id != 'add') keys.push('id');
+                if (this.object.thumb) keys.push('thumb');
 
                 keys.forEach(e=>fd.append(e, this.object[e]))
                 let result = await this.$api.gameObject.save(fd);
@@ -75,13 +77,31 @@ export default {
                 if (this.id == 'add'){
                     this.$router.replace({ params: {id: this.object.id} });
                 }
+                if (!params?.thumbOnly) await this.loadAsset();
             } catch (err) {
                 console.error(err);
             }
             this.loading = false
         },
-        captureThumbnail() {
-
+        async loadAsset(){
+            if (this.object.asset?.type == 'bundle'){
+                let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+                gameEngine.scene.clear();
+                console.log(gltf)
+                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();
+            await this.saveAndPreview({thumbOnly: true});
         },
         async publish() {