From bc9332f38f21d3d6c3333330192310dc44af122e Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 12 Jun 2024 11:29:01 +0300
Subject: [PATCH] fence perspective

---
 components/calcModels.vue       |   6 +-
 components/calcValues.vue       |   2 +-
 components/expDiagram.vue       |   2 +-
 components/loader.vue           |   4 +-
 components/model/fence.vue      | 152 ++++++++++++++------------------
 components/model/parametric.vue |  52 ++++++++++-
 6 files changed, 122 insertions(+), 96 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 3ba6ea0..2dfa424 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
+import { OrbitControls, Environment } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 5,
@@ -16,7 +16,7 @@ const controlsState = reactive({
     <div class="container min-w-full relative">
         <Loader />
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[8, 2, -4]" />
+            <TresPerspectiveCamera :position="[-4, 2, 8]" />
             <OrbitControls v-bind="controlsState" make-default />
             <Suspense>
                 <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
@@ -24,7 +24,7 @@ const controlsState = reactive({
             <Suspense>
                 <ModelParametric />
             </Suspense>
-            <TresDirectionalLight :position="[80, 70, 60]" :intensity="10" color="#fdf5ca" cast-shadow />
+            <TresDirectionalLight :position="[80, 70, 60]" :intensity="5" color="#fdf5ca" cast-shadow />
         </TresCanvas>
     </div>
 </template>
diff --git a/components/calcValues.vue b/components/calcValues.vue
index e27a054..c391e21 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -14,7 +14,7 @@ const parametric = {
     },
     total_length: {
         min: 0.4,
-        step: 0.05,
+        step: 0.01,
     },
     height: {
         min: 675,
diff --git a/components/expDiagram.vue b/components/expDiagram.vue
index 02f3264..543b3d3 100644
--- a/components/expDiagram.vue
+++ b/components/expDiagram.vue
@@ -23,7 +23,7 @@ const scrollBlock = (e: Event) => {
     }
 }
 const targetExplosion = useState('targetExplosion', () => {
-    const k = 3
+    const k = 1.5
     return {
         kosynka: [0 * k, 0 * k, 0.75 * k],
         krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
diff --git a/components/loader.vue b/components/loader.vue
index f0f7d31..246299d 100644
--- a/components/loader.vue
+++ b/components/loader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const { hasFinishLoading, progress, items } = await useProgress()
-console.log(progress)
+import { useProgress } from '@tresjs/cientos'
+const { hasFinishLoading, progress } = await useProgress()
 </script>
 <template>
     <Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
diff --git a/components/model/fence.vue b/components/model/fence.vue
index dcda05b..0de6406 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -1,9 +1,5 @@
 <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 props = defineProps(['index', 'models'])
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
@@ -14,99 +10,85 @@ 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)
+const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
 
 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
+    pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
+})
+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
+    if (props.index % 2 == 0) {
+        show_pillar_two.value = false
+        show_pillar_one.value = true
+        return -1 * r
+    }
+    return r
+}
+const translate_to_section = ref(make_translate_to_section())
+
+watch(fence_section, () => {
+    translate_to_section.value = make_translate_to_section()
 })
 </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 :scale="scale_koef" :position-x="translate_to_section">
+        <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" />
+            </TresGroup>
+            <template v-for="(n, i) in lamelles_count">
+                <TresGroup :position-y="(lSize * i)">
+                    <ModelItem :model="props.models.fence" :color="pillar_color" />
+                </TresGroup>
+            </template>
+            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
+                <ModelItem :model="props.models.fence" :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 name="pillar_two" v-if="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="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="pillar_color" />
+                </TresGroup>
+            </template>
+            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
+                <ModelItem :model="props.models.fence" :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 name="lamelles">
+            <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="props.models.lamelle" :color="lamelle_color" />
+                </TresGroup>
+            </template>
+        </TresGroup>
+        <TresGroup name="lamelles_fastening_one" :position-x="pillar_one_pos">
+            <template v-for="(n, i) in lamelles_count">
+                <TresGroup :position-y="(lSize * i)">
+                    <ModelItem :model="props.models.fastening" :color="pillar_color" />
+                </TresGroup>
+            </template>
+        </TresGroup>
+        <TresGroup name="lamelles_fastening_two" :position-x="pillar_two_pos">
+            <template v-for="(n, i) in lamelles_count">
+                <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
+                    <ModelItem :model="props.models.fastening" :remove-pos="true" :color="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="pillar_color" />
         </TresGroup>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index dbd97bc..73a845f 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,10 +1,54 @@
 <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>
-    <template v-for="i in section_count">
-        <template v-if="i <= 5">
-            <ModelFence :index="i" />
+    <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>
-    </template>
+    </TresGroup>
 </template>
\ No newline at end of file