fence tile

components/model/diagram.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+//@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
 import { getColorHexFromRal } from '../ral';
 

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>

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

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>

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)