fixing position

components/calc/values.vue

@@ -137,7 +137,7 @@ const changeParametres = () => {
     goal('calc_fence', form_state)
 }
 
-watch(() => [form_state.fence_length, form_state.height], () => {
+watch(() => [form_state.fence_length, form_state.height, form_state.total_length], () => {
     open_calc.value = []
 })
 
@@ -247,7 +247,7 @@ const calc_table = computed(() => {
             </div>
         </div>
         <div class="form-row">
-            <div class="form-item">
+            <div class="form-item w-full">
                 <label for="total_length">Общая длина забора, м</label>
                 <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
                     v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />

components/model/fence.vue

@@ -19,19 +19,27 @@ 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)
+const pillar_one_pos = ref()
-const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize)
+const pillar_two_pos = ref()
 
 const scale_koef = 1
 const show_pillar_one = ref(props.first_element)
 const show_pillar_two = ref(true)
 
+const setPillarValues = () => {
+    extra.value = getExtraValue()
+    if (extra_section.value && props.last_element) {
+        pillar_one_pos.value = (extra.value as number) * -0.5
+        pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size
+    } else {
+        pillar_one_pos.value = fence_section.value * -0.5
+        pillar_two_pos.value = fence_section.value * 0.5 + pillar_size
+    }
+}
+
 const getExtraValue = () => (extra_section.value && props.last_element) ? extra_section.value * 0.001 : false
 const extra = ref(getExtraValue())
-if (extra.value) {
+setPillarValues()
-    pillar_one_pos.value = (extra.value as number) * -0.5
-    pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize
-}
 
 const make_translate_to_section = (source = fence_section.value) => {
     const one_s = (source + pillar_size + bSize) * scale_koef
@@ -70,10 +78,10 @@ const instanced_fixing_two_el = [
     instanced_lamelle_count
 ]
 const lamelleMatrix = (i: number) => {
-    const scale_x = (((extra.value as number) || fence_section.value) * 10)
+    const scale_x = (((extra.value as number) || fence_section.value) * 9.935)
     const pos_x = pillar_size * 0.5
     const pos_y = (lSize * i)
-    const pos_z = 0.022 * scale_koef
+    const pos_z = 0.022
     return new Matrix4().fromArray([
         scale_x, 0, 0, 0,
         0, 1, 0, 0,
@@ -84,7 +92,7 @@ const lamelleMatrix = (i: number) => {
 const fixingOneMatrix = (i: number) => {
     const pos_x = pillar_one_pos.value + pillar_size * 0.66
     const pos_y = (lSize * i) + 0.01 * scale_koef;
-    const pos_z = 0.022 * scale_koef
+    const pos_z = 0.022
     return new Matrix4().fromArray([
         1, 0, 0, 0,
         0, 1, 0, 0,
@@ -95,7 +103,7 @@ const fixingOneMatrix = (i: number) => {
 const fixingTwoMatrix = (i: number) => {
     const pos_x = pillar_two_pos.value - pillar_size * 0.66
     const pos_y = (lSize * i) + 0.01 * scale_koef;
-    const pos_z = 0.022 * scale_koef
+    const pos_z = 0.022
     return new Matrix4().fromArray([
         1, 0, 0, 0,
         0, 1, 0, 0,
@@ -103,55 +111,19 @@ const fixingTwoMatrix = (i: number) => {
         pos_x, pos_y, pos_z, 1
     ])
 }
-watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
-    const translationVector = new Vector3(0, 20, 20)
-    for (let i = 0; i < instanced_lamelle_count; i++) {
-        if (instanced_lamelle.value) {
-            instanced_lamelle.value.setMatrixAt(i, lamelleMatrix(i));
-            if (i >= lamelles_count.value) {
-                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
-            }
-            instanced_lamelle.value.instanceMatrix.needsUpdate = true
-        }
-        if (instanced_fixing_one.value) {
-            instanced_fixing_one.value.setMatrixAt(i, fixingOneMatrix(i));
-            if (i >= lamelles_count.value) {
-                instanced_fixing_one.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
-            }
-            instanced_fixing_one.value.instanceMatrix.needsUpdate = true
-        }
-        if (instanced_fixing_two.value) {
-            instanced_fixing_two.value.setMatrixAt(i, fixingTwoMatrix(i));
-            if (i >= lamelles_count.value) {
-                instanced_fixing_two.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
-            }
-            instanced_fixing_two.value.instanceMatrix.needsUpdate = true
-        }
-    }
-});
 
-watch([section_count, fence_section, extra_section], () => {
+watch([section_count, fence_section, extra_section], setPillarValues)
-    extra.value = getExtraValue()
-    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
-    } else {
-        pillar_one_pos.value = fence_section.value * -0.5 - 0.015
-        pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
-    }
-})
 
 const brace = props.models.pillar_brace.clone().children[0]
 const braces = ref<Mesh[]>([])
 const setBraceCount = () => {
     const brace_count = Math.floor(lamelles_count.value / 4)
-    const arr:Mesh[] = []
+    const arr: Mesh[] = []
     for (let index = 0; index < brace_count; index++) {
         const brace_item = brace.clone()
         brace_item.position.setComponent(1, lamelle_height.value * 4 * (index + 0.75))
         arr.push(brace_item)
     }
-    console.log(arr)
     braces.value = arr
 }
 
@@ -190,21 +162,25 @@ const fastening = ref<Object3D[]>([])
 const setFastening = () => {
     const top_one = props.models.fixing.clone().children[0];
     top_one.position.set(
-        pillar_one_pos.value + pillar_size * 0.66,
+        pillar_one_pos.value + pillar_size * 0.75,
         lamelles_count.value * lSize - 0.01 * scale_koef,
         0.025 * scale_koef
     )
 
     const top_two = props.models.fixing.clone().children[0];
     top_two.position.set(
-        pillar_two_pos.value - pillar_size * 0.66,
+        pillar_two_pos.value - pillar_size * 0.75,
         lamelles_count.value * lSize - 0.01 * scale_koef,
         0.025 * scale_koef
     )
 
+    const v = ((extra.value as number) || fence_section.value) * 10
     const top = props.models.fastening_top.clone().children[0];
-    top.position.set(pillar_size * 0.5 + 0.01 * scale_koef, lamelles_count.value * lSize - 0.02 * scale_koef, 0);
+    top.position.set(
-    const v = ((extra.value as number) || fence_section.value) * 10 + 0.2 * scale_koef
+        pillar_size * 0.5,
+        lamelles_count.value * lSize - 0.02 * scale_koef,
+        0
+    );
     top.scale.setComponent(0, v);
 
     const side_one = props.models.fastening_side.clone().children[0];
@@ -233,6 +209,37 @@ const setLamellesColor = () => {
 }
 setLamellesColor()
 watch([instanced_lamelle, lamelle_color], setLamellesColor)
+
+watch([
+    instanced_lamelle,
+    lamelles_count,
+    fence_section,
+], () => {
+    const translationVector = new Vector3(0, 20, 20)
+    for (let i = 0; i < instanced_lamelle_count; i++) {
+        if (instanced_lamelle.value) {
+            instanced_lamelle.value.setMatrixAt(i, lamelleMatrix(i));
+            if (i >= lamelles_count.value) {
+                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
+            }
+            instanced_lamelle.value.instanceMatrix.needsUpdate = true
+        }
+        if (instanced_fixing_one.value) {
+            instanced_fixing_one.value.setMatrixAt(i, fixingOneMatrix(i));
+            if (i >= lamelles_count.value) {
+                instanced_fixing_one.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
+            }
+            instanced_fixing_one.value.instanceMatrix.needsUpdate = true
+        }
+        if (instanced_fixing_two.value) {
+            instanced_fixing_two.value.setMatrixAt(i, fixingTwoMatrix(i));
+            if (i >= lamelles_count.value) {
+                instanced_fixing_two.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
+            }
+            instanced_fixing_two.value.instanceMatrix.needsUpdate = true
+        }
+    }
+});
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="0">

components/model/parametric.vue

@@ -16,7 +16,7 @@ const goto_target = use_goto_target()
 const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
 
-const { scene: model_pillar_top } = await useGLTF('/models_one/pillar/top.glb')
+const { scene: model_pillar_top } = await useGLTF('/models_one/pillar/decor1.glb')
 const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
 const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
 const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')