components/model/fence.vue

@@ -48,30 +48,84 @@ watch([fence_section, extra], () => {
 })
 
 const instanced_lamelle = shallowRef();
-const instanced_lamelle_geometry = Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry)
-const instanced_lamelle_material = props.models.lamelle.children[0].material
 const instanced_lamelle_count = 24
-const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
+const instanced_lamelle_el = [
+    Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry),
+    props.models.lamelle.children[0].material,
+    instanced_lamelle_count
+]
+
+const instanced_fixing_one = shallowRef();
+const instanced_fixing_one_el = [
+    Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry),
+    props.models.fixing.children[0].material,
+    instanced_lamelle_count
+]
+
+const instanced_fixing_two = shallowRef();
+const instanced_fixing_two_el = [
+    Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry),
+    props.models.fixing.children[0].material,
+    instanced_lamelle_count
+]
+const lamelleMatrix = (i: number) => {
+    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.022 * scale_koef
+    return new Matrix4().fromArray([
+        scale_x, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        pos_x, pos_y, pos_z, 1
+    ])
+}
+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
+    return new Matrix4().fromArray([
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        pos_x, pos_y, pos_z, 1
+    ])
+}
+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
+    return new Matrix4().fromArray([
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        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) {
-            const scale_x = (((extra.value as number) || fence_section.value) * 10)
+            instanced_lamelle.value.setMatrixAt(i, lamelleMatrix(i));
-            const pos_x = pillar_size * 0.5
-            const pos_y = (lSize * i)
-            const pos_z = 0.022 * scale_koef
-            const newmatrix = new Matrix4().fromArray([
-                scale_x, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                pos_x, pos_y, pos_z, 1
-            ])
-            instanced_lamelle.value.setMatrixAt(i, newmatrix);
-
             if (i >= lamelles_count.value) {
-                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, 20, 20)));
+                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
+        }
     }
 });
 
@@ -100,7 +154,7 @@ watch(lamelles_count, setBraceCount)
 const pillar = ref<Mesh[]>([])
 const setPillar = () => {
     const top = props.models.pillar_top.children[0];
-    top.position.setComponent(1, lSize * lamelles_count.value)
+    top.position.setComponent(1, lSize * lamelles_count.value);
 
     const pillar_outer = props.models.pillar_center.children[0];
     pillar_outer.scale.setComponent(1, lamelles_count.value);
@@ -109,7 +163,7 @@ const setPillar = () => {
     pillar_inner.scale.setComponent(1, lamelles_count.value);
 
     const bottom = props.models.pillar_bottom.children[0];
-    bottom.position.setComponent(1, lSize * -1)
+    bottom.position.setComponent(1, lSize * -1);
 
     let arr = [top.clone(), pillar_outer.clone(), pillar_inner.clone(), bottom.clone(),]
     arr.map(el => {
@@ -200,7 +254,9 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
         </TresGroup>
 
         <TresGroup name="lamelles">
-            <TresInstancedMesh ref="instanced_lamelle" :args="instanced_v" />
+            <TresInstancedMesh ref="instanced_lamelle" :args="instanced_lamelle_el" />
+            <TresInstancedMesh ref="instanced_fixing_one" :args="instanced_fixing_one_el" />
+            <TresInstancedMesh ref="instanced_fixing_two" :args="instanced_fixing_two_el" />
         </TresGroup>
 
         <template v-for="item in fastening">

components/model/parametric.vue

@@ -99,7 +99,8 @@ watch(open_calc, () => {
         <template v-for="line in (total >= 4) ? 4 : 1" :key="`${line}_${count}`">
             <ModelLine :models="{
                 top,
-                pillar_center, pillar_top, pillar_bottom, pillar_inner, pillar_brace,
+                pillar_center, pillar_top, pillar_bottom, pillar_inner,
+                pillar_brace,
                 fastening_top, fastening_side, fixing,
                 lamelle
             }" :number="line" :count="count" />