assets/main.scss

@@ -283,11 +283,6 @@ input[type=checkbox] {
 input[type=range] {
     @apply bg-neutral-300 appearance-none h-1;
 
-    // [&::-webkit-slider-runnable-track]:h-1 
-    // [&::-moz-range-track]:h-1  
-    // [&::-webkit-slider-thumb]:bg-[#61C4FF] [&::-webkit-slider-thumb]:w-8
-    // [&::-moz-range-thumb]:bg-[#61C4FF]
-    // ;
     &::-moz-range-track,
     &::-webkit-slider-runnable-track {
         @apply h-1 bg-red-500;
@@ -295,7 +290,7 @@ input[type=range] {
 
     &::-moz-range-thumb,
     &::-webkit-slider-thumb {
-        @apply bg-[#61C4FF] shadow-red-700;
+        @apply bg-[#61C4FF] shadow-red-700 h-8 w-10;
     }
 }
 

utils/material.ts

@@ -10,7 +10,7 @@ const set_metaril_func = (scene: any, material: any) => {
             el.receiveShadow = true
         }
 
-        if (el.material) {
+        if (el.material && material.normalMap) {
             // Получите UV-координаты
             const uvAttribute = el.geometry.getAttribute('uv');
             const uvs = [];
@@ -42,6 +42,7 @@ const set_metaril_func = (scene: any, material: any) => {
     })
 }
 
+const noiseTexture = useLoader(TextureLoader, '/texture/normal.jpg')
 const loaded_patterns: { [key: string]: any } = {}
 for (let index = 0; index < patterns.length; index++) {
     const element = patterns[index];
@@ -50,29 +51,6 @@ for (let index = 0; index < patterns.length; index++) {
         loaded_patterns[filename] = useLoader(TextureLoader, filename)
     }
 }
-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;
-        const g = 0;
-        const b = Math.floor(Math.random() * 255) * 0.05;
-
-        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
 
@@ -98,13 +76,15 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
             })
         }
     }
-    const noiseTexture = generateNoiseTexture(64, 64);
+    // const noiseTexture = generateNoiseTexture(64, 64);
-    if (pattern && pattern.pattern !== undefined) {
+    noiseTexture.then((res: Texture) => {
-        noiseTexture.wrapT = RepeatWrapping;
+        if (pattern && pattern.pattern !== undefined) {
-        noiseTexture.repeat.set(1, pattern.count);
+            res.wrapT = RepeatWrapping;
-        noiseTexture.needsUpdate = true
+            res.repeat.set(1, pattern.count);
-    }
+            res.needsUpdate = true
-    material.normalMap = noiseTexture;
+        }
+        material.normalMap = res;
+    })
 
     if (scene) set_metaril_func(scene, material)
     else console.log(scene)