From 7180cfeb7f14c469981001642e9b6acbdbcbf70c Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Wed, 6 Nov 2024 20:09:02 +0200
Subject: [PATCH] game object module

---
 backend/app/bl/GameObjectsManager.js          |   4 +-
 .../controllers/api/GameObjectsController.js  |   5 +
 result.json                                   |   1 -
 src/App.vue                                   |   6 +-
 src/components/AppFooter.vue                  |   2 +-
 src/components/AppHeader.vue                  |   4 +-
 src/components/Home.vue                       |   8 +-
 src/gameEngine/index.js                       |  46 ++++++--
 src/layouts/default.vue                       |   4 -
 src/pages/game-objects/[[id]].vue             | 103 ++++++++++++------
 src/pages/game-objects/list.vue               |  37 +++++--
 src/plugins/api.js                            |   3 +
 src/plugins/index.js                          |   2 +
 src/plugins/lang.js                           |   7 +-
 src/plugins/params.js                         |  37 +++++++
 vite.config.mjs                               |   2 +-
 16 files changed, 201 insertions(+), 70 deletions(-)
 delete mode 100644 result.json
 create mode 100644 src/plugins/params.js

diff --git a/backend/app/bl/GameObjectsManager.js b/backend/app/bl/GameObjectsManager.js
index 4ef96b6..2507f23 100644
--- a/backend/app/bl/GameObjectsManager.js
+++ b/backend/app/bl/GameObjectsManager.js
@@ -117,7 +117,9 @@ class GameObjectsManager{
             }else{
                 object.asset.type = 'single';
                 await fs.promises.copyFile(src, def + ext);
-                await this.addThumb(object, src);
+                if (['.jpg', '.png', '.webp'].includes(ext)){
+                    await this.addThumb(object, src);
+                }
             }
         }
 
diff --git a/backend/controllers/api/GameObjectsController.js b/backend/controllers/api/GameObjectsController.js
index daabf50..0ac9d17 100644
--- a/backend/controllers/api/GameObjectsController.js
+++ b/backend/controllers/api/GameObjectsController.js
@@ -42,6 +42,11 @@ class GameObjectsController{
             res.json(object);
         })
 
+        router.delete('/:id', async (req, res)=>{
+            await gameObject.remove(req.params.id);
+            res.json({status: 'OK'});
+        })
+
         app.webServer.xapp.use(this.route, router);
     }
 }
