From 350523e753f337fd07eab90295af1815b88e7001 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 16 Sep 2024 11:05:52 +0300
Subject: [PATCH 1/3] fence test

---
 components/calcModels.vue       |   7 +++---
 components/model/fence.vue      |  24 ++++++-------------
 components/model/parametric.vue |  40 +++++++++++++++++++++++++-------
 pages/calc.vue                  |   8 +++++++
 public/fence_one/bottom.glb     | Bin 0 -> 2752 bytes
 public/fence_one/center.glb     | Bin 0 -> 2156 bytes
 public/fence_one/top.glb        | Bin 0 -> 2832 bytes
 utils/material.ts               |   5 ++--
 8 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 pages/calc.vue
 create mode 100644 public/fence_one/bottom.glb
 create mode 100644 public/fence_one/center.glb
 create mode 100644 public/fence_one/top.glb

diff --git a/components/calcModels.vue b/components/calcModels.vue
index 5689f78..78d0687 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { FrontSide, RepeatWrapping } from 'three';
-import { TresCanvas, useTexture } from '@tresjs/core'
-import { OrbitControls, useGLTF } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+//@ts-ignore
+import { useGLTF } from '@tresjs/cientos'
 
 const fence_section = use_fence_section()
 const section_count = use_section_count()
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 222c2fd..9f5c575 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -91,26 +91,16 @@ watch([section_count, fence_section, extra_section], () => {
 </script>
 <template>
     <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"
-            :position-z="0">
-            <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
-            <TresObject3D v-bind="props.models.fence.children[0]" :scale-y="lamelles_count" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+        <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_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"
-            :position-z="0">
-            <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </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]" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+            <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
         <TresGroup name="lamelles">
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 9f5fb1f..ca51df2 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -4,8 +4,12 @@ import {
     EquirectangularReflectionMapping,
     CineonToneMapping,
     Euler,
+    Mesh,
+    Group,
+    Object3D,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
+//@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
 
@@ -18,23 +22,41 @@ const max_size = use_max_size()
 const { scene, renderer, camera } = useTresContext()
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 0.5
-// renderer.value.gammaOutput = true
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFSoftShadowMap
 
 const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
-const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
-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 })
+// const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
+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: 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 });
+
+[model_fence_top, model_fence_bottom].map((sc: Object3D) =>
+    sc.traverse((child: Object3D) => {
+        if (child instanceof Mesh) {
+            child.position.z = 0
+        }
+    })
+)
 
 const top = ref(top_model)
-const fence = ref(fence_model)
+const fence = ref(model_fence_center)
+const fence_top = ref(model_fence_top)
+const fence_bottom = ref(model_fence_bottom)
 const fastening = ref(fastening_model)
 const lamelle = ref(lamelle_model)
 
+if (!pillar_color.value) {
+    const r = Math.floor(Math.random() * predefPillarColors.length)
+    pillar_color.value = predefPillarColors[r] as ralTypes
+    lamelle_color.value = predefLamelleColors[r] as ralTypes
+}
+
 set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
-[top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+[top, fence, fence_bottom, fence_top, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -72,7 +94,9 @@ onMounted(async () => {
         'hdrmaps/hdr-gainmap.webp',
         'hdrmaps/hdr.json',
     ])
-    renderer.value.render(scene.value, camera.value)
+    if (camera.value) {
+        renderer.value.render(scene.value, camera.value)
+    }
     scene.value.environment = result.renderTarget.texture
     scene.value.background = result.renderTarget.texture
     scene.value.background.mapping = EquirectangularReflectionMapping
@@ -86,7 +110,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, fastening, lamelle }" />
+            <ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fastening, lamelle }" />
         </template>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/pages/calc.vue b/pages/calc.vue
