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

game designer

Browse Source
This commit is contained in:
goynov
2025-03-20 17:17:50 +02:00
parent 73ca07bcc0
commit 14f97924d3
11 changed files with 291 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GameDesigner/GameDesigner.vue
+137 -35
View File
@@ -1,18 +1,48 @@
<template>
<v-btn-toggle variant="tonal" density="compact" class="mx-auto" v-model="mode" color="blue">
<!-- <v-btn size="small" class="text-none" value="default"
prepend-icon="mdi-cursor-default-click">Pointer</v-btn> -->
<v-btn size="small" class="text-none" value="translate" prepend-icon="mdi-cursor-move">Move</v-btn>
<v-btn size="small" class="text-none" value="rotate" prepend-icon="mdi-rotate-orbit">Rotate</v-btn>
<v-btn size="small" class="text-none" value="scale" prepend-icon="mdi-resize">Scale</v-btn>
</v-btn-toggle>
<div class="container my-3">
<v-navigation-drawer width="133">
<v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="renderType" color="light-blue-darken-4">
<v-btn value="ST" icon="mdi-video-3d-variant"></v-btn>
<v-btn value="VR" icon="mdi-google-cardboard"></v-btn>
<v-btn value="AG" icon="mdi-glasses"></v-btn>
</v-btn-toggle>
<v-btn-toggle variant="tonal" density="comfortable" class="ma-3" v-model="mode" color="green-darken-4">
<v-btn class="text-none" value="translate" icon="mdi-cursor-move"></v-btn>
<v-btn class="text-none" value="rotate" icon="mdi-rotate-orbit"></v-btn>
<v-btn class="text-none" value="scale" icon="mdi-resize"></v-btn>
</v-btn-toggle>
<v-btn-toggle variant="tonal" v-model="cameraType" class="ma-3" density="comfortable" color="orange-darken-4">
<v-btn value="perspective" icon="mdi-cone"></v-btn>
<v-btn value="orthographic" icon="mdi-cone-off"></v-btn>
</v-btn-toggle>
</v-navigation-drawer>
<div class="container my-3 position-relative game-designer-canvas">
<div ref="target" @click="targetClick" @pointerdown="targetPointerDown"></div>
<div class="renderer-gizmo"></div>
</div>
<v-toolbar density="compact">
<v-slide-group show-arrows>
<v-slide-group-item v-for="(a, i) in objectAnimations" :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>
</v-toolbar>
<v-navigation-drawer location="right">
<v-list v-model:selected="scenesList" selectable>
<v-list v-model:selected="scenesList" selectable color="primary">
<v-list-item v-for="(s, i) in scenes" :key="i" :title="s.data.title" :value="s"></v-list-item>
</v-list>
<v-list selectable v-model:selected="objectsList" color="secondary">
<v-list-item v-for="(v, k) in sceneObjects" :title="v.__title" :subtitle="k" :value=v>
<template v-slot:prepend>
<v-btn variant="plain" density="comfortable" size="small" v-if="v.__o"
:icon="`mdi-eye${v.__o.visible ? '' : '-off'}`"
@click.stop="v.__o.visible = !v.__o.visible"></v-btn>
<!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
</template>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
@@ -25,70 +55,114 @@ let gameEngine = null;
export default {
props:{
modelValue: Object,
scenario: Object
},
data(){
return {
scenesList: [],
objectsList: [],
mode: 'translate',
pointerDownTime: 0
pointerDownTime: 0,
scenario: null,
renderType: 'ST',
cameraType: 'perspective'
}
},
computed:{
scenes(){
return this.scenario.scenes || [];
return this.scenario?.scenes || [];
},
scene(){
return this.scenesList[0];
},
currentObject(){
return this.objectsList[0];
},
sceneObjects(){
return this.object.scenes?.[this.scene?.data?.id]?.objects;
},
object(){
return this.modelValue;
},
objectAnimations(){
return this.currentObject?.__g?.animations?.map(a => ({
name: a.name, id: a.uuid, a
}));
}
},
watch:{
async scene(n){
await this.loadEnvironment();
this.object.scenes = this.object.scenes || {}
this.object.scenes[n.data.id] = this.object.scenes[n.data.id] || {}
await this.loadEnvironment(n, this.object.scenes[n.data.id]);
},
mode(n){
gameEngine.transformControls.setMode(n)
},
async 'object.scenario'(n){
await this.loadScenario()
},
currentObject(n){
gameEngine.transformControls.attach(n.__o);
gameEngine.gizmo.target = n.__o.position;
},
renderType(v){
gameEngine.renderType = v;
},
cameraType(v){
if (v == 'perspective'){
gameEngine.setCameraPerspective();
}else{
gameEngine.setCameraOrthographic();
}
}
},
async mounted(){
gameEngine = new GameEngine();
this.gameEngine = gameEngine;
//this.gameEngine = gameEngine;
await gameEngine.init(this.$refs.target);
gameEngine.scene.add(gameEngine.transformControls.getHelper())
gameEngine.scene.add(gameEngine.transformControls.getHelper());
gameEngine.scene.add(new gameEngine.$.GridHelper(100,100));
this.resize();
//gameEngine.setCamera(gameEngine.orthographicCamera)
//gameEngine.setCameraOrthographic();
await this.loadScenario();
window.addEventListener('resize', this.resize);
},
unmounted(){
window,removeEventListener('resize', this.resize);
},
methods:{
async loadEnvironment(){
await this.expandScenarioData();
if (!this.object.gd){
this.object.gd = {
items: []
};
async loadScenario(){
if (this.object.scenario){
this.scenario = (await this.$api.scenario.load(this.object.scenario)).data;
}else{
this.scenario = null;
}
},
async loadEnvironment(scene, target){
//await gameEngine.loadPanorama(`/asset/default/43.webp`);
await this.expandScenarioData(scene);
target.objects = target.objects || {};
let l = target.objects;
if (this.scene.data.$environment.type == 'panorama2d'){
await gameEngine.loadPanorama(`/asset/default/${this.scene.data.$environment.asset.name}`);
}else{
let env = await gameEngine.load(`/asset/default/${this.scene.data.$environment.asset.name}`);
gameEngine.autoScale(env.scene, 10);
this.setObjectAttributes(l, this.scene.data, env, 100);
gameEngine.activeObjects.add(env.scene);
}
for (let i of this.scene.data.items) {
let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
let o = gltf.scene;
gameEngine.autoScale(o);
gameEngine.activeObjects.add(o);
const {position, scale, rotation} = o;
i.gd = {position, scale, rotation};
console.log(JSON.stringify(i.gd));
window.gameEngine = gameEngine;
this.setObjectAttributes(l, i.data, gltf, 10);
gameEngine.activeObjects.add(gltf.scene);
//console.log(JSON.stringify(l));
//window.gameEngine = gameEngine;
//console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
}
},
async expandScenarioData(){
this.scene.data.$environment = (await this.$api.gameObject.load(this.scene.data.environment)).data
for (let i of this.scene.data.items) {
async expandScenarioData(scene){
scene.data.$environment = (await this.$api.gameObject.load(scene.data.environment)).data
for (let i of scene.data.items) {
i.data.$go = (await this.$api.gameObject.load(i.data.go)).data;
}
},
@@ -99,13 +173,41 @@ export default {
if (performance.now() - this.pointerDownTime < 200){
let intersects = gameEngine.intersect(e, this.$refs.target, gameEngine.activeObjects.children, true);
if (intersects.length){
console.log('attaching controls to', intersects[0].object)
gameEngine.transformControls.attach(intersects[0].object);
//console.log('attaching controls to', intersects[0].object)
//gameEngine.transformControls.attach(intersects[0].object);
console.log(this.sceneObjects[intersects[0].object.__pn_id])
this.objectsList[0] = this.sceneObjects[intersects[0].object.__pn_id]
}else{
gameEngine.transformControls.detach();
}
}
}
},
setObjectAttributes(l, data, o, autoScaleFactor = 1){
if (l[data.id]){
['position', 'scale', 'rotation'].forEach(p=>{
o.scene[p].copy(l[data.id][p])
})
}else{
gameEngine.autoScale(o.scene, autoScaleFactor);
}
l[data.id] = l[data.id] || {};
['position', 'scale', 'rotation', 'visible'].forEach(p=>{
l[data.id][p] = o.scene[p];
})
l[data.id].__o = o.scene;
l[data.id].__g = o;
l[data.id].__title = data.title;
o.scene.__pn_id = data.id;
},
async toggleAnimation(animation){
animation.playing = !animation.playing;
gameEngine.playAnimation(gameEngine.scene, animation.a, animation.playing);
},
resize(){
let r = this.$refs.target;
gameEngine.resize(r.clientWidth, r.clientHeight);
//this.zoom = Math.min(r.clientWidth / this.viewBox.w, r.clientHeight / this.viewBox.h);
},
}
}
</script>
src/components/SceneDesigner/GameObject.vue
+1
View File
@@ -19,6 +19,7 @@
<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-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
</v-form>
</v-card>
</template>
src/components/SceneDesigner/Scene.vue
+1
View File
@@ -18,6 +18,7 @@
<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-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
</v-form>
</v-card>
</template>
src/components/SceneDesigner/Task.vue
+6 -4
View File
@@ -11,15 +11,17 @@
</g>
</teleport>
<v-card v-if="selected" :title="modelValue.title" class="mx-2" variant="text">
<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="assignTaskIntro" type="Descriptive">
<template v-slot:activator="props">
<v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose task description</v-btn>
</template>
</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-text-field density="compact" :label="l.id" v-model="modelValue.id"></v-text-field>
</v-form>
</v-card>
</template>