From cbe97f5d8af8e4daccaa4a31da9895245546fa45 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 17 Sep 2024 10:34:58 +0300
Subject: [PATCH] fence tile

---
 components/model/diagram.vue    |   1 +
 components/model/fence.vue      |   7 ++-----
 components/model/item.vue       |   5 +++--
 components/model/parametric.vue |  23 +++++++++++++++++------
 public/fence_one/center.glb     | Bin 2156 -> 2296 bytes
 public/fence_one/inner.glb      | Bin 0 -> 1124 bytes
 utils/material.ts               |  19 ++++++++-----------
 7 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 public/fence_one/inner.glb

diff --git a/components/model/diagram.vue b/components/model/diagram.vue
index b22a3e8..5638dd1 100644
--- a/components/model/diagram.vue
+++ b/components/model/diagram.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+//@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
 import { getColorHexFromRal } from '../ral';
 
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 1391517..2729f5e 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -94,12 +94,14 @@ watch([section_count, fence_section, extra_section], () => {
         <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" />
+            <TresObject3D v-bind="props.models.fence_inner.children[0]" :scale-y="lamelles_count" />
             <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
         <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos">
             <TresObject3D v-bind="props.models.fence_top.children[0]" :position-y="(lSize * -0.5)" />
             <TresObject3D v-bind="props.models.fence.children[0]" :scale="[-1, lamelles_count, 1]" />
+            <TresObject3D v-bind="props.models.fence_inner.children[0]" :scale="[-1, lamelles_count, 1]" />
             <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
@@ -114,10 +116,5 @@ watch([section_count, fence_section, extra_section], () => {
             :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>
\ No newline at end of file
diff --git a/components/model/item.vue b/components/model/item.vue
index 22a215b..5409c0b 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useGLTF, Text3D } from '@tresjs/cientos'
-import { DoubleSide, Object3D, Vector3 } from 'three';
+// @ts-ignore
+import { useGLTF } from '@tresjs/cientos'
+import { Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
 let scene: any
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 9118d63..d9cd34e 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -32,6 +32,7 @@ const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco:
 const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
 const { scene: model_fence_center } = await useGLTF('/fence_one/center.glb')
 const { scene: model_fence_bottom } = await useGLTF('/fence_one/bottom.glb')
+const { scene: model_fence_inner } = await useGLTF('/fence_one/inner.glb')
 const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true });
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
@@ -47,6 +48,7 @@ const top = ref(top_model)
 const fence = ref(model_fence_center)
 const fence_top = ref(model_fence_top)
 const fence_bottom = ref(model_fence_bottom)
+const fence_inner = ref(model_fence_inner)
 const fastening = ref(fastening_model)
 const lamelle = ref(lamelle_model)
 
@@ -57,8 +59,12 @@ if (!pillar_color.value) {
 }
 
 set_material(lamelle.value, getColorHexFromRal(lamelle_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) });
+[lamelle].map(
+    (el: Ref) => set_material(el.value, getColorHexFromRal(lamelle_color.value)));
+[top, fastening, fence, fence_bottom, fence_top].map(
+    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
+[fence_inner].map(
+    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -69,7 +75,11 @@ watch(lamelle_color, () => {
     });
 })
 watch(pillar_color, () => {
-    [top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+    [top, fastening, fence, fence_bottom, fence_top].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
+    [fence_inner].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+
     const items = [
         ...seekAll(scene.value, 'name', "pillar_one"),
         ...seekAll(scene.value, 'name', "pillar_two"),
@@ -90,7 +100,8 @@ 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) });
+    [fence_inner].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
 })
 
 onMounted(async () => {
@@ -100,7 +111,7 @@ onMounted(async () => {
         'hdrmaps/hdr-gainmap.webp',
         'hdrmaps/hdr.json',
     ])
-    if (camera.value) {
+    if (renderer.value && camera.value) {
         renderer.value.render(scene.value, camera.value)
     }
     scene.value.environment = result.renderTarget.texture
@@ -116,7 +127,7 @@ onMounted(async () => {
 <template>
     <TresGroup name="base">
         <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
-            <ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fastening, lamelle }" />
+            <ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
         </template>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/public/fence_one/center.glb b/public/fence_one/center.glb
index 4ff9196f15321fdbabc13db262694a6a7d0287a4..26e7bc64c689e5253417aa995e9dda81c6c72b55 100644
GIT binary patch
delta 265
zcmaDO@I#O@JtxGCiGhLP$41V2CPs_NolM(-q$9H(kZfSKWim6Eyr0>c+1S`@@?U04
z5g@IjlvG)g>YtWYoLZt}1(M)l(H1r`K@~SMHv)=li5MCgph{R+noT~&qRnAwU}#nw
zTl-`4PZo7XgCav^Tc9f#*10Fz0@-_E>_Q;h{Ml<;sJJbRy;*@xjZq1ts=*#aLI5Uv
nvIF~}$zJRllbJZ;BqSN67+4u3ftZ1Ti-Dg(8c0erNH72ZzGy)S

delta 166
zcmew%_(p&;JtxGCiGhJ3XCr4l6QjxGPNwZZ(vjH?NH#FrGMSo8-p_2!Y-C|E`7g7j
z2$0rMN~$bL^-oJHPAyTg0!i?&Xo(nF8lg&<nwvo+4A69#n^{ag#-hz(VQy9%TdR<>
i`6r7y<K_T1HO9%y*!N6s;)vtnV&G?BW#9s01_l6H+ASgg

diff --git a/public/fence_one/inner.glb b/public/fence_one/inner.glb
new file mode 100644
index 0000000000000000000000000000000000000000..f978295049d67ba1d40bf55f63d921af83e7a040
GIT binary patch
literal 1124
zcmb7E!EVz)5M5e6BpMEIaLumm*s-N3N=re35ThijB2^V~l1*wUvD5V?w6X$xK=1qo
zH*Ua*59tXZ@dF4h%x)bTm6n#h?9A-EnRzo~k0;&78-$SIT|z!?67sYYwsMHFj7tb|
z81saSNTvb;cy=h#B+W`=gp{@?JQ;FPYCH@}3&*rfmx2KcF0wdH(AhF6EDgv87ytrV
zNErnCIV8~(ZP3wg1|;c_s|R|pJh;$unDXpULks^*rjz~_f}}7hbwGJ59}WH!Ras2R
zY^-J`;%O}7Md1)hDdPTIDm8}}VW-h;ge{$+6}F$(n-DMqy1TudFl;}1Ng=S1L7WWZ
zfr8jeU0*anElb5YmHvD*;$ko6uXLP2I-R8nR@gn6A;mJYTmuH_Ji%r<SZ#Eyc$(Dq
zD~?4yx9t06-}7yQnv9iMrObTWW1i#r9-3&`@%8a2^F7z|T*WxX_U><88RR;Q)YZV=
z?v9N^$zi=}q<llw|3X{;fwun2ZC{1fM%^*&U6H%9Q*YMWdg2$guTMaCzkecmlP6<|
zYvWW5P<l8T=~c!Jl#v*#t+pNC#mTPPa3fTOx-HhmhODRc6^C2qWtXtbx|A3<5Tomj
zE4Z%_W)8&#EuG@GyxnLK!R}R2B=4U@Rg^!i<Rg^5uivYMy}FXs`}uiWTS<gmFCTw+
mU3>83P3_&6pOyP~_fCIRzV*&NFVTL6_XfFxVbq^xll%sjY)xkX

literal 0
HcmV?d00001

diff --git a/utils/material.ts b/utils/material.ts
index a2a98e0..83e91a3 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -1,5 +1,4 @@
-import { Color, DoubleSide, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
-import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
+import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
 import { useLoader } from '@tresjs/core'
 
 const set_metaril_func = (scene: any, material: any) => {
@@ -12,11 +11,10 @@ const set_metaril_func = (scene: any, material: any) => {
         set_metaril_func(el, material)
     })
 }
-const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
-// const texture = await useLoader(TextureLoader, '/fence_one/tile1.png')
-
-// texture.wrapS = RepeatWrapping;
+// const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
+const texture = await useLoader(TextureLoader, '/fence_one/tile1.png');
 texture.wrapT = RepeatWrapping;
+
 export const set_material = (scene: any, color: any, count: number | undefined = undefined) => {
     let c = color
     if (count) {
@@ -27,12 +25,11 @@ export const set_material = (scene: any, color: any, count: number | undefined =
 
     const material = new MeshStandardMaterial({
         color: new Color(c || '#9c9c00'),
-        // alphaMap: texture,
-        map: count ? texture : undefined,
+        alphaMap: count ? texture : null,
         transparent: true,
-        opacity: 1,
-        roughness: 0.5,
-        metalness: 0,
+        opacity: 0.75,
+        // roughness: 0.5,
+        // metalness: 0,
         side: DoubleSide,
     })
     set_metaril_func(scene, material)