diff --git a/components/model/fence.vue b/components/model/fence.vue
index 8c37040..0dad41e 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -154,7 +154,7 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
-
+
@@ -163,7 +163,7 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor)
-
+
diff --git a/utils/material.ts b/utils/material.ts
index 6c871a6..2be14d3 100644
--- a/utils/material.ts
+++ b/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)