new file mode 100644
index 0000000..8f12135
--- /dev/null
+++ b/pages/calc.vue
@@ -0,0 +1,8 @@
+<template>
+    <div class="siteblock siteblock_calc bg-white">
+        <LazyCalcValues />
+        <Suspense>
+            <LazyCalcModels />
+        </Suspense>
+    </div>
+</template>
\ No newline at end of file
diff --git a/public/fence_one/bottom.glb b/public/fence_one/bottom.glb
new file mode 100644
index 0000000000000000000000000000000000000000..14c14e89f154af4112c6ef71206a981814846093
GIT binary patch
literal 2752
zcmeHHU2hvj6uog1K9WEw6xyU8xYHJ1Tz7Zv^?EHCl(=acNa7NkDpC|xYkT7?*t^m0
zIuI;N{SQ1=;t}x#Jn#ZipbsE^1mXoDULqv;0Z5z~kJp>VCFwhs_U@TGbI(0<X4cJC
z^>%`Y9!(PcK2G#brM%i@RuI@BD|A`Yc5UAZJ)afWyW76!dO@;@lH`2Lb{n>zT)J6K
z?q<_kI;XG{+qM0`@mws{(hBRPSWpK6D<~2Ltgz8#uGL14Rm5D1xn9HO6Ut^Ub$BwZ
zC@NS73)Ict=5W+yZ9CW&+>$T|y;kjp>wJRF5z#_>C)@*3hVkOI723XIwfaIDUZ>Ww
zD^A01utMl}Y_RvWt;luv8<zheB<$4u6+5(AEvLTbb(-6*9e|?CYF1#Eyq4$Rw(7#A
z4JECZ`K+GPO*NA<3{BN@sgveZu28la5W+ft&@sxTGm7}Bs;McamN#=fu{#(dtc-Tg
zElMk@&bQz@Z6|bg<pL`VeW%t5`LN6GmMcrurSht<bG5v-GPleMYKm1C)=TB`+O7Kv
zD`+@R$89)uUXmGliJG1`8LN(|!1Md&);e2TwtvsDKN6&Muf5~Bwi{OWc5wQ-s^wCw
z?sZ(;vn)2*wm#-}Ag$=CX_|RWhl^Uq)bnspRdqFwe8y0XtYI45P(6!f_!)|78ZbJ?
zy>oE&Hg1e0Ns07`qEP5z_ZCXHBDgnk-EiPI-TzgtJx#fGq&qx5+Fc}tYbFeo-7BTJ
z<+(L+!-w+Y#~_ZNwinvVw%ZKx)nxPVoF~d#TjE>CFtq$8|LikaGl#<-SaE!<AUkPw
zMtiKYnR|-fxbTN{s~X=)ym^Ly3Vj=-1+jgrSwq8ZO+K0+nqOL_uine=<L{5YT(pXD
z{Ovzgk^lVRtzsNEKU)_0+Ar(HIQ~(t2haYK@Ym>N{Bcm^y?(-aiTC3;0e+sJ{cXMY
zom|5;KwB}UGs4g&u+$l0XcJiKj4-qbEOm~=&{>S>9AK_9!q6$O)G096@auuT&vkxK
zc)xh_uR8)4jQL{X&yv8?sk_C=Z~A$zA&#ezA9w;Dp-u7#EO`W$JOWFe2!kim$+ZwY
z_<_gH&x_yl_ZMfoZ}ayce=yS(^Pg@mz7@|uJg<xVoxihk{jg?GJA9AgAFS{9=c731
zllnrZ&@n=%&@n=%$RDFK+QU))NN2PLIwMZ#6!`JJyehu`!#F-S+`lN1=W%#_d`%pm
zh)3#v@c&yFd~zSg=y{r^F+3A=ie8{8#3_0XqiKvL@SLL4^a{-)&eAzLL$A>c;tX9t
z_Kb)ZF!Lh%UPQb|3}~D#BVNX6oDy^i@e)P}dX|!iNsOMMNxFh~g<hwZQO6J&U89%q
h=J6U`rC0Ih@hZJR=jkk6N4!pNLdiL(K8<IL{srlKqksSa

literal 0
HcmV?d00001

diff --git a/public/fence_one/center.glb b/public/fence_one/center.glb
new file mode 100644
index 0000000000000000000000000000000000000000..4ff9196f15321fdbabc13db262694a6a7d0287a4
GIT binary patch
literal 2156
zcmdT_O>YxN7#;!vO86+Bg`TWAFYfNz`(??X5JE_s#1LC3QWT-JJ#kiD??$uhw2@_r
z|Ii~+kBAd+-~y7%rB#1KZ&k&GQ-44uo*B<>7KoZ~WTc(E^UnJ|&pXe&<MhJTohd>{
zc#@ERjuG;Gv#~Oyev+`1)`qmlBF6nR=CnqC*y3>%C#4=zO1DB5br~-$e%C1NRLf@B
z)~QB!7*B#YLa<rZ=}4nV2LQCDD=VS3^&yS?K76z(_cR*CT_!g4jgj`@W?9z_pk@Ka
z#%N=2HKcu(Y)Nbdn51#oz7EusgFA<s?{BBOfT~cD-uF|+13#RU(v1i0kTruY>(W}v
z2MqX=>Xud9!>-SNL=oF<zRXfT41>;UJm_sjECIxjw*7?7#bM0v_#LU!x?a{jw`$pz
zXH;y*F%8Ss4(l^Sg^DHvgm^q-%zfpGE{9=wrtX=pXOHCRAc+(+KfMqMhxf!0c+d~h
zU`GY`Y0884AQj6Yz1L_iwiX*JQqYyg>hkOotr;3^&9BWh8mqS->a=F!MuVsubVN#J
zPfO&C<lXokY$Y+Dh}#})ZZiHLU_VLFPTb#)Biv4FcN_O_8K$k#PCSUvX=YWR{Vckm
ztXqcXd9G<eMYG~rF4Qv&%W&bZIEGVoJVyv>RS|~a=!WM&Xj^C(p!wFX?+c<y_dZFf
ztcO0BpF@kFZ;Ew8frIM)zjX6+(#=oUq4B5e(kWH5pqgTD&dn~(uF4MIE5CRR@(S9!
zDO+MuFU7ktU00*R(b(LSuN{4s`n)F|ex>T!xa>@dgL5U=VYAV)A2M4GI^odS`bTv;
zHXOz5ig*bV6_f&nW4n%xUM+=33AwenLZ07u$N2dp&lddptN&Wke)9Nsz4z;qwA+8J
z)qhuh#Egsf3*<U)-_=F#ABa)*xM)uSNBF<}d#(Oj#Rz=x)(gDSR=m<yyjhIk&28}3
z3%r>vcyk-P(pJ3E7Wk)L-W@C6@eJ&&X83b__;Z}Wp9{Z<_@|eKH{V?wz7h5>8w)oc
zU$vxt_uuMG;hT&{@QH6Sin*C@vcDHo#3|w<_lC$(yplulN_!t(=@&W0T(O=ESz8_h
z-W&(K(iZqxbnzSq+m96Pm-u&@;9oz!DRP8-MNVKoL5^W{600eEN60C1nq0tqft({V
s<SaRl`8>G@?~I%;V&^D1PA+4<OfHeH$r*A5^A++9vd)od%+ug_4>iI@1ONa4

literal 0
HcmV?d00001

diff --git a/public/fence_one/top.glb b/public/fence_one/top.glb
new file mode 100644
index 0000000000000000000000000000000000000000..a9a456a56ff9e013a13b1de6bcc61b90252bdc26
GIT binary patch
literal 2832
zcmeHH-%lJ>6h2T;Tc~Zd+CqQ0y>0bnSns{_dy};RN(%~X3u{9{NHe=TETg+KWM&p6
z8<PGHJ~rv2@x>;ZCYmVLM3epzeQ44LUx-Ql1Dbg5-I-;eAm!aj=G^a|d+v9>bMBp~
zH_A790pR2SfYuN2>3nInO`IrlV^V07y6d~469*wFkk3}azz?Ea9k=Ah8m?b+!`#%z
zrQDj9=Xrw?g{-+@<OMzk^E@RR3W=&nKngTL5h*OTiSIPgN9N_4Lj0iSiUqo~q3m4D
zQ_7Gv4PZ+fOWU(HX}Zyh<W2~qIA~NxP{RstibKbb8cr<bEK-H$nWme}v^C2xb*Afv
zrtrMZn57%kv>9c(!S$?!iRNm&juKQN(l(vg4LzsPDWMj$Dh+qutGP8&h{KkPx;j<O
zByo3ZPWUD2SgnLJZtOG~UUe>L)mMBsLW(x2IFUOZG=lJkQ<eQ)q<Lyvnr`SeQw`JP
zC<s-*o{tHINt%=pn;xbayS}_i<-?fGsm(3h*pSs>E9D_{4?r|GPq`&Z2)(8kduvI6
z6UU)fX~kmNCbvrSQ{}1BtUQR>(%j7GG$}BJlqVL(OQpH%cPS}wya}FP^QvNty4_3M
zvmwvasp3);gq`MATFc9Bc*k?UlBCt3xf=McAD7ox@!sf+8w#lgEgx^FhDA1=uf^@j
zQ=QqiZE?<Z%hs?qapp|N1Ln-2hRv~~qM^EmVfdJo*(NsH5WVy8(k_m4NmNx+HH%Yb
z>WZ1ybgElaw~<4&xaE#eTamGQFvU_Nxic}2_Xh8Cwis;7LB;&nc7B-c{FUt3_*b(_
zr);H-T}`sjkB?4|&dF=PEkAoU@?0wGu{-Vh^%y@w&BB8aj?(h7{B__ocEY;&i>R7y
z;0;JyaqwPA_PV=OzALkB93nS<1v_;!E-J|;SH<_yX+zS2Ox;W~IbPvh?sxomj!n(N
z54Wvi;jgXY!<$Yqi+_1pmi}+=UoU2{_h4H3D^C}SS^Q@bk35_E;fI(Df8AW<`UB$=
zyqU#-{K7x{e4+Sr5+gKxf7{wjb!PETFU!&|VzStMFfIK;XBMNjlt<{?6aR?00CK9(
z`2=GUyqU#)$S?dt=dVeO(C}<aFAAMs6h1Gq7n2ef%&}tc-{TSwDz}Qq9(DYpS6O@%
z{b^60Zs}5+;2C)_DRIIhal#{U!qdgaA5C^OBOgBZt_j<Ea`O{0es{Vp=c#{ds5Ad&
zsk5H?@1NCW+~hx65-)b&dn{}kvpw#`FXJ%2lV8lTocrZPoxh3LJ#@<4d+3z@19T?3
zrOsXaBAciytxf9ea-vR&cjpzmvbF8RaxKZZUBBGY&6D--hY!P(a{NCgeZF?k*aJsl
z5PI<Kha+$t2G9<`TR0oUSwFr<-~_x2!)S-$44i`ZVF>LIoI~#^Y0u%x+nDG)+VemV
z^}$877jf1Hy>J2T1)TN5n~+1B!`T~f3@)L)1RuaVxR0PEa0O1{DC`xu4DaD6>}B{6
V&cbQ9iuNjegi6k!>J#|(z`y=%)Yt$3

literal 0
HcmV?d00001

diff --git a/utils/material.ts b/utils/material.ts
index 2976a67..0c76fad 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -1,4 +1,4 @@
-import { Color, MeshStandardMaterial } from "three"
+import { Color, DoubleSide, MeshStandardMaterial } from "three"
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -17,7 +17,8 @@ export const set_material = (scene: any, color: any) => {
         transparent: true,
         opacity: 1,
         roughness: 0.5,
-        metalness: 0
+        metalness: 0,
+        side: DoubleSide
     })
     set_metaril_func(scene, material)
 }
\ No newline at end of file
-- 
2.40.1


From 6661c1738570a23563e0d118b40fbc8b6f38f1c5 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 16 Sep 2024 12:59:08 +0300
Subject: [PATCH 2/3] svg count

---
 components/model/fence.vue      |  19 +++++++++++--------
 components/model/parametric.vue |   8 +++++++-
 public/fence_one/svg_tile1.svg  |  24 ++++++++++++++++++++++++
 public/fence_one/tile1.png      | Bin 0 -> 14229 bytes
 utils/material.ts               |  21 ++++++++++++++++++---
 5 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 public/fence_one/svg_tile1.svg
 create mode 100644 public/fence_one/tile1.png

diff --git a/components/model/fence.vue b/components/model/fence.vue
index 9f5c575..1391517 100644
--- a/components/model/fence.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index ca51df2..9118d63 100644
--- a/components/model/parametric.vue
+++ b/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([
diff --git a/public/fence_one/svg_tile1.svg b/public/fence_one/svg_tile1.svg
new file mode 100644
index 0000000..4ce6847
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/fence_one/tile1.png b/public/fence_one/tile1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce7ba346a1dd91308df5d2fc550694bb73e710b7
GIT binary patch
literal 14229
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
BtrY+O

literal 0
HcmV?d00001

diff --git a/utils/material.ts b/utils/material.ts
index 0c76fad..a2a98e0 100644
--- a/utils/material.ts
+++ b/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)
 }
\ No newline at end of file
-- 
2.40.1


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 3/3] 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)
-- 
2.40.1