game object module

2024-11-06 20:09:02 +02:00
parent e3a2a0251d
commit 7180cfeb7f
16 changed files with 201 additions and 70 deletions
@@ -117,9 +117,11 @@ class GameObjectsManager{
            }else{
                object.asset.type = 'single';
                await fs.promises.copyFile(src, def + ext);
+                if (['.jpg', '.png', '.webp'].includes(ext)){
                    await this.addThumb(object, src);
                }
            }
+        }

        /**
         * Assigns a thumbnail to a game object
@@ -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);
    }
 }
@@ -1,8 +1,6 @@
 <template>
  <v-app>
-    <v-main>
    <router-view :key="$route.fullPath" />
-    </v-main>
  </v-app>
 </template>

@@ -1,5 +1,5 @@
 <template>
-  <v-footer height="40" app>
+  <v-footer height="0" app>
    
  </v-footer>
 </template>
@@ -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>
@@ -1,8 +1,6 @@
 <template>
  <v-container class="fill-height">
-    <v-responsive
-      class="align-centerfill-height mx-auto"
-    >
+    <v-responsive class="align-centerfill-height mx-auto">


    </v-responsive>
@@ -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;
+        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 = new THREE.Color(0.7,0.8,1);
+        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);
    }
@@ -1,13 +1,9 @@
 <template>
-  <v-app>
    <AppHeader />
-    
    <v-main>
      <router-view />
    </v-main>
-
    <AppFooter />
-  </v-app>
 </template>

 <script setup>
@@ -2,7 +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-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,18 +50,16 @@ 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') {
            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() {
@@ -59,6 +71,9 @@ export default {
        },
        id() {
            return this.$route.params?.id;
+        },
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
        }
    },
    methods: {
@@ -84,10 +99,21 @@ export default {
            this.loading = false
        },
        async loadAsset() {
-            if (this.object.asset?.type == 'bundle'){
-                let gltf = await gameEngine.load(`/asset/default/${this.object.asset.name}`);
+            if (this.forRendering) {
                gameEngine.scene.clear();
-                console.log(gltf)
+                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;
@@ -98,11 +124,22 @@ export default {
                    gameEngine.scene.add(gltf.scene);
                    //gameEngine.scene.add(gameEngine.light);
                }
+            }
        },
        async captureThumbnail() {
            this.object.thumb = await 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() {

        }
@@ -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-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>
@@ -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}`)
                }
            }
        }
@@ -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)
 }
@@ -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: {

@@ -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
+            }]
+        }
+    }
+}
@@ -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({