<script setup lang="ts">
const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')

const lSize = 0.115
const bSize = 0.0235
const pillar_size = 80 * 0.001
const { scene, renderer, camera } = useTresContext()
watch([lamelles_count, fence_section], () => {
    // console.log(scene)
    console.log(lamelles_count)
    renderer.value.render(scene.value, camera.value)
})
</script>
<template>
    <Suspense>
        <TresGroup>
            <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
                :remove-pos="true" />
            <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
                :remove-pos="true" />
            <ModelItem model-url="/models_one/verh_100.glb"
                :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
            <ModelItem model-url="/models_one/verh_100.glb"
                :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
            <template v-for="(n, i) in lamelles_count">
                <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
                </TresGroup>
                <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
                </TresGroup>
                <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
                    <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" />
                </TresGroup>
            </template>
            <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
                <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" />
            </TresGroup>
        </TresGroup>
    </Suspense>
</template>