components/model/fence.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { BufferGeometry, Matrix4, Mesh, Object3D, Vector2, Vector3 } from 'three';
+import { BufferGeometry, Matrix4, Mesh, Object3D, Vector3 } from 'three';
 import { getColorHexFromRal } from '../ral';
-import { getFilename } from '../pattern';
 
 const props = defineProps(['index', 'models', 'last_element', 'first_element'])
 
@@ -140,13 +139,22 @@ watch([section_count, fence_section, extra_section], () => {
     }
 })
 
-const setBraceCount = () => {
-    brace_count.value = Math.floor(lamelles_count.value / 4)
-}
+
+set_material({ children: [props.models.pillar_brace, props.models.fixing] }, '#f00');
 
 const brace = props.models.pillar_brace.clone().children[0]
-const brace_h = lamelle_height.value * 4
-const brace_count = ref<number>()
+const braces = ref<Mesh[]>([])
+const setBraceCount = () => {
+    const brace_count = Math.floor(lamelles_count.value / 4)
+    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
+}
 
 setBraceCount()
 watch(lamelles_count, setBraceCount)
@@ -154,7 +162,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 + 0.0022 * scale_koef);
 
     const pillar_outer = props.models.pillar_center.children[0];
     pillar_outer.scale.setComponent(1, lamelles_count.value);
@@ -165,7 +173,7 @@ const setPillar = () => {
     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(),]
+    let arr = [top, pillar_outer, pillar_inner, bottom]
     arr.map(el => {
         set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
     })
@@ -174,7 +182,7 @@ const setPillar = () => {
         getColorHexFromRal(pillar_color.value),
         { pattern: pillar_pattern.value, count: lamelles_count.value },
     )
-    pillar.value = arr
+    pillar.value = arr.map(el => el.clone())
 }
 setPillar()
 watch([pillar_pattern, pillar_color, fence_section, lamelles_count], setPillar)
@@ -187,7 +195,6 @@ const setFastening = () => {
         lamelles_count.value * lSize - 0.01 * scale_koef,
         0.025 * scale_koef
     )
-    top_one.updateMatrixWorld()
 
     const top_two = props.models.fixing.clone().children[0];
     top_two.position.set(
@@ -195,32 +202,27 @@ const setFastening = () => {
         lamelles_count.value * lSize - 0.01 * scale_koef,
         0.025 * scale_koef
     )
-    top_two.updateMatrixWorld()
 
     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);
     const v = ((extra.value as number) || fence_section.value) * 10 + 0.2 * scale_koef
     top.scale.setComponent(0, v);
-    top.updateMatrixWorld()
 
     const side_one = props.models.fastening_side.clone().children[0];
     side_one.name = 'side_one'
     side_one.position.set(pillar_one_pos.value, 0, 0.002 * scale_koef);
     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, -0.005 * scale_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 => {
+    let arr = [top_one, top_two, top, side_one, side_two];
+    [top, side_one, side_two].map(el => {
         set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
     })
-    fastening.value = arr
+    fastening.value = arr.map(el => el.clone())
 }
 setFastening()
 watch([pillar_color, lamelles_count, pillar_one_pos, pillar_two_pos], setFastening)
@@ -239,8 +241,8 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
             <template v-for="item in pillar">
                 <TresMesh v-bind="item.clone()" />
             </template>
-            <template v-for="i in brace_count">
-                <TresMesh v-bind="brace.clone()" :position-y="brace_h * i" />
+            <template v-for="item in braces">
+                <TresMesh v-bind="item.clone()" :name="`brace_one`" />
             </template>
         </TresGroup>
 
@@ -248,8 +250,8 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
             <template v-for="item in pillar">
                 <TresObject3D v-bind="item.clone()" />
             </template>
-            <template v-for="i in brace_count">
-                <TresMesh v-bind="brace.clone()" :position-y="brace_h * i" />
+            <template v-for="item in braces">
+                <TresMesh v-bind="item.clone()" :name="`brace_two`" />
             </template>
         </TresGroup>
 
@@ -262,9 +264,5 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
         <template v-for="item in fastening">
             <TresObject3D v-bind="item.clone()" />
         </template>
-        <TresMesh :position="[0, 0, 0]">
-            <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
-            <TresMeshBasicMaterial color="violet" />
-        </TresMesh>
     </TresGroup>
 </template>

utils/material.ts

@@ -5,43 +5,19 @@ import { getFilename, patterns, type patternTypes } from "~/components/pattern"
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
-        if (el.isMesh && !el.isInstancedMesh) {
+        if (el.isMesh) {
             el.castShadow = true
             el.receiveShadow = true
         }
 
-        if (el.material && material.normalMap) {
-            // Получите UV-координаты
-            const uvAttribute = el.geometry.getAttribute('uv');
-            const uvs = [];
-
-            if (uvAttribute) {
-                for (let i = 0; i < uvAttribute.count; i++) {
-                    uvs.push(uvAttribute.getX(i), uvAttribute.getY(i));
-                }
-
-                // Вычисление минимальных и максимальных UV
-                const minU = Math.min(...uvs.filter((_, index) => index % 2 === 0)); // X координаты
-                const maxU = Math.max(...uvs.filter((_, index) => index % 2 === 0));
-                const minV = Math.min(...uvs.filter((_, index) => index % 2 === 1)); // Y координаты
-                const maxV = Math.max(...uvs.filter((_, index) => index % 2 === 1));
-
-                // Определите размеры текстуры на поверхности
-                const surfaceWidth = maxU - minU;
-                const surfaceHeight = (maxV - minV) * el.scale.y;
-
-                material.normalMap.wrapS = RepeatWrapping;
-                material.normalMap.wrapT = RepeatWrapping;
-                material.normalMap.repeat.set(surfaceWidth, surfaceHeight);
-                material.normalMap.needsUpdate = true
-            }
-        }
-
-        if (el.material) el.material = material
+        // if (el.material) {
+        el.material = material
+        // }
         set_metaril_func(el, material)
     })
 }
 
+const noiseTexturePromise = useLoader(TextureLoader, '/texture/images.jpeg')
 const loaded_patterns: { [key: string]: any } = {}
 for (let index = 0; index < patterns.length; index++) {
     const element = patterns[index];
@@ -50,10 +26,11 @@ for (let index = 0; index < patterns.length; index++) {
         loaded_patterns[filename] = useLoader(TextureLoader, filename)
     }
 }
+Promise.all(Object.keys(loaded_patterns))
+
 function generateNoiseTexture(width: number, height: number) {
     const size = width * height;
     const data = new Uint8Array(4 * size);
-    const color = new Color(0xffffff);
 
     for (let i = 0; i < size; i++) {
         const r = Math.floor(Math.random() * 255) * 0.05;
@@ -86,19 +63,27 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
         side: DoubleSide,
     })
 
+    const promises = []
     if (pattern && pattern.pattern !== undefined) {
         const filename = getFilename(pattern.pattern)
         if (filename) {
             const texture = loaded_patterns[filename]
+            promises.push(texture)
             texture.then((res: Texture) => {
                 res.wrapT = RepeatWrapping;
                 res.repeat.set(1, pattern.count);
                 res.needsUpdate = true
                 material.alphaMap = res
+                return res
             })
         }
     }
 
     if (scene) set_metaril_func(scene, material)
     else console.log(scene)
+
+    Promise.all(promises).then((values) => {
+        if (scene) set_metaril_func(scene, material)
+        else console.log(scene)
+    });
 }