From 7bca3fff2b9ea2e593cb32f26bf2e7bed6eaf551 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 11 Jun 2024 17:01:25 +0300
Subject: [PATCH] multiple

---
 components/calcValues.vue       |   3 +
 components/model/fence.vue      | 112 +++++++++++++++++++++++++++++++
 components/model/parametric.vue | 114 ++------------------------------
 3 files changed, 120 insertions(+), 109 deletions(-)
 create mode 100644 components/model/fence.vue

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 915c569..e27a054 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -3,6 +3,8 @@ const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
 const pillar_color = useState('pillar_color', () => '#828282')
 const lamelle_color = useState('lamelle_color', () => '#C2B078')
+const section_count = useState('section_count', () => 1)
+const extra_section = useState('section_count', () => 0)
 
 const parametric = {
     length: {
@@ -74,6 +76,7 @@ const changeParametres = () => {
     const t_f = (form_state.total_length_mm - form_state.fence_length)
     const i_f = (form_state.length - form_state.fence_length)
     form_state.full_sections = Math.floor(t_f / i_f)
+    section_count.value = form_state.full_sections
     if (t_f % i_f) {
         form_state.extra_section = Math.round(t_f % i_f)
     } else {
diff --git a/components/model/fence.vue b/components/model/fence.vue
new file mode 100644
index 0000000..dcda05b
--- /dev/null
+++ b/components/model/fence.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
+import { useTexture } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+
+const props = defineProps(['index'])
+
+const lamelles_count = useState<number>('lamelles_count')
+const fence_section = useState<number>('fence_section')
+const pillar_color = useState('pillar_color')
+const lamelle_color = useState('lamelle_color')
+
+const lSize = 0.115
+const bSize = 0.0235
+const pillar_size = 80 * 0.001
+
+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_NormalDX.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')
+
+const pillar_one_pos = ref(fence_section.value * -0.5 - 0.01)
+const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
+
+watch(fence_section, () => {
+    pillar_one_pos.value = fence_section.value * -0.5 - 0.01
+    pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize
+})
+</script>
+<template>
+    <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25" :translate-x="(props.index || 0) * 0.5"
+        :translate-z="(props.index || 0) * 0.5">
+        <TresMesh receive-shadow :translate-y="-0.5">
+            <TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
+            <TresMeshStandardMaterial v-bind="pbrTexture" color="black" metalness="0" roughness="0.5" />
+        </TresMesh>
+
+        <TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">
+            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
+                <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+            </TresGroup>
+        </template>
+        <TresGroup :position="[pillar_one_pos, (lSize * lamelles_count), 0]" :scale="[1, 0.5, 1]">
+            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+
+        <TresGroup :position="[pillar_two_pos, (lSize * -0.5), 0]" :scale="[-1, 0.5, 1]">
+            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
+                <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+            </TresGroup>
+        </template>
+        <TresGroup :position="[pillar_two_pos, (lSize * lamelles_count), 0]" :scale="[-1, 0.5, 1]">
+            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
+                <ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
+            </TresGroup>
+        </template>
+
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
+                <ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
+            </TresGroup>
+        </template>
+
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
+                <ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
+            </TresGroup>
+        </template>
+
+        <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
+            <ModelItem :model="top" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+    </TresGroup>
+</template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index bb7ccfd..dbd97bc 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,114 +1,10 @@
 <script setup lang="ts">
-import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
-import { useTexture } from '@tresjs/core'
-import { useGLTF } from '@tresjs/cientos'
-
-const lamelles_count = useState<number>('lamelles_count')
-const fence_section = useState<number>('fence_section')
-const pillar_color = useState('pillar_color')
-const lamelle_color = useState('lamelle_color')
-
-const lSize = 0.115
-const bSize = 0.0235
-const pillar_size = 80 * 0.001
-
-const { renderer } = useTresContext()
-renderer.value.toneMapping = ReinhardToneMapping
-
-renderer.value.shadowMap.enabled = true
-renderer.value.shadowMap.type = PCFShadowMap
-// public/texture/Ground039_4K-JPG_AmbientOcclusion.jpg
-//  public/texture/Ground039_4K-JPG_Color.jpg 
-//  public/texture/Ground039_4K-JPG_Displacement.jpg 
-//  public/texture/Ground039_4K-JPG_NormalDX.jpg
-//   public/texture/Ground039_4K-JPG_NormalGL.jpg 
-//   public/texture/Ground039_4K-JPG_Roughness.jpg
-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_NormalDX.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')
-
-const pillar_one_pos = ref(fence_section.value * -0.5 - 0.01)
-const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
-
-watch(fence_section, () => {
-    pillar_one_pos.value = fence_section.value * -0.5 - 0.01
-    pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize
-})
+const section_count = useState('section_count')
 </script>
 <template>
-    <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
-        <TresMesh receive-shadow :translate-y="-0.5">
-            <TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial v-bind="pbrTexture" color="black" metalness="0" roughness="0.5" />
-        </TresMesh>
-
-        <TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">
-            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-        </TresGroup>
-        <template v-for="(n, i) in lamelles_count">
-            <TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
-                <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-            </TresGroup>
+    <template v-for="i in section_count">
+        <template v-if="i <= 5">
+            <ModelFence :index="i" />
         </template>
-        <TresGroup :position="[pillar_one_pos, (lSize * lamelles_count), 0]" :scale="[1, 0.5, 1]">
-            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-        </TresGroup>
-
-        <TresGroup :position="[pillar_two_pos, (lSize * -0.5), 0]" :scale="[-1, 0.5, 1]">
-            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-        </TresGroup>
-        <template v-for="(n, i) in lamelles_count">
-            <TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
-                <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-            </TresGroup>
-        </template>
-        <TresGroup :position="[pillar_two_pos, (lSize * lamelles_count), 0]" :scale="[-1, 0.5, 1]">
-            <ModelItem :model="fence" :remove-pos="true" :color="pillar_color" />
-        </TresGroup>
-
-        <template v-for="(n, i) in lamelles_count">
-            <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, (lSize * i), 0.02]">
-                <ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
-            </TresGroup>
-        </template>
-
-        <template v-for="(n, i) in lamelles_count">
-            <TresGroup :position="[pillar_one_pos, (lSize * i), 0]">
-                <ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
-            </TresGroup>
-        </template>
-
-        <template v-for="(n, i) in lamelles_count">
-            <TresGroup :position="[pillar_two_pos, (lSize * i), 0]" :scale="[-1, 1, 1]">
-                <ModelItem :model="fastening" :remove-pos="true" :color="pillar_color" />
-            </TresGroup>
-        </template>
-
-        <TresGroup :scale-x="fence_section * 10" :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
-            <ModelItem :model="top" :remove-pos="true" :color="pillar_color" />
-        </TresGroup>
-    </TresGroup>
+    </template>
 </template>
\ No newline at end of file