From d7dcbafce767d0c6d87ff8b7ebd6247741cc4184 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 14 Jun 2024 16:06:56 +0300
Subject: [PATCH] position

---
 app.vue                         |  4 +-
 components/calcModels.vue       | 72 +++++++++++++++++++++++---
 components/calcValues.vue       |  9 ++--
 components/model/fence.vue      | 21 ++++----
 components/model/parametric.vue | 89 +++------------------------------
 5 files changed, 92 insertions(+), 103 deletions(-)

diff --git a/app.vue b/app.vue
index 9a6dafc..4848ca6 100644
--- a/app.vue
+++ b/app.vue
@@ -129,7 +129,9 @@ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
     </div>
     <div class="siteblock siteblock_calc bg-white">
       <CalcValues />
-      <CalcModels />
+      <Suspense>
+        <CalcModels />
+      </Suspense>
     </div>
     <div class="siteblock bg-white" :id="delivery?.slug" v-if="deliveryText">
       <div class="container">
diff --git a/components/calcModels.vue b/components/calcModels.vue
index a0dda33..bc21ce4 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Environment, vLightHelper } from '@tresjs/cientos'
+import { RepeatWrapping, FrontSide, } from 'three';
+import { TresCanvas, useTexture } from '@tresjs/core'
+import { OrbitControls, Environment, useGLTF } from '@tresjs/cientos'
+
+const section_count = useState<number>('section_count')
+const fence_section = useState<number>('fence_section')
 
 const controlsState = reactive({
     minDistance: 5,
     maxDistance: 12,
     enablePan: false,
-    // enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
-    // maxZoom: 2,
-    // minZoom: 1,
 })
 const cameraStat = reactive({
     position: [-4, 2, 8],
@@ -17,8 +18,51 @@ const cameraStat = reactive({
     fov: 40,
 })
 
+const pointLight = ref()
+
+const groundMaterial = ref({
+    color: "#555",
+    roughness: 0.25,
+    metalness: 0,
+    side: FrontSide
+})
+const loadAll = async () => {
+    const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
+    pointLight.value = light.children[2]
+    pointLight.value.color = '#f0dea9'
+    pointLight.value.shadow.camera.near = 50
+    pointLight.value.shadow.bias = -0.001
+
+    const pbrTexture = await useTexture({
+        map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
+        displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
+        roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
+        normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
+        aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
+    })
+    const repeat = 10
+    for (const key in pbrTexture) {
+        if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
+            const key_p = key as keyof typeof pbrTexture
+            const element = pbrTexture[key_p]
+            if (element && element.wrapS) {
+                element.wrapS = RepeatWrapping
+                element.wrapT = RepeatWrapping
+                element.repeat.x = repeat
+                element.repeat.y = repeat
+                element.flipY = false
+            }
+        }
+    }
+    groundMaterial.value = Object.assign(groundMaterial.value, {
+        map: pbrTexture.map,
+        displacementMap: pbrTexture.displacementMap,
+        normalMap: pbrTexture.normalMap,
+    })
+}
 onMounted(() => {
     cameraStat.aspect = window.innerWidth / 600
+    loadAll()
 })
 </script>
 <template>
@@ -31,9 +75,21 @@ onMounted(() => {
                 <Suspense v-if="false">
                     <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
                 </Suspense>
-                <Suspense>
-                    <ModelParametric />
-                </Suspense>
+                <TresGroup :position-x="Math.min(section_count, 20) * fence_section * -1" :position-y="-3">
+                    <Suspense>
+                        <ModelParametric />
+                    </Suspense>
+                </TresGroup>
+                <TresMesh receive-shadow :position-y="-3.65" name="ground">
+                    <TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
+                    <TresMeshStandardMaterial v-bind="groundMaterial" />
+                </TresMesh>
+                <template v-if="pointLight">
+                    <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
+                        :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
+                </template>
+
+                <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
             </TresCanvas>
         </ClientOnly>
     </div>
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 44a486c..0b46798 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -10,17 +10,18 @@ const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
 const section_count = useState('section_count', () => 10)
 const extra_section = useState('extra_section', () => 0)
 const total_length = useState('total_length', () => (2000 * 8 - 100) * 0.001)
+const min_length = useState('min_length', () => 1000)
 
 const parametric = {
     length: {
-        min: 1000,
+        min: min_length.value,
         max: 2400,
         step: 1,
     },
     total_length: {
-        min: 1,
+        min: min_length.value * 0.001,
         max: undefined,
-        step: 0.01,
+        step: 0.5,
     },
     height: {
         min: 675,
@@ -92,7 +93,7 @@ const changeParametres = () => {
             form_state.total_length = parametric.total_length.min
             form_state.length = parametric.length.min
         }
-    }, 300)
+    }, 600)
 
     total_length.value = form_state.total_length
     lamelles_count.value = lamelles
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 4feef98..d30e1c3 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -7,6 +7,7 @@ const props = defineProps(['index', 'models'])
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
+const section_count = useState<number>('section_count')
 const pillar_color = useState<ralTypes>('pillar_color')
 const lamelle_color = useState<ralTypes>('lamelle_color')
 const remove_pillar = useState<boolean>('remove_pillar')
@@ -27,13 +28,8 @@ const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 
 const make_translate_to_section = () => {
-    let 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
-        r += (fence_section.value * 0.5 + bSize) * scale_koef
-        return -1 * r
-    }
+    const one_s = (fence_section.value + pillar_size + bSize)
+    let r = (props.index - 1) * one_s * scale_koef
     return r
 }
 const translate_to_section = ref(make_translate_to_section())
