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

game object module

Browse Source
This commit is contained in:
goynov
2024-11-06 20:09:02 +02:00
parent e3a2a0251d
commit 7180cfeb7f
16 changed files with 201 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/bl/GameObjectsManager.js
+3 -1
View File
@@ -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
+5
View File
@@ -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);
}
}
result.json
-1
View File
File diff suppressed because one or more lines are too long
src/App.vue
+2 -4
View File
@@ -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>
src/components/AppFooter.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<v-footer height="40" app>
<v-footer height="0" app>
</v-footer>
</template>
src/components/AppHeader.vue
+2 -2
View File
@@ -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
+3 -5
View File
@@ -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>
src/gameEngine/index.js
+37 -9
View File
@@ -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);
}
src/layouts/default.vue
-4
View File
@@ -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
+70 -33
View File
@@ -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() {
}
src/pages/game-objects/list.vue
+30 -7
View File
@@ -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>
src/plugins/api.js
+3
View File
@@ -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
+2
View File
@@ -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
+5 -2
View File
@@ -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
+37
View File
@@ -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
+1 -1
View File
@@ -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({