imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

presentation

Browse Source
This commit is contained in:
goynov
2025-03-17 19:49:41 +02:00
parent d5d8d60212
commit 9eb14f0668
13 changed files with 218 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AssetPreview.vue
+82
View File
@@ -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>
src/components/SceneDesigner/GameObject.vue
+4 -2
View File
@@ -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;
src/components/SceneDesigner/Scene.vue
+6 -5
View File
@@ -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
src/components/SceneDesigner/SceneDesigner.vue
+27 -16
View File
@@ -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;
}
src/components/SceneDesigner/Task.vue
+14 -6
View File
@@ -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
}
}
}
}
src/pages/game-objects/[[id]].vue
+7 -61
View File
@@ -2,6 +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-textarea :label="$l.description" v-model="object.description"></v-textarea>
<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>
@@ -18,17 +19,7 @@
</v-card>
<v-card :title="$l.preview" class="container my-3" v-show="object.asset">
<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>
<AssetPreview :object="object" ref="assetPreview" autoplay></AssetPreview>
<v-card-actions>
<v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
{{ $l.captureThumbnail }}
@@ -38,8 +29,6 @@
</template>
<script>
import { GameEngine } from '@/lib/gameEngine.js';
let gameEngine = null;
export default {
data() {
@@ -50,20 +39,13 @@ export default {
required: v => v ? true : this.$l.fieldRequired,
requiredFile: v => (v?.size || this.id != 'add') ? true : this.$l.fieldRequired
},
loading: false,
animations: []
loading: false
}
},
async mounted() {
if (this.id && this.id != 'add') {
this.object = (await this.$api.gameObject.load(this.id)).data;
}
gameEngine = new GameEngine();
await gameEngine.init(this.$refs.target);
await this.loadAsset();
},
beforeUnmount() {
gameEngine?.stop();
},
computed: {
fileToUpload() {
@@ -74,7 +56,7 @@ export default {
},
forRendering() {
return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
}
},
},
methods: {
async saveAndPreview(params) {
@@ -92,54 +74,18 @@ export default {
if (this.id == 'add') {
this.$router.replace({ params: { id: this.object.id } });
}
if (!params?.thumbOnly) await this.loadAsset();
if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
} catch (err) {
console.error(err);
}
this.loading = false
},
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 captureThumbnail() {
this.object.thumb = await gameEngine.captureScreenshot();
this.object.thumb = await this.$refs.assetPreview.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() {
}
src/pages/game-objects/list.vue
+16 -3
View File
@@ -7,7 +7,11 @@
</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="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`"
:color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-6"></v-btn>
<v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)"
color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
<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>
@@ -15,13 +19,16 @@
</v-row>
</v-container>
<v-dialog v-model="confirmDialog" width="auto">
<v-card :title="`${$l.confirmDeletionOf} ${ confirmTarget.name }?`">
<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>
<v-dialog v-model="previewDialog" width="auto" max-width="1200">
<AssetPreview :object="previewObject"></AssetPreview>
</v-dialog>
</template>
<script>
@@ -31,7 +38,9 @@ export default {
return {
items: [],
confirmDialog: false,
confirmTarget: null
confirmTarget: null,
previewObject: null,
previewDialog: false
}
},
@@ -44,6 +53,10 @@ export default {
await this.$api.gameObject.remove(item.id);
this.confirmDialog = false;
this.items.splice(this.items.indexOf(item), 1);
},
preview(v){
this.previewObject = v;
this.previewDialog = true;
}
}
}
src/pages/scenarios/[[id]].vue
+19 -16
View File
@@ -1,21 +1,24 @@
<template>
<v-container max-width="1400">
<v-expansion-panels v-model="panel">
<v-expansion-panel static :title="id == 'add' ? $l.createScenario : $l.editScenario" value="scenario">
<v-expansion-panel-text>
<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-form>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel static title="Edit scenes" value="scenes">
<v-expansion-panel-text>
<div>
<SceneDesigner v-model="object" ref="sceneDesigner"></SceneDesigner>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
<v-tabs v-model="panel">
<v-tab value="scenario">
<v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? $l.createScenario : $l.editScenario }}
</v-tab>
<v-tab value="scenes">
<v-icon icon="mdi-panorama-outline"></v-icon> Edit scenes
</v-tab>
</v-tabs>
<v-tabs-window v-model="panel">
<v-tabs-window-item value="scenario">
<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-textarea :label="$l.description" v-model="object.description"></v-textarea>
</v-form>
</v-tabs-window-item>
<v-tabs-window-item value="scenes">
<SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
</v-tabs-window-item>
</v-tabs-window>
<v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">Save</v-btn>
</v-container>
</template>
src/plugins/lang.js
+4
View File
@@ -3,6 +3,7 @@ const lang = {
createGameObject: 'Добавяне на игрови обект',
editGameObject: 'Редактиране на игрови обект',
name: 'Име',
description: 'Описание',
fieldRequired: 'Полето е задължително',
objectType: 'Тип обект',
objectFile: 'Файл',
@@ -11,6 +12,7 @@ const lang = {
object3d: 'Триизмерен обект',
object2d: 'Двумерен обект (изображение)',
audio: 'Аудио',
video: 'Видео',
player3d: 'Играч',
saveAndPreview: 'Запис и преглед',
preview: 'Преглед',
@@ -32,6 +34,7 @@ const lang = {
createGameObject: 'Add game object',
editGameObject: 'Edit game object',
name: 'Name',
description: 'Description',
fieldRequired: 'Field is required',
objectType: 'Object type',
objectFile: 'File',
@@ -40,6 +43,7 @@ const lang = {
object3d: '3D object',
object2d: '2D object (picture)',
audio: 'Audio',
video: 'Video',
player3d: 'Player',
saveAndPreview: 'Save and preview',
preview: 'Preview',
src/plugins/params.js
+18 -6
View File
@@ -8,33 +8,45 @@ export default {
icon: 'panorama-variant-outline',
title: l.panorama2d,
render: true,
type: 'Scene'
type: 'Scene',
color: 'light-blue-darken-4'
}, {
value: 'environment3d',
icon: 'panorama-sphere-outline',
title: l.environment3d,
render: true,
type: 'Scene'
type: 'Scene',
color: 'teal-darken-3'
}, {
value: 'object3d',
icon: 'video-3d',
title: l.object3d,
render: true,
type: 'GameObject'
type: 'GameObject',
color: 'deep-orange-darken-4'
}, {
value: 'object2d',
icon: 'file-image-outline',
title: l.object2d,
type: 'GameObject'
type: 'Descriptive',
color: 'light-green-accent-4'
}, {
value: 'player3d',
icon: 'human-greeting',
title: l.player3d,
render: true
render: true,
color: 'yellow-accent-4'
}, {
value: 'audio',
icon: 'volume-medium',
title: l.audio
title: l.audio,
color: 'deep-purple-accent-4'
}, {
value: 'video',
icon: 'filmstrip',
title: l.video,
type: 'Descriptive',
color: 'purple-darken-3'
}]
}
}
src/plugins/vuetify.js
+3
View File
@@ -29,6 +29,9 @@ export default createVuetify({
},
VFileInput: {
variant: 'outlined'
},
VTextarea: {
variant: 'outlined'
}
},
theme: {
src/styles/style.scss
+4
View File
@@ -5,4 +5,8 @@
.v-btn {
text-transform: unset !important;
}
video{
max-width: 100%;
}