207 lines
11 KiB
Vue
207 lines
11 KiB
Vue
<template>
|
||
<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-btn-toggle variant="tonal" v-model="store.prefs.xr.depthSense" class="ma-3" density="comfortable" color="green-darken-2">
|
||
<v-btn :value="true" icon="mdi-cube-outline"></v-btn>
|
||
</v-btn-toggle>
|
||
<v-btn icon="mdi-walk" @click="control"></v-btn>
|
||
</v-navigation-drawer>
|
||
<div class="container my-3 position-relative game-designer-canvas">
|
||
<div ref="target" @click="targetClick"
|
||
@mousedown="targetPointer($event, 'start')"
|
||
@mousemove="targetPointer($event, 'drag')"
|
||
@mouseup="targetPointer($event, 'end')"
|
||
@pointerdown="targetPointerDown"></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 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>
|
||
<video class="d-none" src="/asset/default/57.mp4" ref="videoPlayer"></video>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { useAppStore } from '@/stores/app';
|
||
|
||
import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
|
||
|
||
const store = useAppStore();
|
||
|
||
let gameEngine = null;
|
||
|
||
export default {
|
||
mixins:[GameEnvironmentMixin],
|
||
props:{
|
||
modelValue: Object,
|
||
},
|
||
data(){
|
||
return {
|
||
env: 'GamePreview',
|
||
scenesList: [],
|
||
objectsList: [],
|
||
mode: 'translate',
|
||
pointerDownTime: 0,
|
||
scenario: null,
|
||
renderType: 'ST',
|
||
cameraType: 'perspective',
|
||
store
|
||
}
|
||
},
|
||
methods:{
|
||
// async loadEnvironment(scene, target){
|
||
// //await gameEngine.loadPanorama(`/asset/default/55/panorama-vaya.webp`);
|
||
// await gameEngine.loadPanorama(`/asset/default/36.jpg`);
|
||
// await this.expandScenarioData(scene);
|
||
// //gameEngine.activeObjects.scale.set(0.033, 0.033, 0.033)
|
||
// gameEngine.activeObjects.clear();
|
||
// 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}`);
|
||
// this.setObjectAttributes(l, this.scene.data, env, 100);
|
||
// gameEngine.activeObjects.add(env.scene);
|
||
// gameEngine.scene.environmentRotation.y = Math.PI / 8;
|
||
// // if (env.scene.children[0]?.material?.map){
|
||
// // let emap = env.scene.children[0].material.map.clone()
|
||
// // emap = new gameEngine.$.Texture(emap.source.data, gameEngine.$.EquirectangularReflectionMapping)
|
||
// // emap.mapping = gameEngine.$.EquirectangularReflectionMapping;
|
||
// // emap.needsUpdate = true;
|
||
// // emap.updateMatrix()
|
||
// // emap.repeat.set(-1,-1)
|
||
// // gameEngine.scene.environment = gameEngine.scene.background = emap
|
||
// // console.log('env',emap)
|
||
// // gameEngine.scene.environmentRotation.y = Math.PI / 2;
|
||
// // }
|
||
// }
|
||
// for (let i of this.scene.data.items || []) {
|
||
// let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`);
|
||
// this.setObjectAttributes(l, i.data, gltf, 1);
|
||
// gameEngine.activeObjects.add(gltf.scene);
|
||
// if (i.data.$go.type == 'player3d'){
|
||
// let hero = new Hero(gltf, i.data.$go);
|
||
// hero.init(gameEngine);
|
||
// }else{
|
||
// if (gltf.animations?.length){
|
||
// gameEngine.playAnimation(gameEngine.scene, gltf.animations[0]);
|
||
// }
|
||
// }
|
||
// //console.log(JSON.stringify(l));
|
||
// //window.gameEngine = gameEngine;
|
||
// //console.log(new gameEngine.$.Euler({"isEuler":true,"_x":0,"_y":0,"_z":0,"_order":"XYZ"}));
|
||
// }
|
||
// if (l.camera){
|
||
// // gameEngine.camera.position.copy(l.camera.position)
|
||
// // gameEngine.camera.rotation.copy(l.camera.position)
|
||
// // gameEngine.camera.scale.copy(l.camera.position)
|
||
// }
|
||
|
||
// // let testGame1 = new Game1(gameEngine, '/static/textures/game1-test.jpg', 2, 3);
|
||
// // gameEngine.activeObjects.add(testGame1.object);
|
||
// // testGame1.object.position.set(0, 1, -15);
|
||
|
||
// // let testGame2 = new Game2(gameEngine, '/static/textures/game2-test.jpg', 3, 3);
|
||
// // gameEngine.activeObjects.add(testGame2.object);
|
||
// // testGame2.object.position.set(0, 1, 15);
|
||
// // testGame2.object.rotation.y += Math.PI;
|
||
|
||
// // let testGame4 = new Game4(gameEngine, '/static/feathers-game.glb', 3, 4);
|
||
// // gameEngine.activeObjects.add(testGame4.object);
|
||
// // testGame4.object.position.set(15, 1, 5);
|
||
|
||
// // let vp = new VideoPlayer(gameEngine, this.$refs.videoPlayer, 16, 9);
|
||
// // gameEngine.activeObjects.add(vp.object);
|
||
// // vp.object.position.set(37, 5.5, 15);
|
||
// // vp.object.rotation.y += -Math.PI/2;
|
||
|
||
// // let maze = new MazeQuizGame(gameEngine, {}, [
|
||
// // {
|
||
// // q: 'Атанасовското езеро е дълго около 10км.',
|
||
// // a:['Вярно', 'Невярно'],
|
||
// // h: 'Грешен отговор. Атанасовското езеро е дълго около 10км.'
|
||
// // },
|
||
// // {
|
||
// // q: 'Колко дълбоко е Атанасовското езеро?',
|
||
// // a:['Около 35см', 'Около 3.5м', 'Метър и половина'],
|
||
// // h: 'Грешен отговор. Атанасовското езеро е дълбоко средно около 35см.'
|
||
// // },
|
||
// // {
|
||
// // q: 'Колко вида птици се наблюдават в Атанасовското езеро?',
|
||
// // a: ['Повече от 330 вида', 'Над 10 вида', 'Над 450 вида'],
|
||
// // h: 'Грешен отговор. В Атанасовското езеро са наблюдавани над 330 вида птици'
|
||
// // },
|
||
// // {
|
||
// // q: 'Какво е Via Pontica?',
|
||
// // a: ['Миграционният път на птиците, минаващ покрай Бургаските езера', 'Рядък вид птица', 'Местност в гр. Бургас'],
|
||
// // h: 'Грешен отговор. Via Pontica наричаме миграционния път на птиците'
|
||
// // },
|
||
// // {
|
||
// // q: 'What stands for "Via Pontica"?',
|
||
// // a: ['The migration route of birds passing by the Burgas lakes', 'A rare species of bird', 'Location in Burgas'],
|
||
// // h: 'Wrong answer. Via Pontica is the name given to the migratory route of birds.'
|
||
// // },
|
||
// // {
|
||
// // q: 'Къдроглавият пеликан...',
|
||
// // a: ['...има огромен жълт клюн', '...има малък розов клюн', '...не се среща в България'],
|
||
// // h: 'Грешен отговор. Къдроглавият пеликан има огромен жълт клюн'
|
||
// // },
|
||
// // ])
|
||
// // maze.load().then(o=>{
|
||
// // gameEngine.activeObjects.add(o);
|
||
// // //o.scale.set(5,5,5);
|
||
// // })
|
||
|
||
// // new Grass(Grass.positions(1000,50,50), '/static/textures/grass01.png', 1, .5).then(mesh=>{
|
||
// // console.log('adding grass')
|
||
// // gameEngine.scene.add(mesh);
|
||
// // })
|
||
|
||
// // new Grass(Grass.positions(250,50,50), '/static/textures/flowers01.png', 1, .75).then(mesh=>{
|
||
// // gameEngine.scene.add(mesh);
|
||
// // console.log('adding grass')
|
||
// // })
|
||
|
||
// // new Grass(Grass.positions(250,50,50), '/static/textures/flowers02.png', 1, .75).then(mesh=>{
|
||
// // gameEngine.scene.add(mesh);
|
||
// // console.log('adding grass')
|
||
// // })
|
||
// },
|
||
}
|
||
}
|
||
</script> |