calc sections position

components/calcModels.vue

@@ -24,7 +24,6 @@ const controlsState = reactive({
             <Suspense>
                 <ModelParametric />
             </Suspense>
-            <TresDirectionalLight :position="[80, 70, 60]" :intensity="5" color="#fdf5ca" cast-shadow />
         </TresCanvas>
     </div>
 </template>

components/calcValues.vue

@@ -8,13 +8,13 @@ const extra_section = useState('section_count', () => 0)
 
 const parametric = {
     length: {
-        min: 400,
+        min: 1000,
         max: 2400,
-        step: 50,
+        step: 1,
     },
     total_length: {
-        min: 0.4,
+        min: 1,
-        step: 0.01,
+        step: 0.1,
     },
     height: {
         min: 675,

components/model/fence.vue

@@ -21,7 +21,7 @@ const scale_koef = 3
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 const make_translate_to_section = () => {
-    const r = (props.index - 1) / 2 * (fence_section.value + pillar_size + bSize) * scale_koef
+    const r = (fence_section.value * 0.5 + pillar_size * 4) + ((props.index - 1) / 2) * (fence_section.value + pillar_size + bSize) * scale_koef
     if (props.index % 2 == 0) {
         show_pillar_two.value = false
         show_pillar_one.value = true
@@ -36,7 +36,7 @@ watch(fence_section, () => {
 })
 </script>
 <template>
-    <TresGroup :scale="scale_koef" :position-x="translate_to_section">
+    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
         <TresGroup name="pillar_one" v-if="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="pillar_color" />
@@ -65,9 +65,9 @@ watch(fence_section, () => {
             </TresGroup>
         </TresGroup>
 
-        <TresGroup name="lamelles">
+        <TresGroup name="lamelles" :scale-x="fence_section * 10" :position-x="pillar_size * 0.5" :position-z="0.02">
             <template v-for="(n, i) in lamelles_count">
-                <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
+                <TresGroup :position-y="(lSize * i)">
                     <ModelItem :model="props.models.lamelle" :color="lamelle_color" />
                 </TresGroup>
             </template>

components/model/item.vue

@@ -29,8 +29,10 @@ const getMaterial = () => {
 const material = getMaterial()
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
+        if (el.isMesh) {
             el.castShadow = true
             el.receiveShadow = true
+        }
         if (props.removePos) {
             el.translateX(-el.position.x)
             el.translateY(-el.position.y)
@@ -99,7 +101,7 @@ watch(targetExplosion, () => {
     <Suspense>
         <TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
             ref="model">
-            <primitive :object="scene.children[0]" cast-shadow receive-shadow />
+            <primitive :object="scene.children[0]" />
         </TresGroup>
     </Suspense>
 </template>

components/model/parametric.vue

@@ -4,21 +4,20 @@ import { useTexture } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
 const section_count = useState('section_count')
 
-const { renderer } = useTresContext()
+const { scene, renderer, camera } = 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',
+    metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
-    // matcap: '/textures/myMatcapTexture.jpg',
+    // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
     // alphaMap: '/textures/myAlphaMapTexture.jpg'
 })
 const repeat = 5
@@ -37,13 +36,20 @@ 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')
-
+const { seekAll } = useSeek()
+watch(section_count, () => {
+    const fences = seekAll(scene.value, 'name', 'fence')
+    if (fences.length > (section_count.value as number)) {
+        fences[fences.length - 1].remove()
+        // renderer.value.render(scene.value, camera.value)
+    }
+})
 </script>
 <template>
-    <TresGroup :translate-y="-3.25">
+    <TresGroup :translate-y="-3.25" name="base">
-        <TresMesh receive-shadow :translate-y="-0.5">
+        <TresMesh receive-shadow :translate-y="-0.5" name="ground">
             <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial v-bind="pbrTexture" :metalness="0.2" :roughness="0.8" :opacity="0.5" />
+            <TresMeshStandardMaterial v-bind="pbrTexture" :metalness="1" :roughness="0.8" :opacity="0.5" />
         </TresMesh>
         <template v-for="i in section_count">
             <template v-if="i <= 20">