components/model/fence.vue

@@ -20,8 +20,8 @@ const lSize = lamelle_height.value
 const bSize = 0.0235
 const pillar_size = 104 * 0.001
 
-const pillar_one_pos = ref(fence_section.value * -0.5 - 0.015)
+const pillar_one_pos = ref(fence_section.value * -0.5)
-const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
+const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
 
 const scale_koef = 1
 const show_pillar_one = ref(props.first_element)
@@ -30,8 +30,8 @@ const show_pillar_two = ref(true)
 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
+    pillar_one_pos.value = (extra.value as number) * -0.5
-    pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
+    pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize
 }
 
 const make_translate_to_section = (source = fence_section.value) => {
@@ -58,7 +58,7 @@ watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra],
             const scale_x = (((extra.value as number) || fence_section.value) * 10)
             const pos_x = pillar_size * 0.5
             const pos_y = (lSize * i)
-            const pos_z = 0.02
+            const pos_z = 0.022 * scale_koef
             const newmatrix = new Matrix4().fromArray([
                 scale_x, 0, 0, 0,
                 0, 1, 0, 0,
@@ -90,7 +90,7 @@ const setBraceCount = () => {
     brace_count.value = Math.ceil(lamelles_count.value / 4)
 }
 
-const brace = props.models.brace.clone().children[0]
+const brace = props.models.pillar_brace.clone().children[0]
 const brace_h = lamelle_height.value * 3
 const brace_count = ref<number>()
 
@@ -99,16 +99,16 @@ watch(lamelles_count, setBraceCount)
 
 const pillar = ref<Mesh[]>([])
 const setPillar = () => {
-    const top = props.models.fence_top.children[0];
+    const top = props.models.pillar_top.children[0];
     top.position.setComponent(1, lSize * lamelles_count.value)
 
-    const pillar_outer = props.models.fence.children[0];
+    const pillar_outer = props.models.pillar_center.children[0];
     pillar_outer.scale.setComponent(1, lamelles_count.value);
 
-    const pillar_inner = props.models.fence_inner.children[0];
+    const pillar_inner = props.models.pillar_inner.children[0];
     pillar_inner.scale.setComponent(1, lamelles_count.value);
 
-    const bottom = props.models.fence_bottom.children[0];
+    const bottom = props.models.pillar_bottom.children[0];
     bottom.position.setComponent(1, lSize * -1)
 
     let arr = [top.clone(), pillar_outer.clone(), pillar_inner.clone(), bottom.clone(),]
@@ -127,27 +127,49 @@ watch([pillar_pattern, pillar_color, fence_section, lamelles_count], setPillar)
 
 const fastening = ref<Object3D[]>([])
 const setFastening = () => {
-    const one = props.models.fastening.children[0].clone();
+    // const one = props.models.fastening.children[0].clone();
-    one.position.setComponent(0, pillar_one_pos.value);
+    // one.position.setComponent(0, pillar_one_pos.value);
-    one.scale.set(1, lamelles_count.value, 1);
+    // one.scale.set(1, lamelles_count.value, 1);
 
-    const two = props.models.fastening.children[0].clone();
+    // const two = props.models.fastening.children[0].clone();
-    two.position.setComponent(0, pillar_two_pos.value);
+    // two.position.setComponent(0, pillar_two_pos.value);
-    two.scale.set(-1, lamelles_count.value, 1);
+    // two.scale.set(-1, lamelles_count.value, 1);
+    const z_koef = -0.005 * scale_koef
+    const top_one = props.models.fastening_top_right.clone().children[0].children[1]
+    top_one.position.set(pillar_one_pos.value - bSize * 2, lamelles_count.value * lSize - 0.02 * scale_koef, 0)
+    top_one.updateMatrixWorld()
     
-    const top = props.models.top.children[0].children[0].clone();
+    const top_two = props.models.fastening_top_right.clone().children[0].children[1]
-    const v = ((extra.value as number) || fence_section.value) * 10 + 0.1 * scale_koef
+    top_two.position.set(pillar_two_pos.value - bSize * 2, lamelles_count.value * lSize - 0.02 * scale_koef, 0)
+    top_two.updateMatrixWorld()
+    
+    const top = props.models.fastening_top_center.clone().children[0];
+    top.position.set(0, lamelles_count.value * lSize - 0.02 * scale_koef, 0);
+    const v = ((extra.value as number) || fence_section.value) * 10
     top.scale.setComponent(0, v);
-    top.position.set(0, lamelles_count.value * lSize, 0)
+    top.updateMatrixWorld()
 
-    let arr = [one.clone(), two.clone(), top.clone(),]
+    const side_one = props.models.fastening_side.clone().children[0];
+    side_one.name = 'side_one'
+    side_one.position.set(pillar_one_pos.value, 0, z_koef * -1);
+    side_one.scale.set(1, lamelles_count.value, 1)
+    side_one.updateMatrixWorld();
+
+    const side_two = props.models.fastening_side.clone().children[0];
+    side_two.name = 'side_two'
+    side_two.scale.set(-1, lamelles_count.value, -1)
+    side_two.position.set(pillar_two_pos.value, 0, z_koef);
+    side_two.updateMatrixWorld();
+
+    // let arr = [one.clone(), two.clone(), top.clone(),]
+    let arr = [top_one.clone(), top.clone(), top_two.clone(), side_one.clone(), side_two.clone()]
     arr.map(el => {
         set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
     })
     fastening.value = arr
 }
 setFastening()
-watch([pillar_color, fence_section, lamelles_count], setFastening)
+watch([pillar_color, lamelles_count, pillar_one_pos, pillar_two_pos], setFastening)
 
 const setLamellesColor = () => {
     if (instanced_lamelle.value) {

components/model/parametric.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Vector3 } from 'three';
 //@ts-ignore
-import {  useGLTF, } from '@tresjs/cientos'
+import { useGLTF, } from '@tresjs/cientos'
 import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
 
 const section_count = use_section_count()
@@ -16,22 +16,27 @@ const goto_target = use_goto_target()
 const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
 
-const { scene: model_fence_top } = await useGLTF('/models_one/top.glb')
+const { scene: model_pillar_top } = await useGLTF('/models_one/pillar/top.glb')
-const { scene: model_fence_center } = await useGLTF('/models_one/center.glb')
+const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
-const { scene: model_fence_bottom } = await useGLTF('/models_one/bottom.glb')
+const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
-const { scene: model_fence_inner } = await useGLTF('/models_one/inner.glb')
+const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')
-const { scene: model_brace } = await useGLTF('/models_one/brace.glb')
+const { scene: model_pillar_brace } = await useGLTF('/models_one/pillar/brace.glb')
+
+const { scene: model_fastening_top_center } = await useGLTF('/models_one/fastening/top_center.glb');
+const { scene: model_fastening_top_right } = await useGLTF('/models_one/fastening/top_right.glb');
+const { scene: model_fastening_side } = await useGLTF('/models_one/fastening/side.glb');
 const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true })
-const { scene: fastening_model } = await useGLTF('/models_one/fastening.glb', { draco: true });
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
 const top = ref(top_model)
-const fence = ref(model_fence_center)
+const pillar_center = ref(model_pillar_center)
-const fence_top = ref(model_fence_top)
+const pillar_top = ref(model_pillar_top)
-const fence_bottom = ref(model_fence_bottom)
+const pillar_bottom = ref(model_pillar_bottom)
-const fence_inner = ref(model_fence_inner)
+const pillar_inner = ref(model_pillar_inner)
-const brace = ref(model_brace)
+const pillar_brace = ref(model_pillar_brace)
-const fastening = ref(fastening_model)
+const fastening_top_center = ref(model_fastening_top_center)
+const fastening_top_right = ref(model_fastening_top_right)
+const fastening_side = ref(model_fastening_side)
 const lamelle = ref(lamelle_model)
 
 const total = ref((section_count.value + ~~(!!extra_section.value)))
@@ -91,8 +96,12 @@ watch(open_calc, () => {
 <template>
     <TresGroup name="base">
         <template v-for="line in (total >= 4) ? 4 : 1" :key="`${line}_${count}`">
-            <ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, brace, fastening, lamelle }" :number="line"
+            <ModelLine :models="{
-                :count="count" />
+                top,
+                pillar_center, pillar_top, pillar_bottom, pillar_inner, pillar_brace,
+                fastening_top_center, fastening_top_right, fastening_side,
+                lamelle
+            }" :number="line" :count="count" />
         </template>
     </TresGroup>
 </template>