diff --git a/result.json b/result.json
deleted file mode 100644
index f2857b1..0000000
--- a/result.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"comment":"/**\r\n * Application layer manager\r\n */","meta":{"range":[188,3908],"filename":"GameObjectsManager.js","lineno":11,"columnno":0,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000022","name":"GameObjectsManager","type":"ClassDeclaration","paramnames":[]}},"classdesc":"Application layer manager","name":"GameObjectsManager","longname":"GameObjectsManager","kind":"class","scope":"global"},{"comment":"/**\r\n     * Plugin initializer\r\n     * @param {App} app The Application\r\n     */","meta":{"range":[333,3790],"filename":"GameObjectsManager.js","lineno":18,"columnno":4,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000027","name":"GameObjectsManager#init","type":"MethodDefinition","paramnames":["app"]},"vars":{"":null}},"description":"Plugin initializer","params":[{"type":{"names":["App"]},"description":"The Application","name":"app"}],"name":"init","longname":"GameObjectsManager#init","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Gets last asset Id from database\r\n         * @returns {Number} Last Asset Id\r\n         */","meta":{"range":[505,881],"filename":"GameObjectsManager.js","lineno":25,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000041","name":"this.getLastId","type":"FunctionExpression","paramnames":[]},"vars":{"ag":"GameObjectsManager#getLastId~ag"}},"description":"Gets last asset Id from database","returns":[{"type":{"names":["Number"]},"description":"Last Asset Id"}],"name":"getLastId","longname":"GameObjectsManager#getLastId","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Creates a game object\r\n         * @param {Context} ctx Request context\r\n         * @param {GameObject} data Asset data\r\n         */","meta":{"range":[1050,1359],"filename":"GameObjectsManager.js","lineno":44,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000071","name":"this.create","type":"FunctionExpression","paramnames":["ctx","data"]},"vars":{"data.id":"data.id"}},"description":"Creates a game object","params":[{"type":{"names":["Context"]},"description":"Request context","name":"ctx"},{"type":{"names":["GameObject"]},"description":"Asset data","name":"data"}],"name":"create","longname":"GameObjectsManager#create","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Retrieves game object from database\r\n         * @param {Number} id Game object ID\r\n         * @returns {GameObject} The game object\r\n         */","meta":{"range":[1541,1635],"filename":"GameObjectsManager.js","lineno":58,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000123","name":"this.read","type":"FunctionExpression","paramnames":["id"]}},"description":"Retrieves game object from database","params":[{"type":{"names":["Number"]},"description":"Game object ID","name":"id"}],"returns":[{"type":{"names":["GameObject"]},"description":"The game object"}],"name":"read","longname":"GameObjectsManager#read","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Updates game object into the database\r\n         * @param {Context} ctx Request context\r\n         * @param {GameObject} data Game object\r\n         */","meta":{"range":[1821,1935],"filename":"GameObjectsManager.js","lineno":67,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000141","name":"this.update","type":"FunctionExpression","paramnames":["ctx","data"]}},"description":"Updates game object into the database","params":[{"type":{"names":["Context"]},"description":"Request context","name":"ctx"},{"type":{"names":["GameObject"]},"description":"Game object","name":"data"}],"name":"update","longname":"GameObjectsManager#update","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Removes game object from database\r\n         * @param {Number} id Game object ID\r\n         */","meta":{"range":[2065,2157],"filename":"GameObjectsManager.js","lineno":75,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000163","name":"this.remove","type":"FunctionExpression","paramnames":["id"]}},"description":"Removes game object from database","params":[{"type":{"names":["Number"]},"description":"Game object ID","name":"id"}],"name":"remove","longname":"GameObjectsManager#remove","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Assigns a file to a game object\r\n         * @param {GameObject} object Game object\r\n         * @param {File} tmpFile A file\r\n         */","meta":{"range":[2331,3104],"filename":"GameObjectsManager.js","lineno":84,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000181","name":"this.addFile","type":"FunctionExpression","paramnames":["object","tmpFile"]},"vars":{"i":"GameObjectsManager#addFile~i","ofn":"GameObjectsManager#addFile~ofn","ext":"GameObjectsManager#addFile~ext","src":"GameObjectsManager#addFile~src","def":"GameObjectsManager#addFile~def","object.file":"object.file","result":"GameObjectsManager#addFile~result","object.file.assets":"object.file.assets","":null}},"description":"Assigns a file to a game object","params":[{"type":{"names":["GameObject"]},"description":"Game object","name":"object"},{"type":{"names":["File"]},"description":"A file","name":"tmpFile"}],"name":"addFile","longname":"GameObjectsManager#addFile","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Assigns a thumbnail to a game object\r\n         * @param {GameObject} object Game object\r\n         * @param {File} thumbSrc A thumbnail\r\n         */","meta":{"range":[3289,3528],"filename":"GameObjectsManager.js","lineno":109,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000320","name":"this.addThumb","type":"FunctionExpression","paramnames":["object","thumbSrc"]},"vars":{"dest":"GameObjectsManager#addThumb~dest","object.file.thumb":"object.file.thumb"}},"description":"Assigns a thumbnail to a game object","params":[{"type":{"names":["GameObject"]},"description":"Game object","name":"object"},{"type":{"names":["File"]},"description":"A thumbnail","name":"thumbSrc"}],"name":"addThumb","longname":"GameObjectsManager#addThumb","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n         * Returns list of GameObjects\r\n         * @param {Object} query Query to DB \r\n         * @returns {GameObject[]} Array of game objects\r\n         */","meta":{"range":[3711,3783],"filename":"GameObjectsManager.js","lineno":120,"columnno":8,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000367","name":"this.list","type":"FunctionExpression","paramnames":["query"]}},"description":"Returns list of GameObjects","params":[{"type":{"names":["Object"]},"description":"Query to DB","name":"query"}],"returns":[{"type":{"names":["Array.<GameObject>"]},"description":"Array of game objects"}],"name":"list","longname":"GameObjectsManager#list","kind":"function","memberof":"GameObjectsManager","scope":"instance"},{"comment":"/**\r\n     * Class starter\r\n     * @param {App} app The application\r\n     */","meta":{"range":[3879,3905],"filename":"GameObjectsManager.js","lineno":129,"columnno":4,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000376","name":"GameObjectsManager#start","type":"MethodDefinition","paramnames":["app"]},"vars":{"":null}},"description":"Class starter","params":[{"type":{"names":["App"]},"description":"The application","name":"app"}],"name":"start","longname":"GameObjectsManager#start","kind":"function","memberof":"GameObjectsManager","scope":"instance","async":true},{"comment":"/**\r\n * GameObject entity\r\n */","meta":{"range":[3944,4089],"filename":"GameObjectsManager.js","lineno":137,"columnno":0,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000381","name":"GameObject","type":"ClassDeclaration","paramnames":[]}},"classdesc":"GameObject entity","name":"GameObject","longname":"GameObject","kind":"class","scope":"global"},{"comment":"/**\r\n     * Game object name\r\n     * @type string\r\n     */","meta":{"range":[4032,4044],"filename":"GameObjectsManager.js","lineno":142,"columnno":4,"path":"D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl","code":{"id":"astnode100000384","name":"name","type":"ClassProperty"}},"description":"Game object name","type":{"names":["string"]},"name":"name","longname":"GameObject#name","kind":"member","memberof":"GameObject","scope":"instance"},{"kind":"package","longname":"package:undefined","files":["D:\\IMI\\ProNature\\pronature-platform\\backend\\app\\bl\\GameObjectsManager.js"]}]
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 660483f..ab8088f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,9 @@
 <template>
   <v-app>
-    <v-main>
-      <router-view :key="$route.fullPath"/>
-    </v-main>
+    <router-view :key="$route.fullPath" />
   </v-app>
 </template>
 
 <script setup>
-  //
+//
 </script>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index e0d6cec..b3581a3 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-footer height="40" app>
+  <v-footer height="0" app>
     
   </v-footer>
 </template>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index a0c786e..20e85d9 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-app-bar color="primary" prominent>
+    <v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
         <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
         <v-app-bar-title>ProNature Administrative Console</v-app-bar-title>
         <v-menu>
@@ -14,7 +14,7 @@
         </v-menu>
     </v-app-bar>
 
-    <v-navigation-drawer class="bg-secondary" ocation="$vuetify.display.mobile ? 'bottom' : undefined" expand-on-hover rail>
+    <v-navigation-drawer class="bg-secondary" expand-on-hover rail>
         <v-list>
             <v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
         </v-list>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 0332057..789c43b 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,14 +1,12 @@
 <template>
   <v-container class="fill-height">
-    <v-responsive
-      class="align-centerfill-height mx-auto"
-    >
+    <v-responsive class="align-centerfill-height mx-auto">
+
 
-      
     </v-responsive>
   </v-container>
 </template>
 
 <script setup>
-  //
+//
 </script>
diff --git a/src/gameEngine/index.js b/src/gameEngine/index.js
index 8cc7615..9569510 100644
--- a/src/gameEngine/index.js
+++ b/src/gameEngine/index.js
@@ -6,17 +6,19 @@ import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.j
 import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
 class GameEngine {
-    constructor(domNode) {
+    async init(domNode) {
         const width = 1200, height = 800;
 
-        const camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 10000);
-        //camera.position.set(-10, -10, 50);
+        const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
+        camera.position.set(1, 0, 1);
 
         const scene = new THREE.Scene();
         // this.light = new THREE.AmbientLight( 0x404040, 0 ); // soft white light
         // scene.add( this.light );
 
         function animate(time) {
+            let delta = clock.getDelta();
+            mixer.update(delta);
             renderer.render(scene, camera);
             controls.update();
         }
@@ -27,6 +29,11 @@ class GameEngine {
             preserveDrawingBuffer: true
         });
         renderer.setPixelRatio( window.devicePixelRatio );
+        //renderer.toneMapping = THREE.CineonToneMapping;
+        //renderer.toneMappingExposure = 1.2;
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+        renderer.outputEncoding = THREE.sRGBEncoding;
         const controls = new OrbitControls( camera, renderer.domElement );
         //const controls = new MapControls( camera, renderer.domElement );
         this.transformControls = new TransformControls( camera, renderer.domElement );
@@ -38,19 +45,25 @@ class GameEngine {
         renderer.setSize(width, height);
         renderer.setAnimationLoop(animate);
 
+        const mixer = new THREE.AnimationMixer(this.scene);
+        const clock = new THREE.Clock();
+
+        this.clock = clock;
         this.renderer = renderer;
         this.scene = scene;
         this.loader = new GLTFLoader();
         this.camera = camera;
         this.controls = controls;
+        this.mixer = mixer;
         domNode.appendChild(renderer.domElement);
 
-        new THREE.TextureLoader().load('/static/textures/bck-preview.jpg', texture=>{
-            texture.encoding = THREE.sRGBEncoding;
-            texture.mapping = THREE.EquirectangularReflectionMapping;
-            scene.background = new THREE.Color(0.7,0.8,1);
-            scene.environment = texture;
-        })
+        let texture = await this.loadTexture('/static/textures/bck.webp');
+        let bck = await this.loadTexture('/static/textures/bck.webp');
+        bck.premultiplyAlpha = true;
+        texture.mapping = THREE.EquirectangularReflectionMapping;
+        scene.background = bck; //new THREE.Color(0.7,0.7,0.7);
+        scene.environment = texture;
+        console.log('GameEngine started')
     }
 
     $ = THREE;
@@ -61,12 +74,27 @@ class GameEngine {
         })
     }
 
+    async loadTexture(url, progress){
+        return new Promise((resolve, reject)=>{
+            new THREE.TextureLoader().load(url, texture=>{
+                texture.encoding = THREE.sRGBEncoding;
+                resolve(texture)
+            }, progress, reject)
+        })
+    }
+
     async captureScreenshot(type = 'image/webp', quality = 80){
         return new Promise((resolve, reject)=>{
             this.renderer.domElement.toBlob(resolve, type, quality)
         })
     }
 
+    playAnimation(object, clip, play = true){
+        let action = this.mixer.clipAction(clip, object);
+        if (play) action.play();
+        else action.stop();
+    }
+
     stop(){
         this.renderer.setAnimationLoop(null);
     }
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 1a4c944..76ab18e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,13 +1,9 @@
 <template>
-  <v-app>
     <AppHeader />
-    
     <v-main>
       <router-view />
     </v-main>
-
     <AppFooter />
-  </v-app>
 </template>
 
 <script setup>
diff --git a/src/pages/game-objects/[[id]].vue b/src/pages/game-objects/[[id]].vue
index 8bccb47..6c15181 100644
--- a/src/pages/game-objects/[[id]].vue
+++ b/src/pages/game-objects/[[id]].vue
@@ -1,8 +1,8 @@
 <template>
-    <v-card :title="id =='add' ? $l.createGameObject : $l.editGameObject" class="container my-3">
+    <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-select :label="$l.objectType" v-model="object.type" :items="objectTypes" :rules="[rules.required]">
+            <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>
             <div v-if="object.asset?.name">{{ object.asset.name }}</div>
@@ -12,14 +12,28 @@
                 :disabled="!valid">
                 {{ $l.saveAndPreview }}
             </v-btn>
-            <v-btn @click="captureThumbnail" v-if="object.asset?.type == 'bundle'" prepend-icon="mdi-camera" color="secondary">{{ $l.captureThumbnail }}</v-btn>
-            <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish }}</v-btn>
+            <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish
+                }}</v-btn>
         </v-card-actions>
     </v-card>
 
     <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>
+        <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>
+        <v-card-actions>
+            <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
+                {{ $l.captureThumbnail }}
+            </v-btn>
+        </v-card-actions>
     </v-card>
 </template>
 
@@ -36,29 +50,30 @@ export default {
                 required: v => v ? true : this.$l.fieldRequired,
                 requiredFile: v => (v?.length || this.id != 'add') ? true : this.$l.fieldRequired
             },
-            objectTypes: ['panorama2d', 'environment3d', 'object3d', 'object2d', 'player3d', 'audio'].map(e => ({
-                title: this.$l[e],
-                value: e
-            })),
-            loading: false
+            loading: false,
+            animations: []
         }
     },
     async mounted() {
-        if (this.id && this.id != 'add'){
+        if (this.id && this.id != 'add') {
             this.object = (await this.$api.gameObject.load(this.id)).data;
         }
-        gameEngine = new GameEngine(this.$refs.target);
+        gameEngine = new GameEngine();
+        await gameEngine.init(this.$refs.target);
         await this.loadAsset();
     },
-    beforeUnmount(){
+    beforeUnmount() {
         gameEngine?.stop();
     },
     computed: {
-        fileToUpload(){
+        fileToUpload() {
             return this.object?.file instanceof File
         },
-        id(){
+        id() {
             return this.$route.params?.id;
+        },
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
         }
     },
     methods: {
@@ -71,11 +86,11 @@ export default {
                 if (this.id != 'add') keys.push('id');
                 if (this.object.thumb) keys.push('thumb');
 
-                keys.forEach(e=>fd.append(e, this.object[e]))
+                keys.forEach(e => fd.append(e, this.object[e]))
                 let result = await this.$api.gameObject.save(fd);
                 Object.assign(this.object, result.data.object);
-                if (this.id == 'add'){
-                    this.$router.replace({ params: {id: this.object.id} });
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
                 }
                 if (!params?.thumbOnly) await this.loadAsset();
             } catch (err) {
@@ -83,26 +98,48 @@ export default {
             }
             this.loading = false
         },
-        async loadAsset(){
-            if (this.object.asset?.type == 'bundle'){
-                let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+        async loadAsset() {
+            if (this.forRendering) {
                 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);
+                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();
-            await this.saveAndPreview({thumbOnly: true});
+            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() {
 
         }
diff --git a/src/pages/game-objects/list.vue b/src/pages/game-objects/list.vue
index dd88709..284a277 100644
--- a/src/pages/game-objects/list.vue
+++ b/src/pages/game-objects/list.vue
@@ -1,27 +1,50 @@
 <template>
     <v-container>
         <v-row>
-            <v-col v-for="(v, i) in items" :key="i" cols="3">
-                {{ v.name }}
-                <span class="font-weight-thin">{{ v.type }}</span>
-                <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`"></v-btn>
-                <v-img :src="`/asset/thumb/${v.asset?.thumb}`"></v-img>
+            <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}`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-icon color="primary" size="x-large" class="position-absolute top-0 left-0 ma-6">mdi-{{ $p.objectTypes.find(t=>t.value == v.type).icon }}</v-icon>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
+                </div>
             </v-col>
         </v-row>
     </v-container>
-    
+    <v-dialog v-model="confirmDialog" width="auto">
+        <v-card  :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
+            <template v-slot:actions>
+                <v-btn @click="confirmDialog = false">{{ $l.no }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ $l.yes }}</v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
 </template>
 
 <script>
+
 export default {
     data(){
         return {
-            items: []
+            items: [],
+            confirmDialog: false,
+            confirmTarget: null
         }
     },
     
     async created(){
         this.items = (await this.$api.gameObject.search()).data.data
     },
+
+    methods:{
+        async remove(item){
+            await this.$api.gameObject.remove(item.id);
+            this.confirmDialog = false;
+            this.items.splice(this.items.indexOf(item), 1);
+        }
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/plugins/api.js b/src/plugins/api.js
index 03147d1..d859fea 100644
--- a/src/plugins/api.js
+++ b/src/plugins/api.js
@@ -16,6 +16,9 @@ export default {
                 },
                 async search(query){
                     return await $ax.post('/game-object', query);
+                },
+                async remove(id){
+                    return await $ax.delete(`/game-object/${id}`)
                 }
             }
         }
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 1281751..264e93e 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -7,6 +7,7 @@
 // Plugins
 import vuetify from './vuetify'
 import lang from './lang'
+import params from './params'
 import pinia from '@/stores'
 import router from '@/router'
 import api from './api'
@@ -18,4 +19,5 @@ export function registerPlugins (app) {
     .use(pinia)
     .use(api)
     .use(lang)
+    .use(params)
 }
diff --git a/src/plugins/lang.js b/src/plugins/lang.js
index 21590ac..1f38be6 100644
--- a/src/plugins/lang.js
+++ b/src/plugins/lang.js
@@ -14,13 +14,16 @@ const lang = {
         player3d: 'Играч',
         saveAndPreview: 'Запис и преглед',
         preview: 'Преглед',
-        captureThumbnail: 'Capture thumbnail',
+        captureThumbnail: 'Save thumbnail',
         publish: 'Публикуване',
         gameObjects: 'Обекти',
         gameScenarios: 'Сценарии',
         gameRules: 'Правила',
         games: 'Игри',
-        darkMode: 'Тъмен режим'
+        darkMode: 'Тъмен режим',
+        confirmDeletionOf: 'Потвърдете изтриването на',
+        yes: 'Да',
+        no: 'Не'
     },
     en: {
 
diff --git a/src/plugins/params.js b/src/plugins/params.js
new file mode 100644
index 0000000..db8abfc
--- /dev/null
+++ b/src/plugins/params.js
@@ -0,0 +1,37 @@
+export default {
+    install: (app, options) => {
+        // inject a globally available $translate() method
+        let l = app.config.globalProperties.$l;
+        app.config.globalProperties.$p = {
+            objectTypes: [{
+                value: 'panorama2d',
+                icon: 'panorama-variant-outline',
+                title: l.panorama2d,
+                render: true
+            }, {
+                value: 'environment3d',
+                icon: 'panorama-sphere-outline',
+                title: l.environment3d,
+                render: true
+            }, {
+                value: 'object3d',
+                icon: 'video-3d',
+                title: l.object3d,
+                render: true
+            }, {
+                value: 'object2d',
+                icon: 'file-image-outline',
+                title: l.object2d
+            }, {
+                value: 'player3d',
+                icon: 'human-greeting',
+                title: l.player3d,
+                render: true
+            }, {
+                value: 'audio',
+                icon: 'volume-medium',
+                title: l.audio
+            }]
+        }
+    }
+}
\ No newline at end of file
diff --git a/vite.config.mjs b/vite.config.mjs
index ae5dd0c..2ac2333 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -18,7 +18,7 @@ export default defineConfig({
     VueRouter(),
     Layouts(),
     Vue({
-      template: { transformAssetUrls }
+      template: { transformAssetUrls: false }
     }),
     // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
     Vuetify({