131 lines
5.6 KiB
Vue
131 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import { getColorHexFromRal } from '@/components/ral'
|
|
import type { ralTypes } from '@/components/ral'
|
|
import { CanvasTexture, DoubleSide, RepeatWrapping, UVMapping } from 'three';
|
|
|
|
const props = defineProps(['index', 'models'])
|
|
|
|
const lamelles_count = useState<number>('lamelles_count')
|
|
const fence_section = useState<number>('fence_section')
|
|
const section_count = useState<number>('section_count')
|
|
const pillar_color = useState<ralTypes>('pillar_color')
|
|
const lamelle_color = useState<ralTypes>('lamelle_color')
|
|
const remove_pillar = useState<boolean>('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)
|
|
|
|
watch([fence_section, lamelles_count], () => {
|
|
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
|
|
})
|
|
const scale_koef = 2.5
|
|
const show_pillar_one = ref(props.index == 1)
|
|
const show_pillar_two = ref(true)
|
|
|
|
const make_translate_to_section = () => {
|
|
const one_s = (fence_section.value + 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 s = 512
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = s
|
|
canvas.height = s
|
|
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
|
|
ctx.fillStyle = "red"
|
|
ctx.font = "512px serif"
|
|
ctx.textAlign = "center"
|
|
ctx.textBaseline = 'middle'
|
|
ctx.fillText(props.index, s * 0.5, s * 0.5)
|
|
|
|
const textures = []
|
|
for (let index = 0; index < lamelles_count.value; index++) {
|
|
const element = document.createElement('canvas')
|
|
element.width = s
|
|
element.height = s / lamelles_count.value
|
|
const e_ctx = element.getContext('2d') as CanvasRenderingContext2D
|
|
e_ctx.drawImage(canvas,
|
|
0, (s / lamelles_count.value) * index, s, s / lamelles_count.value,
|
|
0, 0, s, s / lamelles_count.value
|
|
);
|
|
textures.push(new CanvasTexture(element))
|
|
}
|
|
const fenceRotate = { x: 0, y: 0 }
|
|
if (props.index > 3) {
|
|
// fenceRotate.x = -Math.PI * 0.25
|
|
// fenceRotate.y = -Math.PI * 0.5
|
|
}
|
|
</script>
|
|
<template>
|
|
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :rotate-y="fenceRotate.y"
|
|
:rotate-x="fenceRotate.x">
|
|
<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" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
<template v-for="(n, i) in lamelles_count">
|
|
<TresGroup :position-y="(lSize * i)">
|
|
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
</template>
|
|
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
|
|
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
|
</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" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
<template v-for="(n, i) in lamelles_count">
|
|
<TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
|
|
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
</template>
|
|
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
|
|
<ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
|
|
</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="fence_section * 10">
|
|
<ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)"
|
|
:map="textures[textures.length - 1 - i]" />
|
|
</TresGroup>
|
|
</template>
|
|
</TresGroup>
|
|
<TresGroup name="lamelles_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" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
</template>
|
|
</TresGroup>
|
|
<TresGroup name="lamelles_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" :remove-pos="true"
|
|
:color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
</template>
|
|
</TresGroup>
|
|
<TresGroup name="top_section" :scale-x="fence_section * 10"
|
|
:position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
|
|
<ModelItem :model="props.models.top" :color="getColorHexFromRal(pillar_color)" />
|
|
</TresGroup>
|
|
</TresGroup>
|
|
</template> |