components/model/fence.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BufferGeometry, Matrix4, Vector3 } from 'three';
+import { BufferGeometry, Matrix4, Vector2, Vector3 } from 'three';
 
 const props = defineProps(['index', 'models'])
 
@@ -93,7 +93,7 @@ watch([section_count, fence_section, extra_section], () => {
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="0">
         <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos">
             <TresObject3D v-bind="props.models.fence_top.children[0]" :position-y="(lSize * -0.5)" />
-            <TresObject3D v-bind="props.models.fence.children[0]" :scale-y="lamelles_count" color="red" />
+            <TresObject3D v-bind="props.models.fence.children[0]" :scale-y="lamelles_count" />
             <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
@@ -106,15 +106,18 @@ watch([section_count, fence_section, extra_section], () => {
         <TresGroup name="lamelles">
             <TresInstancedMesh ref="instanced_lamelle" :args="instanced_v" cast-shadow />
         </TresGroup>
-        <TresGroup name="lam_fastening_one" :position-x="pillar_one_pos" :scale-y="lamelles_count">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
-        <TresGroup name="lam_fastening_two" :position-x="pillar_two_pos" :scale="[-1, lamelles_count, 1]">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
+        <TresObject3D name="lam_fastening_one" v-bind="props.models.fastening.children[0]" :position-x="pillar_one_pos"
+            :scale-y="lamelles_count" />
+        <TresObject3D name="lam_fastening_two" v-bind="props.models.fastening.children[0]" :position-x="pillar_two_pos"
+            :scale="[-1, lamelles_count, 1]" />
         <TresGroup name="top_section" :scale-x="((extra as number) || fence_section) * 10 + 0.1 * scale_koef"
             :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
             <TresObject3D v-bind="props.models.top.children[0]" />
         </TresGroup>
+        <TresMesh :scale-y="lamelles_count">
+            <TresBoxGeometry :args="[pillar_size, pillar_size, pillar_size]" />
+            <TresMeshStandardMaterial v-bind="props.models.fence.children[0].material"
+                :repeat="new Vector2(2, lamelles_count)" />
+        </TresMesh>
     </TresGroup>
 </template>

components/model/parametric.vue

@@ -16,6 +16,7 @@ import { getColorHexFromRal, type ralTypes } from '../ral';
 const pillar_color = use_pillar_color()
 const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
+const lamelle_count = use_lamelles_count()
 const extra_section = use_extra_section()
 const max_size = use_max_size()
 
@@ -56,7 +57,8 @@ if (!pillar_color.value) {
 }
 
 set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
-[top, fence, fence_bottom, fence_top, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+[top, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
+[fence, fence_bottom, fence_top].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -87,6 +89,10 @@ watch([section_count, extra_section], () => {
     }
 })
 
+watch(lamelle_count, () => {
+    [fence, fence_bottom, fence_top].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+})
+
 onMounted(async () => {
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([

public/fence_one/svg_tile1.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 0px;
+        color: #000;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M256,154.83c-2.56,4.22-5.21,8.38-7.97,12.46-24.26,35.89-56.06,66.22-93.21,88.72,4.22,2.56,8.38,5.21,12.46,7.97,35.89,24.26,66.22,56.06,88.72,93.21,2.56-4.22,5.21-8.38,7.97-12.46,24.26-35.89,56.06-66.22,93.21-88.72-4.22-2.56-8.38-5.21-12.46-7.97-35.89-24.26-66.22-56.06-88.72-93.21Z"/>
+      <path class="cls-1" d="M137.02,79.47c-33.99,22.96-61.04,55.55-77.17,93.69-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76Z"/>
+      <path class="cls-1" d="M315.86,429.16c-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76-33.99,22.96-61.04,55.55-77.17,93.69Z"/>
+      <path class="cls-1" d="M432.53,137.02c-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67,22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67Z"/>
+      <path class="cls-1" d="M0,410.83c22.5,37.14,52.82,68.95,88.71,93.2,4.08,2.76,8.24,5.41,12.47,7.97H0v-101.17Z"/>
+      <path class="cls-1" d="M410.83,512h101.17v-101.18c-2.56,4.22-5.21,8.38-7.97,12.47-24.25,35.89-56.06,66.21-93.2,88.71Z"/>
+      <path class="cls-1" d="M512,101.17c-22.5-37.14-52.82-68.95-88.71-93.2C419.2,5.21,415.04,2.56,410.82,0h101.18s0,101.17,0,101.17Z"/>
+      <path class="cls-1" d="M101.17,0H0v101.18c2.56-4.22,5.21-8.38,7.97-12.47C32.22,52.82,64.03,22.5,101.17,0Z"/>
+      <path class="cls-1" d="M79.47,374.98c22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67Z"/>
+    </g>
+  </g>
+</svg>

utils/material.ts

@@ -1,4 +1,6 @@
-import { Color, DoubleSide, MeshStandardMaterial } from "three"
+import { Color, DoubleSide, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
+import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+import { useLoader } from '@tresjs/core'
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -10,15 +12,28 @@ const set_metaril_func = (scene: any, material: any) => {
         set_metaril_func(el, material)
     })
 }
-export const set_material = (scene: any, color: any) => {
+const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
+// const texture = await useLoader(TextureLoader, '/fence_one/tile1.png')
+
+// texture.wrapS = RepeatWrapping;
+texture.wrapT = RepeatWrapping;
+export const set_material = (scene: any, color: any, count: number | undefined = undefined) => {
     let c = color
+    if (count) {
+        // console.log(texture)
+        texture.repeat.set(1, count);
+        texture.needsUpdate = true
+    }
+
     const material = new MeshStandardMaterial({
         color: new Color(c || '#9c9c00'),
+        // alphaMap: texture,
+        map: count ? texture : undefined,
         transparent: true,
         opacity: 1,
         roughness: 0.5,
         metalness: 0,
-        side: DoubleSide
+        side: DoubleSide,
     })
     set_metaril_func(scene, material)
 }