@@ -41,6 +37,7 @@ const translate_to_section = ref(make_translate_to_section())
 watch(fence_section, () => {
     translate_to_section.value = make_translate_to_section()
 })
+
 const s = 512
 const canvas = document.createElement('canvas')
 canvas.width = s
@@ -51,6 +48,7 @@ ctx.font = "512px serif"
 ctx.textAlign = "center"
 ctx.textBaseline = 'middle'
 ctx.fillText(props.index, s * 0.5, s * 0.5)
+
 const textures = []
 for (let index = 0; index < lamelles_count.value; index++) {
     const element = document.createElement('canvas')
@@ -61,12 +59,17 @@ for (let index = 0; index < lamelles_count.value; index++) {
         0, (s / lamelles_count.value) * index, s, s / lamelles_count.value,
         0, 0, s, s / lamelles_count.value
     );
-    // console.log(element.toDataURL())
     textures.push(new CanvasTexture(element))
 }
+const fenceRotate = { x: 0, y: 0 }
+if (props.index > 3) {
+    // fenceRotate.x = -Math.PI * 0.25
+    // fenceRotate.y = -Math.PI * 0.5
+}
 </script>
 <template>
-    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
+    <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :rotate-y="fenceRotate.y"
+        :rotate-x="fenceRotate.x">
         <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
             :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 480b167..a2e3967 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,80 +1,30 @@
 <script setup lang="ts">
 import {
-    ReinhardToneMapping, PCFSoftShadowMap, RepeatWrapping,
-    Color, DataTexture,
+    ReinhardToneMapping, PCFSoftShadowMap,
     PMREMGenerator, Euler,
-    FrontSide,
-    CanvasTexture
 } from 'three';
 import { EXRLoader } from 'three/examples/jsm/Addons.js';
-import { useTexture } from '@tresjs/core'
 import { useGLTF, } from '@tresjs/cientos'
-const section_count = useState('section_count')
+
+const section_count = useState<number>('section_count')
 
 const { scene, renderer, camera } = useTresContext()
 renderer.value.toneMapping = ReinhardToneMapping
 
 renderer.value.shadowMap.enabled = true
-// renderer.value.shadowMap.type = PCFSoftShadowMap
+renderer.value.shadowMap.type = PCFSoftShadowMap
 
-// const pbrTexture = await useTexture({
-//     map: '/texture/Grass01_MR_2K/Grass01_2K_BaseColor.png ',
-//     displacementMap: '/texture/Grass01_MR_2K/Grass01_2K_Height.png ',
-//     roughnessMap: '/texture/Grass01_MR_2K/Grass01_2K_Roughness.png',
-//     normalMap: '/texture/Grass01_MR_2K/Grass01_2K_Normal.png ',
-//     aoMap: '/texture/Grass01_MR_2K/Grass01_2K_AO.png ',
-//     // metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
-//     // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
-//     // alphaMap: '/textures/myAlphaMapTexture.jpg'
-// })
-const pbrTexture = await useTexture({
-    map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
-    displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
-    roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
-    normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
-    aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
-})
-const groundMaterial = {
-    map: pbrTexture.map,
-    displacementMap: pbrTexture.displacementMap,
-    normalMap: pbrTexture.normalMap,
-    color: "#555",
-    roughness: 0.25,
-    metalness: 0,
-    side: FrontSide
-}
-const repeat = 10
-for (const key in pbrTexture) {
-    if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
-        const key_p = key as keyof typeof pbrTexture
-        const element = pbrTexture[key_p]
-        if (element && element.wrapS) {
-            element.wrapS = RepeatWrapping
-            element.wrapT = RepeatWrapping
-            element.repeat.x = repeat
-            element.repeat.y = repeat
-            element.flipY = false
-        }
-    }
-}
 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 { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
 
-const { seek, seekAll } = useSeek()
+const { seek } = useSeek()
 watch(section_count, () => {
-    const fences = seekAll(scene.value, 'name', 'fence')
     const base = seek(scene.value, 'name', 'base')
     const n = (section_count.value as number)
-    if (fences.length > n) {
-        for (let i = fences.length; i > n; i--) {
-            const item = fences[i - 1]
-            if (item) {
-                base?.remove(item)
-            }
-        }
+    if (base?.children && n < base?.children.length) {
+        base.children = [...base?.children.slice(0, n)]
     }
 })
 
@@ -94,32 +44,9 @@ onMounted(() => {
         });
 })
 
-const pointLight = light.children[2]
-pointLight.color = '#f0dea9'
-pointLight.shadow.camera.near = 50
-pointLight.shadow.bias = -0.001
 </script>
 <template>
-    <TresGroup :translate-y="-3.25" name="base">
-        <TresMesh receive-shadow :position-y="-0.65" name="ground">
-            <TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial v-bind="groundMaterial" />
-        </TresMesh>
-        <TresMesh :position="Object.values(pointLight.position).map((el: any) => el * 2.5)" cast-shadow receive-shadow>
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshStandardMaterial />
-        </TresMesh>
-
-        <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
-            :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
-
-        <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
-        <template v-if="false">
-            <template v-for="i in light.children[1].children">
-                <TresDirectionalLight :position="i.position" :intensity="5" color="rgb(191,231,255)" cast-shadow />
-            </template>
-        </template>
-
+    <TresGroup name="base">
         <template v-for="i in section_count">
             <template v-if="i <= 20">
                 <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />