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