presentation

2025-03-17 19:49:41 +02:00
parent d5d8d60212
commit 9eb14f0668
13 changed files with 218 additions and 117 deletions
@@ -0,0 +1,82 @@
+<template>
+    <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-if="!forRendering && object.type == 'object2d'" :src="`/asset/default/${object.asset?.name}`"></v-img>
+    <video controls :autoplay="autoplay ? 'autoplay' : ''" v-if="!forRendering && object.type == 'video'" :src="`/asset/default/${object.asset?.name}`"></video>
+</template>
+
+<script>
+import { GameEngine } from '@/lib/gameEngine.js';
+let gameEngine = null;
+
+export default{
+    props:['object', 'autoplay'],
+    data(){
+        return {
+            animations: []
+        }
+    },
+    async mounted(){
+        gameEngine = new GameEngine();
+        this.gameEngine = gameEngine;
+        await gameEngine.init(this.$refs.target);
+        await this.loadAsset();
+    },
+    beforeUnmount() {
+        gameEngine?.stop();
+    },
+    computed:{
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
+        },
+    },
+    methods:{
+        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 toggleAnimation(animation){
+            animation.playing = !animation.playing;
+            gameEngine.playAnimation(
+                gameEngine.scene, 
+                this.loadedAsset.animations.find(a=>a.uuid == animation.id),
+                animation.playing
+            );
+        },
+    }
+}
+</script>
@@ -3,9 +3,10 @@
        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{gameObject: true, selected}" v-show="visible && parent.visible">
            <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
            <svg-icon :src="`/asset/thumb/${modelValue.go||0}.webp`" :x="vd.x1" :y="vd.y1" :size="37"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="58">{{ modelValue.title }}</text>
        </g>
    </teleport>
-    <v-card v-if="selected" class="py-4">
+    <v-card v-if="selected" :title="modelValue.title">
        <asset-selector @select="assignGameObject" type="GameObject">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
@@ -13,6 +14,7 @@
        </asset-selector>
        <v-form class="py-4">
            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
        </v-form>
    </v-card>
 </template>
