components/model/fence.vue

@@ -154,7 +154,7 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
             <template v-for="item in pillar">
                 <TresMesh v-bind="item.clone()" />
             </template>
-            <template v-for="i in (lamelles_count % 6)">
+            <template v-for="i in (lamelles_count % 4)">
                 <TresMesh v-bind="brace.clone()" :position-y="brace_h * (i - 1)" />
             </template>
         </TresGroup>
@@ -163,7 +163,7 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
             <template v-for="item in pillar">
                 <TresObject3D v-bind="item.clone()" />
             </template>
-            <template v-for="i in (lamelles_count % 6)">
+            <template v-for="i in (lamelles_count % 4)">
                 <TresMesh v-bind="brace.clone()" :position-y="brace_h * (i - 1)" />
             </template>
         </TresGroup>

utils/material.ts

@@ -1,4 +1,4 @@
-import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, Texture, TextureLoader, Vector2 } from "three"
+import { Color, DataTexture, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, RGBFormat, Texture, TextureLoader, Vector2 } from "three"
 import { useLoader, type TresLoader } from '@tresjs/core'
 import { getFilename, patterns, type patternTypes } from "~/components/pattern"
 
@@ -21,7 +21,28 @@ for (let index = 0; index < patterns.length; index++) {
         loaded_patterns[filename] = useLoader(TextureLoader, filename)
     }
 }
-const test_texture = useLoader(TextureLoader, '/texture/test_texture.jpg')
+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 );
+        const g = 0;
+        const b = Math.floor( Math.random() * 255 );
+        
+        const stride = i * 4;
+        data[ stride ] = r;
+        data[ stride + 1 ] = g;
+        data[ stride + 2 ] = b;
+        data[ stride + 3 ] = 255;
+    }
+    
+    // used the buffer to create a DataTexture
+    const texture = new DataTexture( data, width, height );
+    texture.needsUpdate = true;
+    return texture;
+}
 
 export const set_material = (scene: any, color: any, pattern: { pattern: patternTypes, count: number } | undefined = undefined) => {
     let c = color
@@ -48,13 +69,13 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
             })
         }
     }
-    test_texture.then((res: Texture) => {
-        // res.wrapT = RepeatWrapping;
-        // res.repeat.set(1, 10);
-        res.needsUpdate = true
-        material.map = res;
-        material.normalMap = res;
-    })
+    const noiseTexture = generateNoiseTexture(64, 64);
+    if (pattern && pattern.pattern !== undefined) {
+        noiseTexture.wrapT = RepeatWrapping;
+        noiseTexture.repeat.set(1, pattern.count);
+        noiseTexture.needsUpdate = true
+    }
+    material.normalMap = noiseTexture;
 
     if (scene) set_metaril_func(scene, material)
     else console.log(scene)