92 lines
5.1 KiB
Vue
92 lines
5.1 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>
|
|
<template v-if="currentObject?.__o">
|
|
<v-card subtitle="Position" class="ma-1" color="light-blue-darken-4">
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.position.x"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.position.y"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.position.z"></v-number-input>
|
|
</v-card>
|
|
<v-card subtitle="Rotation" class="ma-1" color="green-darken-4">
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.rotation.x"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.rotation.y"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.rotation.z"></v-number-input>
|
|
</v-card>
|
|
<v-card subtitle="Scale" class="ma-1" color="pink-darken-4">
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="x" v-model="currentObject.__o.scale.x"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="y" v-model="currentObject.__o.scale.y"></v-number-input>
|
|
<v-number-input :precision="null" controlVariant="stacked" hide-details density="compact" label="z" v-model="currentObject.__o.scale.z"></v-number-input>
|
|
</v-card>
|
|
</template>
|
|
</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 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>
|
|
|
|
<script>
|
|
|
|
import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
|
|
|
|
export default {
|
|
mixins: [GameEnvironmentMixin],
|
|
props:{
|
|
modelValue: Object,
|
|
},
|
|
data(){
|
|
return {
|
|
env: 'GameDesigner',
|
|
scenesList: [],
|
|
objectsList: [],
|
|
mode: 'translate',
|
|
pointerDownTime: 0,
|
|
scenario: null,
|
|
renderType: 'ST',
|
|
cameraType: 'perspective'
|
|
}
|
|
},
|
|
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script> |