mns-mini-zabor/components/model/fence.vue

110 lines
4.8 KiB
Vue

<script setup lang="ts">
const props = defineProps(['index', 'models'])
const lamelles_count = use_lamelles_count()
const fence_section = use_fence_section()
const section_count = use_section_count()
const extra_section = use_extra_section()
const remove_pillar = use_remove_pillar()
const lSize = 0.115
const bSize = 0.0235
const pillar_size = 80 * 0.001
const pillar_one_pos = ref(fence_section.value * -0.5 - 0.015)
const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
const scale_koef = 2.5
const show_pillar_one = ref(props.index == 1)
const show_pillar_two = ref(true)
const make_translate_to_section = (source = fence_section.value) => {
const one_s = (source + pillar_size + bSize)
let r = (props.index - 1) * one_s * scale_koef
return r
}
const translate_to_section = ref(make_translate_to_section())
watch(fence_section, () => {
translate_to_section.value = make_translate_to_section()
})
const extra = ref((extra_section && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false)
if (extra.value) {
pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
}
watch([section_count, fence_section, extra_section], () => {
extra.value = (extra_section.value && props.index == (section_count.value + 1)) ? extra_section.value * 0.001 : false
if (extra_section && props.index == (section_count.value + 1)) {
pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
// translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
} else {
pillar_one_pos.value = fence_section.value * -0.5 - 0.015
pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
// translate_to_section.value = make_translate_to_section()
}
})
</script>
<template>
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`"
:position-y="extra ? 1 : 0">
<TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
:position-z="0">
<TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
<ModelItem :model="props.models.fence" />
</TresGroup>
<template v-for="(n, i) in lamelles_count">
<TresGroup :position-y="(lSize * i)">
<ModelItem :model="props.models.fence" />
</TresGroup>
</template>
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
<ModelItem :model="props.models.fence" />
</TresGroup>
</TresGroup>
<TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos"
:position-z="0">
<TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
<ModelItem :model="props.models.fence" />
</TresGroup>
<template v-for="(n, i) in lamelles_count">
<TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
<ModelItem :model="props.models.fence" />
</TresGroup>
</template>
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
<ModelItem :model="props.models.fence" />
</TresGroup>
</TresGroup>
<TresGroup name="lamelles">
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]"
:scale-x="((extra as number) || fence_section) * 10">
<ModelItem :model="props.models.lamelle" />
</TresGroup>
</template>
</TresGroup>
<TresGroup name="lam_fastening_one">
<template v-for="(n, i) in lamelles_count">
<TresGroup :position-y="(lSize * i)" :position-x="pillar_one_pos">
<ModelItem :model="props.models.fastening" />
</TresGroup>
</template>
</TresGroup>
<TresGroup name="lam_fastening_two">
<template v-for="(n, i) in lamelles_count">
<TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]" :position-x="pillar_two_pos">
<ModelItem :model="props.models.fastening" />
</TresGroup>
</template>
</TresGroup>
<TresGroup name="top_section" :scale-x="((extra as number) || fence_section) * 10"
:position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
<ModelItem :model="props.models.top" />
</TresGroup>
</TresGroup>
</template>