fence test

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()

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">

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>

pages/calc.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="siteblock siteblock_calc bg-white">
+        <LazyCalcValues />
+        <Suspense>
+            <LazyCalcModels />
+        </Suspense>
+    </div>
+</template>

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)
 }