@@ -46,7 +48,7 @@ export default {
    modifiers: ['x1', 'y1'],
    methods:{
        intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
        },
        assignGameObject(e){
            this.modelValue.go = e.id;
@@ -2,10 +2,11 @@
    <teleport to=".scene-designer .scenes" v-if="active">
        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{scene: true, selected}" v-show="visible">
            <svg-icon :src="`/asset/thumb/${modelValue.environment||0}.webp`" :x="vd.x1" :y="vd.y1" :size="65"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="86">{{ modelValue.title }}</text>
        </g>
    </teleport>
-    <v-card title="Scene" v-if="selected">
-        <asset-selector @select="assignGameObject" type="Scene">
+    <v-card :title="modelValue.title" v-if="selected">
+        <asset-selector @select="assignEnvironment" type="Scene">
            <template v-slot:activator="props">
                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" block color="success" class="py-4">Choose environment</v-btn>
            </template>
@@ -13,8 +14,8 @@

        <v-form class="py-4">
            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
        </v-form>
-
    </v-card>
 </template>

@@ -48,9 +49,9 @@ export default {
    modifiers: ['x1', 'y1'],
    methods:{
        intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
        },
-        assignGameObject(e){
+        assignEnvironment(e){
            this.modelValue.environment = e.id;
            if (this.modelValue.id == this.modelValue.title){
                this.modelValue.title = e.name
@@ -26,11 +26,22 @@
                <g class="scenes"></g>
            </svg>
        </div>
-        <v-navigation-drawer location="right" width="400">
+        <v-navigation-drawer location="right" :width="!selectedItem.length ? 400 : expandDrawer ? 800 : 400">
+            <v-btn :icon="expandDrawer ? 'mdi-arrow-expand-right' : 'mdi-arrow-expand-left'" variant="plain" size="small" 
+                @click="expandDrawer = !expandDrawer" v-if="selectedItem.length"></v-btn>
+            <template v-for="(item, i) in flatItems" :key="i">
+                <component :is="components[item.__type]" :ref="'sc-' + item.__path" :vd="item.vd" v-model="item.data"
+                    @target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
+                    :selected="selectedItem.includes(item)">
+                </component>
+            </template>
+        </v-navigation-drawer>
+        <v-navigation-drawer>
            <v-list density="compact" nav v-model:selected="selectedItem"
            :select-strategy="mode == 'select' ? 'leaf' : 'single-leaf'">
                <v-list-item v-for="(item, i) in flatItems.toSorted((a,b)=>a.__path.localeCompare(b.__path))" 
-                    :key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" v-show="!item.__parent || item.__parent.vd.expanded">
+                    :key="i" :title="item.data.title" :value="item" :style="`padding-left:${item.__level}rem`" 
+                    v-show="!item.__parent || item.__parent.vd.expanded" :color="[0,'secondary', 'primary', 'success'][item.__level]">
                    <template v-slot:prepend>
                    <v-btn variant="plain" density="comfortable" size="small"
                            :icon="`mdi-eye${item.visible ? '' : '-off'}`"
@@ -45,13 +56,6 @@
                    </template>
                </v-list-item>
            </v-list>
-            
-            <template v-for="(item, i) in flatItems" :key="i">
-                <component :is="components[item.__type]" :ref="'svg-'+item.id" :vd="item.vd" v-model="item.data"
-                    @target="setTarget($event, item)" :visible="item.visible" :cid="item.id" :parent="item.__parent"
-                    :selected="selectedItem.includes(item)">
-                </component>
-            </template>
        </v-navigation-drawer>
    </div>
 </template>
@@ -98,7 +102,9 @@ export default {
            assetSelector: {
                active: false,
                type: 'Scene'
-            }
+            },
+            dialog: false,
+            expandDrawer: false
        }
    },
    mounted(){
@@ -277,12 +283,11 @@ export default {
                            id = `${this.components[this.mode].name}-${nid++}`
                        }while (this.flatItems.find(i=>i.data.id == id));

-                        let targetContainer = this.selectedItem[0]?.data; //this.items;
-                        if (targetContainer){
+                        let targetContainer = this.items;
+                        if (this.mode != 'Scene'){
+                            targetContainer = this.selectedItem[0]?.data; //this.items;
                            targetContainer.items = targetContainer.items || [];
                            targetContainer = targetContainer.items;
-                        }else{
-                            targetContainer = this.items
                        }
                        targetContainer.push({
                            //__type: this.mode,
@@ -337,7 +342,7 @@ export default {
        },
        select(){
            let r = Utils.adjustMinMax(this.selector);
-            this.selectedItem = this.flatItems.filter(i=>this.$refs['svg-'+i.id][0].intersect(r));
+            this.selectedItem = this.flatItems.filter(i=>this.$refs['sc-'+i.__path][0].intersect(r));
        },
        resize(){
            let r = this.$refs.svgContainer;
@@ -384,11 +389,17 @@ export default {
            stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
            }
        }
+        text {
+            text-anchor: middle;
+            fill:rgb(var(--v-theme-on-surface));
+            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
+        }
+        background-color: rgba(128,128,128,.05);
    }
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
-    height: 95vh;
+    height: calc(100vh - 244px);
    &.pan {
        cursor: grab;
    }
@@ -3,18 +3,20 @@
        <g @mousedown="$emit('target', {target:vd, attrs:['x1', 'y1'], delta: true})" :class="{task: true, selected}" 
            v-show="visible && parent.visible && parent.__parent.visible">
            <line :x1="vd.x1" :y1="vd.y1" :x2="parent.vd.x1" :y2="parent.vd.y1"></line>
-            <svg-icon :src="`/asset/thumb/0.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
+            <svg-icon :src="`/asset/thumb/${modelValue.intro || 0}.webp`" :x="vd.x1" :y="vd.y1" :size="22"></svg-icon>
+            <text :x="vd.x1" :y="vd.y1" dy="44">{{ modelValue.title }}</text>
        </g>
    </teleport>
-    <v-card v-if="selected">
+    <v-card v-if="selected" :title="modelValue.title">
        <v-form class="py-4">
            <v-text-field density="compact" :label="$l.name" v-model="modelValue.title"></v-text-field>
+            <v-textarea :label="$l.description" v-model="modelValue.description"></v-textarea>
        </v-form>
-        <!-- <asset-selector @select="modelValue.id = $event" type="Task">
+        <asset-selector @select="assignTaskIntro" type="Descriptive">
            <template v-slot:activator="props">
-                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline">Choose game object</v-btn>
+                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose task description</v-btn>
            </template>
-        </asset-selector> -->
+        </asset-selector>
    </v-card>
 </template>

@@ -47,7 +49,13 @@ export default {
    modifiers: ['x1', 'y1'],
    methods:{
        intersect(v){
-            return Utils.intersectLineRect(this.vd, v);
+            return Utils.intersectPointRect([this.vd.x1, this.vd.y1], v);
+        },
+        assignTaskIntro(e){
+            this.modelValue.intro = e.id;
+            if (this.modelValue.id == this.modelValue.title){
+                this.modelValue.title = e.name
+            }
        }
    }
 }