mirror of
https://github.com/robonen/canvas-3d.git
synced 2026-03-20 02:44:40 +00:00
43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const axes = ['x', 'y', 'z'];
|
|
const projections = [
|
|
'Без проекции',
|
|
'Изометрическая',
|
|
'Диметрическая',
|
|
'Триметрическая',
|
|
'Одноточечная перспективная',
|
|
'Двухточечная перспективная',
|
|
];
|
|
|
|
const activeProjection = ref<number>(0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<Accordion title="Перемещение">
|
|
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
|
|
</Accordion>
|
|
<Accordion title="Вращение">
|
|
<FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
|
|
</Accordion>
|
|
<Accordion title="Масштабирование">
|
|
<FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1"
|
|
:defaultValue="1"/>
|
|
</Accordion>
|
|
<Accordion title="Проекции">
|
|
<GridContainer>
|
|
<GridElement v-for="(projection, i) in projections" :is-active="activeProjection === i" :key="projection"
|
|
:title="projection" @click="activeProjection = i"/>
|
|
</GridContainer>
|
|
</Accordion>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 16px;
|
|
}
|
|
</style>
|