assets/main.scss

@@ -349,7 +349,8 @@ button {
         &_color {
             @apply w-full;
 
-            .color_picker {
+            .color_picker,
+            .list_picker {
                 @apply ml-4;
             }
         }

components/dropdown/list.vue

@@ -34,7 +34,7 @@ onUnmounted(() => {
     <div class="list_picker" ref="picker">
         <div class="list_picker-selected" @click="open ? toggleOpen(!is_open) : onClick(props.color)"
             :class="[{ 'list_picker-selected__active': active }]">
-            pick
+            <NuxtImg :src="getFilename(patterns[1].name)" />
         </div>
         <div class="list_picker-changer" v-if="is_open">
             <div class="list_picker-list">

components/pattern.ts

@@ -1,10 +1,12 @@
 export const patterns = [
-    { name: 'no pattern', },
-    { name: 'pattern1', filename: 'tile1.png' },
-    { name: 'pattern2', filename: 'tile1.png' },
+    { name: 'Без узора', },
+    { name: 'Узор 1', filename: 'tile1.png' },
+    { name: 'Еще раз узор 1', filename: 'tile1.png' },
 ]
 export const getFilename = (name: patternTypes) => {
-    return `/pattern/${patterns.find(el => el.name == name)?.filename}`
+    const el = patterns.find(el => el.name == name)
+    if (!el || !el.filename) return undefined
+    return `/pattern/${el?.filename}`
 }
 
 export type patternTypes = typeof patterns[number]['name']

composables/useCalc.ts

@@ -13,7 +13,7 @@ export const use_fence_section = () => useState<number>('fence_section', () => m
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
 export const use_pillar_color = () => useState<ralTypes>('pillar_color')
 export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
-export const use_pattern = () => useState<patternTypes>('pattern')
+export const use_pattern = () => useState<patternTypes>('pattern', () => 'Без узора')
 export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)

utils/material.ts

@@ -1,6 +1,6 @@
-import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
+import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, Texture, TextureLoader, Vector2 } from "three"
 import { useLoader, type TresLoader } from '@tresjs/core'
-import { getFilename, type patternTypes } from "~/components/pattern"
+import { getFilename, patterns, type patternTypes } from "~/components/pattern"
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -12,13 +12,15 @@ const set_metaril_func = (scene: any, material: any) => {
         set_metaril_func(el, material)
     })
 }
-// const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
-// const get_texture = async () => {
-//     const texture = await useLoader(TextureLoader, '/fence_one/tile1.png');
-//     return texture
-// }
-// const texture = await get_texture()
-// texture.wrapT = RepeatWrapping;
+
+const loaded_patterns: { [key: string]: any } = {}
+for (let index = 0; index < patterns.length; index++) {
+    const element = patterns[index];
+    const filename = getFilename(element.name)
+    if (filename) {
+        loaded_patterns[filename] = useLoader(TextureLoader, filename)
+    }
+}
 
 export const set_material = (scene: any, color: any, pattern: { pattern: patternTypes, count: number } | undefined = undefined) => {
     let c = color
@@ -35,15 +37,16 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
 
     if (pattern && pattern.pattern !== undefined) {
         const filename = getFilename(pattern.pattern)
-        const texture = useLoader(TextureLoader, filename)
-        texture.then(res => {
+        if (filename) {
+            const texture = loaded_patterns[filename]
+            texture.then((res: Texture) => {
                 res.wrapT = RepeatWrapping;
                 res.repeat.set(1, pattern.count);
                 res.needsUpdate = true
-            // return res
                 material.alphaMap = res
             })
         }
+    }
 
     set_metaril_func(scene, material)
 }