From c6b97830fa9384cef559c551bd06a73c6da8d8c9 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 18 Sep 2024 16:29:45 +0300
Subject: [PATCH 1/5] Second light

---
 components/calcModels.vue       | 28 +++++++++++++++++-----------
 components/model/parametric.vue | 12 ++++++------
 utils/material.ts               |  4 ++--
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 78d0687..81218b5 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -3,6 +3,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 //@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 
 const fence_section = use_fence_section()
 const section_count = use_section_count()
@@ -11,11 +12,12 @@ const max_size = use_max_size()
 
 const controlsState = reactive({
     distance: section_count.value,
-    minDistance: 7,
-    maxDistance: 20,
+    minDistance: 10,
+    maxDistance: 10,
     position: { x: 0, y: 0, z: 0 },
     enablePan: false,
-    maxPolarAngle: (Math.PI / 2) - 0.2,
+    minPolarAngle: degToRad(30),
+    maxPolarAngle: degToRad(90),
 })
 const cameraStat = reactive({
     position: [-4, 2, 8],
@@ -26,18 +28,19 @@ const cameraStat = reactive({
 const pointLight = ref()
 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.intensity = pointLight.value.intensity * 0.1
-    pointLight.value.shadow.camera.near = 50
+    pointLight.value = light.children[2].clone()
+    pointLight.value.intensity = pointLight.value.intensity * 0.05
     pointLight.value.shadow.bias = -0.002
     const j = 4
     pointLight.value.shadow.mapSize.x = 512 * j
     pointLight.value.shadow.mapSize.y = 512 * j
 
-    const k = 3
+    const k = 1
+    // pointLight.value.position.x = pointLight.value.position.x * k
+    // pointLight.value.position.y = pointLight.value.position.y * k
+    // pointLight.value.position.z = pointLight.value.position.z * k
     pointLight.value.position.x = pointLight.value.position.x * k
-    pointLight.value.position.y = pointLight.value.position.y * k
+    pointLight.value.position.y = pointLight.value.position.z * k
     pointLight.value.position.z = pointLight.value.position.z * k
 }
 const camera = ref("camera")
@@ -62,7 +65,7 @@ watch([section_count, extra_section], () => {
                 </div>
             </template>
             <Loader />
-            <TresCanvas>
+            <TresCanvas clear-color="#ccc">
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
@@ -76,8 +79,11 @@ watch([section_count, extra_section], () => {
                 </TresMesh>
 
                 <template v-if="pointLight">
-                    <TresPointLight v-bind="pointLight" cast-shadow />
+                    <TresPointLight v-bind="pointLight.clone()" cast-shadow />
+                    <TresPointLight v-bind="pointLight.clone()" :position-x="pointLight.position.x * -1"
+                        :position-z="pointLight.position.z * -1" cast-shadow />
                 </template>
+                <TresAmbientLight intensity="10" />
             </TresCanvas>
         </ClientOnly>
     </div>
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index d9cd34e..4a8db9f 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -114,12 +114,12 @@ onMounted(async () => {
     if (renderer.value && camera.value) {
         renderer.value.render(scene.value, camera.value)
     }
-    scene.value.environment = result.renderTarget.texture
-    scene.value.background = result.renderTarget.texture
-    scene.value.background.mapping = EquirectangularReflectionMapping
-    scene.value.backgroundRotation = new Euler(0, 10, 0)
-    scene.value.backgroundIntensity = 1.5
-    scene.value.backgroundBlurriness = 0.06
+    // scene.value.environment = result.renderTarget.texture
+    // scene.value.background = result.renderTarget.texture
+    // scene.value.background.mapping = EquirectangularReflectionMapping
+    // scene.value.backgroundRotation = new Euler(0, 10, 0)
+    // scene.value.backgroundIntensity = 1.5
+    // scene.value.backgroundBlurriness = 0.06
     result.renderTarget.texture.dispose();
 })
 
diff --git a/utils/material.ts b/utils/material.ts
index b9a6cdf..9a40cdd 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -1,5 +1,5 @@
 import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
-import { useLoader } from '@tresjs/core'
+import { useLoader, type TresLoader } from '@tresjs/core'
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -31,7 +31,7 @@ export const set_material = (scene: any, color: any, count: number | undefined =
         color: new Color(c || '#9c9c00'),
         alphaMap: count ? texture : null,
         transparent: true,
-        opacity: 0.75,
+        opacity: 1,
         // roughness: 0.5,
         // metalness: 0,
         side: DoubleSide,

From 6a25442c191028015b0bb657037c82cace4b5651 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 18 Sep 2024 17:01:13 +0300
Subject: [PATCH 2/5] sides

---
 components/model/fence.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/components/model/fence.vue b/components/model/fence.vue
index 2729f5e..f17004f 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -87,6 +87,26 @@ watch([section_count, fence_section, extra_section], () => {
         pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
         // translate_to_section.value = make_translate_to_section()
     }
+
+    if ((section_count.value + ~~(!!extra_section.value)) > 3) {
+        const total = (section_count.value + ~~(!!extra_section.value))
+        const size = Math.ceil(total / 4)
+        console.log({ total, size, index: props.index });
+        switch(Math.ceil(props.index / size)) {
+            case 1:
+                console.log('1')
+                break;
+            case 2:
+                console.log('2')
+                break;
+            case 3:
+                console.log('3')
+                break;
+            case 4:
+                console.log('4')
+                break;
+        }
+    }
 })
 </script>
 <template>

From 9c0dca4946245eeb4dad8aeaa95f4324d1a74d2d Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 19 Sep 2024 16:26:18 +0300
Subject: [PATCH 3/5] fence lines

---
 components/calcModels.vue       | 12 +++----
 components/model/fence.vue      | 20 -----------
 components/model/line.vue       | 59 ++++++++++++++++++++++++++++++++
 components/model/parametric.vue | 60 +++++++++++++++++++--------------
 4 files changed, 100 insertions(+), 51 deletions(-)
 create mode 100644 components/model/line.vue

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 81218b5..80c9b16 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -12,12 +12,12 @@ const max_size = use_max_size()
 
 const controlsState = reactive({
     distance: section_count.value,
-    minDistance: 10,
-    maxDistance: 10,
+    minDistance: 20,
+    maxDistance: 20,
     position: { x: 0, y: 0, z: 0 },
     enablePan: false,
     minPolarAngle: degToRad(30),
-    maxPolarAngle: degToRad(90),
+    maxPolarAngle: degToRad(80),
 })
 const cameraStat = reactive({
     position: [-4, 2, 8],
@@ -53,7 +53,7 @@ watch([section_count, extra_section], () => {
     let v = (section_count.value + ~~(!!extra_section.value)) * 2
     if (v < controlsState.minDistance) v = controlsState.minDistance;
     if (v > controlsState.maxDistance) v = controlsState.maxDistance;
-    (camera.value as any).position.normalize().multiplyScalar(v)
+    // (camera.value as any).position.normalize().multiplyScalar(v)
 })
 </script>
 <template>
@@ -68,12 +68,12 @@ watch([section_count, extra_section], () => {
             <TresCanvas clear-color="#ccc">
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
+                <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1">
                     <Suspense>
                         <ModelParametric />
                     </Suspense>
                 </TresGroup>
-                <TresMesh receive-shadow :position-y="-3.65" name="ground">
+                <TresMesh receive-shadow name="ground">
                     <TresCircleGeometry :args="[50, 32]" :rotate-x="-Math.PI * 0.5" />
                     <TresShadowMaterial :opacity="0.2" />
                 </TresMesh>
diff --git a/components/model/fence.vue b/components/model/fence.vue
index f17004f..2729f5e 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -87,26 +87,6 @@ watch([section_count, fence_section, extra_section], () => {
         pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
         // translate_to_section.value = make_translate_to_section()
     }
-
-    if ((section_count.value + ~~(!!extra_section.value)) > 3) {
-        const total = (section_count.value + ~~(!!extra_section.value))
-        const size = Math.ceil(total / 4)
-        console.log({ total, size, index: props.index });
-        switch(Math.ceil(props.index / size)) {
-            case 1:
-                console.log('1')
-                break;
-            case 2:
-                console.log('2')
-                break;
-            case 3:
-                console.log('3')
-                break;
-            case 4:
-                console.log('4')
-                break;
-        }
-    }
 })
 </script>
 <template>
diff --git a/components/model/line.vue b/components/model/line.vue
new file mode 100644
index 0000000..da63898
--- /dev/null
+++ b/components/model/line.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Box3, Vector3 } from 'three';
+import { degToRad } from 'three/src/math/MathUtils.js';
+
+const props = defineProps(['number', 'count', 'models'])
+const rotate = () => {
+    switch (props.number) {
+        case 1:
+            return degToRad(0)
+        case 2:
+            return degToRad(90)
+        case 3:
+            return degToRad(180)
+        case 4:
+            return degToRad(270)
+    }
+}
+const { seekByName } = useSeek()
+const { scene } = useTresContext()
+
+const section_count = use_section_count()
+const extra_section = use_extra_section()
+
+const size = ref(new Vector3())
+const total = ref((section_count.value + ~~(!!extra_section.value)))
+
+const count_pos = () => {
+    console.log('line count pos')
+    total.value = (section_count.value + ~~(!!extra_section.value))
+
+    const line = seekByName(scene.value, `line_${props.number}`)
+    if (line && line.children.length) {
+        const fence = line.children[0];
+        if (fence) {
+            const box = new Box3();
+            fence.children.forEach(element => {
+                box.expandByObject(element);
+            });
+            box.getSize(size.value)
+        }
+        line.updateMatrixWorld()
+    }
+}
+onMounted(() => {
+    count_pos()
+})
+watch(() => [props.count, section_count.value, extra_section.value],
+    count_pos
+)
+</script>
+<template>
+    <TresGroup :name="`line_${props.number}`">
+        <template v-for="i in props.count">
+            <template v-if="(i + (props.number - 1) * props.count) <= total" :key="(i + (props.number - 1) * props.count)">
+                <ModelFence :index="i + (props.number - 1) * props.count" :models="props.models" />
+            </template>
+        </template>
+    </TresGroup>
+</template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 4a8db9f..9bbfa5b 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -12,6 +12,7 @@ import { GainMapLoader, } from '@monogrid/gainmap-js'
 //@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 
 const pillar_color = use_pillar_color()
 const lamelle_color = use_lamelle_color()
@@ -91,12 +92,39 @@ watch(pillar_color, () => {
         set_material(element, getColorHexFromRal(pillar_color.value))
     })
 })
-watch([section_count, extra_section], () => {
+
+const total = ref((section_count.value + ~~(!!extra_section.value)))
+const size = ref(Math.ceil(total.value / 4))
+const count = ref((total.value >= 4) ? size.value : total.value)
+
+watch(() => [section_count.value, extra_section.value], () => {
+    console.log('parametric line clear')
+    total.value = (section_count.value + ~~(!!extra_section.value))
+    size.value = Math.ceil(total.value / 4);
+    count.value = (total.value >= 4) ? size.value : total.value;
+
+    const lines_count = (total.value >= 4) ? 4 : 1
     const base = seek(scene.value, 'name', 'base')
-    const n = (section_count.value as number) + ~~(!!extra_section.value)
-    if (base?.children && n < base?.children.length) {
-        base.children = [...base?.children.slice(0, n)]
+    if (base?.children && base.children.length !== lines_count) {
+        base.children = [...base?.children.slice(0, lines_count)]
     }
+
+    const lines = seekAll(scene.value, 'name', 'line')
+    lines.forEach(line => {
+        let n = size.value
+        if (lines_count == 1) {
+            n = total.value
+        }
+        if (line.name.endsWith('_4')) {
+            n = total.value - size.value * 3
+            if (n < 0) {
+                n = 0
+            }
+        }
+        if (line?.children && n < line?.children.length) {
+            line.children = [...line?.children.slice(0, n)]
+        }
+    });
 })
 
 watch(lamelle_count, () => {
@@ -104,30 +132,12 @@ watch(lamelle_count, () => {
         (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
 })
 
-onMounted(async () => {
-    const loader = new GainMapLoader(renderer.value)
-    const result = await loader.loadAsync([
-        'hdrmaps/hdr.webp',
-        'hdrmaps/hdr-gainmap.webp',
-        'hdrmaps/hdr.json',
-    ])
-    if (renderer.value && camera.value) {
-        renderer.value.render(scene.value, camera.value)
-    }
-    // scene.value.environment = result.renderTarget.texture
-    // scene.value.background = result.renderTarget.texture
-    // scene.value.background.mapping = EquirectangularReflectionMapping
-    // scene.value.backgroundRotation = new Euler(0, 10, 0)
-    // scene.value.backgroundIntensity = 1.5
-    // scene.value.backgroundBlurriness = 0.06
-    result.renderTarget.texture.dispose();
-})
-
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
-            <ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
+        <template v-for="line in (total >= 4) ? 4 : 1" :key="count">
+            <ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" :number="line"
+                :count="count" :position-z="line * 2" />
         </template>
     </TresGroup>
 </template>
\ No newline at end of file

From a2ec1326bc803da76e0ec89e7e3fad1fb0b32d44 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 19 Sep 2024 17:28:08 +0300
Subject: [PATCH 4/5] test position

---
 components/calcModels.vue       |  6 ++---
 components/model/fence.vue      |  4 ++--
 components/model/line.vue       | 39 +++++++++++++++++++++++++++------
 components/model/parametric.vue |  4 ++--
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 80c9b16..030883a 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -12,10 +12,10 @@ const max_size = use_max_size()
 
 const controlsState = reactive({
     distance: section_count.value,
-    minDistance: 20,
-    maxDistance: 20,
+    minDistance: 10,
+    maxDistance: 10,
     position: { x: 0, y: 0, z: 0 },
-    enablePan: false,
+    // enablePan: false,
     minPolarAngle: degToRad(30),
     maxPolarAngle: degToRad(80),
 })
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 2729f5e..2e380e4 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -18,7 +18,7 @@ const pillar_size = 104 * 0.001
 const pillar_one_pos = ref(fence_section.value * -0.5 - 0.015)
 const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
 
-const scale_koef = 2.5
+const scale_koef = 1
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 
@@ -71,8 +71,8 @@ watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra],
             if (i >= lamelles_count.value) {
                 instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, 20, 20)));
             }
+            instanced_lamelle.value.instanceMatrix.needsUpdate = true
         }
-        instanced_lamelle.value.instanceMatrix.needsUpdate = true
     }
 });
 
diff --git a/components/model/line.vue b/components/model/line.vue
index da63898..3d430f9 100644
--- a/components/model/line.vue
+++ b/components/model/line.vue
@@ -22,14 +22,19 @@ const section_count = use_section_count()
 const extra_section = use_extra_section()
 
 const size = ref(new Vector3())
+const position = ref(new Vector3())
 const total = ref((section_count.value + ~~(!!extra_section.value)))
 
 const count_pos = () => {
-    console.log('line count pos')
     total.value = (section_count.value + ~~(!!extra_section.value))
 
     const line = seekByName(scene.value, `line_${props.number}`)
+    const ssize = new Vector3()
     if (line && line.children.length) {
+        line.updateMatrixWorld()
+        const bbox = new Box3()
+        bbox.expandByObject(line)
+        bbox.getSize(ssize)
         const fence = line.children[0];
         if (fence) {
             const box = new Box3();
@@ -38,20 +43,40 @@ const count_pos = () => {
             });
             box.getSize(size.value)
         }
-        line.updateMatrixWorld()
+    }
+    console.log(`${props.number} ${JSON.stringify(size.value)}  ${JSON.stringify(ssize)}`)
+    switch (props.number) {
+        case 1: break;
+        case 2:
+            // position.value.x = size.value.z * props.count
+            // position.value.z = size.value.z * props.count
+            position.value.x = ssize.z * -1
+            position.value.z = ssize.z
+            break;
+        case 3:
+            // position.value.x = size.value.x * props.count * 3
+            // position.value.z = size.value.x * props.count * 1 * -1
+            position.value.x = ssize.x
+            position.value.z = ssize.x * -1
+            break;
+        case 4:
+            // position.value.x = size.value.y * props.count * 0.25 * -1
+            // position.value.z = size.value.y * props.count * 3 * -1
+            position.value.x = ssize.y
+            position.value.z = ssize.y * -1
+            break;
     }
 }
 onMounted(() => {
     count_pos()
 })
-watch(() => [props.count, section_count.value, extra_section.value],
-    count_pos
-)
+watch(() => [props.count, section_count.value, extra_section.value], count_pos)
 </script>
 <template>
-    <TresGroup :name="`line_${props.number}`">
+    <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-z="position.z" :position-x="position.x">
         <template v-for="i in props.count">
-            <template v-if="(i + (props.number - 1) * props.count) <= total" :key="(i + (props.number - 1) * props.count)">
+            <template v-if="(i + (props.number - 1) * props.count) <= total"
+                :key="(i + (props.number - 1) * props.count)">
                 <ModelFence :index="i + (props.number - 1) * props.count" :models="props.models" />
             </template>
         </template>
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 9bbfa5b..7c10e28 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -135,9 +135,9 @@ watch(lamelle_count, () => {
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="line in (total >= 4) ? 4 : 1" :key="count">
+        <template v-for="line in (total >= 4) ? 4 : 1" :key="`${line}_${count}`">
             <ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" :number="line"
-                :count="count" :position-z="line * 2" />
+                :count="count" />
         </template>
     </TresGroup>
 </template>
\ No newline at end of file

From bc8af23bc8361c870339e721c3841a3ac61536c8 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 20 Sep 2024 15:44:57 +0300
Subject: [PATCH 5/5] fence square

---
 components/calcModels.vue  |  2 +-
 components/model/fence.vue | 11 ++------
 components/model/line.vue  | 58 +++++++++++++++++---------------------
 3 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 030883a..c7121c9 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -68,7 +68,7 @@ watch([section_count, extra_section], () => {
             <TresCanvas clear-color="#ccc">
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
-                <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1">
+                <TresGroup>
                     <Suspense>
                         <ModelParametric />
                     </Suspense>
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 2e380e4..63cd5ea 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BufferGeometry, Matrix4, Vector2, Vector3 } from 'three';
 
-const props = defineProps(['index', 'models'])
+const props = defineProps(['index', 'models', 'last_element'])
 
 const lamelle_height = use_lamelle_height()
 const lamelles_count = use_lamelles_count()
@@ -22,12 +22,7 @@ const scale_koef = 1
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 
-const last_element = ref(Math.min((section_count.value + ~~(!!extra_section.value)), max_size.value))
-watch([section_count, fence_section, extra_section], () => {
-    last_element.value = Math.min(section_count.value + ~~(!!extra_section.value), max_size.value)
-})
-
-const getExtraValue = () => (extra_section.value && props.index == last_element.value) ? extra_section.value * 0.001 : false
+const getExtraValue = () => (extra_section.value && props.last_element) ? extra_section.value * 0.001 : false
 const extra = ref(getExtraValue())
 if (extra.value) {
     pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
@@ -78,7 +73,7 @@ watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra],
 
 watch([section_count, fence_section, extra_section], () => {
     extra.value = getExtraValue()
-    if (extra_section.value && props.index == last_element.value) {
+    if (extra_section.value && props.last_element) {
         pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
         pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
         // translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
diff --git a/components/model/line.vue b/components/model/line.vue
index 3d430f9..b5b9bab 100644
--- a/components/model/line.vue
+++ b/components/model/line.vue
@@ -10,9 +10,9 @@ const rotate = () => {
         case 2:
             return degToRad(90)
         case 3:
-            return degToRad(180)
-        case 4:
             return degToRad(270)
+        case 4:
+            return degToRad(180)
     }
 }
 const { seekByName } = useSeek()
@@ -21,49 +21,41 @@ const { scene } = useTresContext()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
 
-const size = ref(new Vector3())
-const position = ref(new Vector3())
 const total = ref((section_count.value + ~~(!!extra_section.value)))
-
+const position = ref(new Vector3())
 const count_pos = () => {
     total.value = (section_count.value + ~~(!!extra_section.value))
 
     const line = seekByName(scene.value, `line_${props.number}`)
-    const ssize = new Vector3()
+    const line_size = new Vector3()
+    const line_pos = new Vector3()
     if (line && line.children.length) {
         line.updateMatrixWorld()
-        const bbox = new Box3()
-        bbox.expandByObject(line)
-        bbox.getSize(ssize)
-        const fence = line.children[0];
-        if (fence) {
-            const box = new Box3();
-            fence.children.forEach(element => {
-                box.expandByObject(element);
-            });
-            box.getSize(size.value)
-        }
+        new Box3().expandByObject(line).getSize(line_size)
+        line.getWorldPosition(line_pos)
+        console.log(`line_${props.number}`, line, line_size, line_pos)
+    }
+    const line1 = seekByName(scene.value, `line_1`);
+    const line1_size = new Vector3()
+    const line1_pos = new Vector3()
+    if (line1) {
+        new Box3().expandByObject(line1).getSize(line1_size)
+        line1.getWorldPosition(line1_pos)
+        console.log('first', line1, line1_size, line1_pos)
     }
-    console.log(`${props.number} ${JSON.stringify(size.value)}  ${JSON.stringify(ssize)}`)
     switch (props.number) {
         case 1: break;
         case 2:
-            // position.value.x = size.value.z * props.count
-            // position.value.z = size.value.z * props.count
-            position.value.x = ssize.z * -1
-            position.value.z = ssize.z
+            // position.value.x =  line_size.y
+            position.value.z = line1_size.z * -1
             break;
         case 3:
-            // position.value.x = size.value.x * props.count * 3
-            // position.value.z = size.value.x * props.count * 1 * -1
-            position.value.x = ssize.x
-            position.value.z = ssize.x * -1
+            position.value.z = line1_size.x * -1
+            position.value.x = line1_size.x
             break;
         case 4:
-            // position.value.x = size.value.y * props.count * 0.25 * -1
-            // position.value.z = size.value.y * props.count * 3 * -1
-            position.value.x = ssize.y
-            position.value.z = ssize.y * -1
+            position.value.z = line1_size.x * -1 
+            position.value.x = line1_size.x 
             break;
     }
 }
@@ -73,11 +65,13 @@ onMounted(() => {
 watch(() => [props.count, section_count.value, extra_section.value], count_pos)
 </script>
 <template>
-    <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-z="position.z" :position-x="position.x">
+    <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-x="position.x" :position-y="position.y"
+        :position-z="position.z">
         <template v-for="i in props.count">
             <template v-if="(i + (props.number - 1) * props.count) <= total"
                 :key="(i + (props.number - 1) * props.count)">
-                <ModelFence :index="i + (props.number - 1) * props.count" :models="props.models" />
+                <ModelFence :index="i" :models="props.models"
+                    :last_element="(i + (props.number - 1) * props.count) == total" />
             </template>
         </template>
     </TresGroup>