game object module

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);
+                }
             }
         }
 

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);
     }
 }

src/App.vue

@@ -1,11 +1,9 @@
 <template>
   <v-app>
-    <v-main>
+    <router-view :key="$route.fullPath" />
-      <router-view :key="$route.fullPath"/>
-    </v-main>
   </v-app>
 </template>
 
 <script setup>
-  //
+//
 </script>

src/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer height="40" app>
+  <v-footer height="0" app>
     
   </v-footer>
 </template>

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>

src/components/Home.vue

@@ -1,8 +1,6 @@
 <template>
   <v-container class="fill-height">
-    <v-responsive
+    <v-responsive class="align-centerfill-height mx-auto">
-      class="align-centerfill-height mx-auto"
-    >
 
 
     </v-responsive>
@@ -10,5 +8,5 @@
 </template>
 
 <script setup>
-  //
+//
 </script>

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);
+        const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
-        //camera.position.set(-10, -10, 50);
+        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=>{
+        let texture = await this.loadTexture('/static/textures/bck.webp');
-            texture.encoding = THREE.sRGBEncoding;
+        let bck = await this.loadTexture('/static/textures/bck.webp');
-            texture.mapping = THREE.EquirectangularReflectionMapping;
+        bck.premultiplyAlpha = true;
-            scene.background = new THREE.Color(0.7,0.8,1);
+        texture.mapping = THREE.EquirectangularReflectionMapping;
-            scene.environment = texture;
+        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);
     }

src/layouts/default.vue

@@ -1,13 +1,9 @@
 <template>
-  <v-app>
     <AppHeader />
-    
     <v-main>
       <router-view />
     </v-main>
-
     <AppFooter />
-  </v-app>
 </template>
 
 <script setup>

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 @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">{{ $l.publish }}</v-btn>
+                }}</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>
+        <div v-show="forRendering">
-        <v-img v-show="object?.asset?.type == 'single'" :src="`/asset/default/${object.asset?.name}`"></v-img>
+            <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 => ({
+            loading: false,
-                title: this.$l[e],
+            animations: []
-                value: e
-            })),
-            loading: false
         }
     },
     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'){
+                if (this.id == 'add') {
-                    this.$router.replace({ params: {id: this.object.id} });
+                    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(){
+        async loadAsset() {
-            if (this.object.asset?.type == 'bundle'){
+            if (this.forRendering) {
-                let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
                 gameEngine.scene.clear();
-                console.log(gltf)
+                if (this.object.type == 'panorama2d') {
-                let bb = new gameEngine.$.Box3().setFromObject(gltf.scene);
+                    let t = await gameEngine.loadTexture(`/asset/default/${this.object.asset.name}`);
-                gltf.scene.traverse( function( object ) {
+                    t.mapping = gameEngine.$.EquirectangularReflectionMapping;
-                    object.frustumCulled = false;
+                    gameEngine.scene.background = t;
-                } );
+                    gameEngine.scene.environment = t;
-                gameEngine.camera.position.set(bb.max.x, bb.max.y, bb.max.z);
+                    gameEngine.scene.add(gameEngine.camera);
-                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)
+                } else {
-                gameEngine.controls.update();
+                    let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
-                gameEngine.scene.add(gltf.scene);
+                    console.debug('GLTF', gltf);
-                //gameEngine.scene.add(gameEngine.light);
+                    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() {
 
         }

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-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                {{ v.name }}
+                <router-link :to="`/game-objects/${v.id}`">
-                <span class="font-weight-thin">{{ v.type }}</span>
+                    <v-img :src="`/asset/thumb/${v.asset?.thumb}`"></v-img>
-                <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/game-objects/${v.id}`"></v-btn>
+                </router-link>
-                <v-img :src="`/asset/thumb/${v.asset?.thumb}`"></v-img>
+                <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>

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}`)
                 }
             }
         }

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)
 }

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: {
 

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
+            }]
+        }
+    }
+}

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({