<script setup lang="ts">
import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
import { useTexture } from '@tresjs/core'
import { useGLTF } from '@tresjs/cientos'
const section_count = useState('section_count')

const { renderer } = useTresContext()
renderer.value.toneMapping = ReinhardToneMapping

renderer.value.shadowMap.enabled = true
renderer.value.shadowMap.type = PCFShadowMap


const pbrTexture = await useTexture({
    map: '/texture/Ground039_4K-JPG_Color.jpg',
    displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
    roughnessMap: '/texture/Ground039_4K-JPG_Roughness.jpg',
    normalMap: '/texture/Ground039_4K-JPG_NormalGL.jpg',
    aoMap: '/texture/Ground039_4K-JPG_AmbientOcclusion.jpg',
    // metalnessMap: '/textures/myMetalnessTexture.jpg',
    // matcap: '/textures/myMatcapTexture.jpg',
    // alphaMap: '/textures/myAlphaMapTexture.jpg'
})
const repeat = 5
for (const key in pbrTexture) {
    if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
        const element = pbrTexture[key];
        if (element && element.wrapS) {
            element.wrapS = RepeatWrapping
            element.wrapT = RepeatWrapping
            element.repeat.x = repeat
            element.repeat.y = repeat
        }
    }
}
const { scene: top } = await useGLTF('/models_one/verh_100.glb')
const { scene: fence } = await useGLTF('/models_one/fence.glb')
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')

</script>
<template>
    <TresGroup :translate-y="-3.25">
        <TresMesh receive-shadow :translate-y="-0.5">
            <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
            <TresMeshStandardMaterial v-bind="pbrTexture" :metalness="0.2" :roughness="0.8" :opacity="0.5" />
        </TresMesh>
        <template v-for="i in section_count">
            <template v-if="i <= 20">
                <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
            </template>
        </template>
    </TresGroup>
</template>