#72 epic refactoring
This commit is contained in:
@@ -1,61 +1,98 @@
|
||||
<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-divider class="my-2"></v-divider>
|
||||
<v-btn variant="tonal" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`" class="ma-1" size="small"></v-btn>
|
||||
<v-btn variant="tonal" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`" class="ma-1" size="small"></v-btn>
|
||||
<v-btn icon="mdi-fullscreen" @click="fullScreen" variant="tonal" v-tooltip="l.fullScreen" size="small" class="ma-1" ></v-btn>
|
||||
</v-navigation-drawer>
|
||||
<div class="container my-3 position-relative game-designer-canvas">
|
||||
<div ref="target" @click="targetClick" class="canvas-wrapper"
|
||||
@mousedown="targetPointer($event, 'start')"
|
||||
@mousemove="targetPointer($event, 'drag')"
|
||||
@mouseup="targetPointer($event, 'end')"
|
||||
@pointerdown="targetPointerDown"></div>
|
||||
@mouseup="targetPointer($event, 'end')" ></div>
|
||||
</div>
|
||||
<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-navigation-drawer width="133" rail location="right" class="mt-3">
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-panorama-outline" color="primary" v-bind="props" v-tooltip="'Select scene'"></v-btn>
|
||||
</template>
|
||||
<v-list selectable color="primary" @update:selected="loadScene($event[0])" :items="scenes"></v-list>
|
||||
</v-menu>
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-btn variant="text" icon="mdi-walk" @click="control" v-tooltip="`Pointer lock controls mode`"></v-btn>
|
||||
<v-btn variant="text" icon="mdi-image-frame" @click="setGameHeader" v-tooltip="`Capture screenshot as game header image`"></v-btn>
|
||||
<v-btn icon="mdi-fullscreen" @click="fullScreen" variant="text" v-tooltip="l.fullScreen"></v-btn>
|
||||
<v-btn-toggle variant="text" v-model="store.prefs.xr.depthSense" color="green-darken-2" v-tooltip="`Toggle XR depth sense`">
|
||||
<v-btn :value="true" icon="mdi-cube-outline"></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-navigation-drawer>
|
||||
<video class="d-none" src="" ref="videoPlayer"></video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
|
||||
import { GameEngine } from '@/lib/GameEngine';
|
||||
import { GameManager } from '@/lib/GameManager';
|
||||
let engine = null, manager = null;
|
||||
|
||||
export default {
|
||||
mixins:[GameEnvironmentMixin],
|
||||
props:{
|
||||
modelValue: Object,
|
||||
},
|
||||
props:['id'],
|
||||
data(){
|
||||
return {
|
||||
env: 'GamePreview',
|
||||
scenesList: [],
|
||||
objectsList: [],
|
||||
mode: 'translate',
|
||||
pointerDownTime: 0,
|
||||
scenario: null,
|
||||
renderType: 'ST',
|
||||
cameraType: 'perspective',
|
||||
scenes: []
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
engine = new GameEngine();
|
||||
await engine.init(this.$refs.target, {
|
||||
xr: true,
|
||||
gizmo: false,
|
||||
stats: true,
|
||||
depthSense: this.store.prefs.xr.depthSense,
|
||||
mode: 'GamePreview'
|
||||
});
|
||||
manager = await new GameManager(engine, this.id);
|
||||
this.scenes = manager.scenarioData.scenes.map(s=>({
|
||||
title: s.data.title,
|
||||
value: s.data.id
|
||||
}))
|
||||
window.addEventListener('resize', this.resize);
|
||||
},
|
||||
|
||||
async unmounted(){
|
||||
this.debug('Disposing scene')
|
||||
window.removeEventListener('resize', this.resize);
|
||||
engine.tm?.setGame(null);
|
||||
engine.dispose();
|
||||
this.debug('Disposed scene', JSON.stringify(engine.renderer.info.memory));
|
||||
engine = null;
|
||||
manager = null;
|
||||
},
|
||||
|
||||
methods:{
|
||||
loadScene(sceneId){
|
||||
manager.loadScene(sceneId)
|
||||
},
|
||||
targetClick(e){
|
||||
engine.onClick(e, this.$refs.target);
|
||||
},
|
||||
|
||||
targetPointer(e, t){
|
||||
engine.onPointer(e, this.$refs.target, t);
|
||||
},
|
||||
resize(){
|
||||
let r = this.$refs.target;
|
||||
this.debug('resizing', r.clientWidth, r.clientHeight, r)
|
||||
engine.resize(r.clientWidth, r.clientHeight);
|
||||
},
|
||||
|
||||
control(){
|
||||
engine.pointerControls.lock(true);
|
||||
},
|
||||
|
||||
async fullScreen(){
|
||||
await engine.renderer.domElement.requestFullscreen()
|
||||
},
|
||||
|
||||
async setGameHeader(){
|
||||
let screenshot = await engine.captureScreenshot();
|
||||
let fd = new FormData();
|
||||
fd.append('file', screenshot);
|
||||
await this.$api.game.setHeader(this.modelValue.id, fd);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user