components/model/fence.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { BufferGeometry, Matrix4, Object3D, Vector2, Vector3 } from 'three';
+import { BufferGeometry, Matrix4, Mesh, Object3D, Vector2, Vector3 } from 'three';
+import { getColorHexFromRal } from '../ral';
+import { getFilename } from '../pattern';
 
 const props = defineProps(['index', 'models', 'last_element', 'first_element'])
 
@@ -10,6 +12,10 @@ const section_count = use_section_count()
 const extra_section = use_extra_section()
 const remove_pillar = use_remove_pillar()
 
+const pillar_color = use_pillar_color()
+const pillar_pattern = use_pattern()
+const lamelle_color = use_lamelle_color()
+
 const lSize = lamelle_height.value
 const bSize = 0.0235
 const pillar_size = 104 * 0.001
@@ -47,7 +53,6 @@ const instanced_lamelle_material = props.models.lamelle.children[0].material
 const instanced_lamelle_count = 24
 const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
 watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
-    // console.log(props.index, instanced_v, instanced_lamelle.value)
     for (let i = 0; i < instanced_lamelle_count; i++) {
         if (instanced_lamelle.value) {
             const scale_x = (((extra.value as number) || fence_section.value) * 10)
@@ -75,40 +80,68 @@ watch([section_count, fence_section, extra_section], () => {
     if (extra_section.value && props.last_element) {
         pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
         pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
-        // translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
     } else {
         pillar_one_pos.value = fence_section.value * -0.5 - 0.015
         pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
-        // translate_to_section.value = make_translate_to_section()
     }
 })
 
-const fastening = props.models.fastening.clone()
+const pillar = ref<Mesh[]>([])
-const top = props.models.top.clone()
-
-const pillar: Ref<Object3D[]> = ref([])
 const setPillar = () => {
-    pillar.value = [
+    const top = props.models.fence_top.children[0];
-        props.models.fence_top.children[0],
+    top.position.setComponent(1, lSize * lamelles_count.value)
-        props.models.fence.children[0],
+
-        props.models.fence_inner.children[0],
+    const pillar_outer = props.models.fence.children[0];
-        props.models.fence_bottom.children[0],
+    pillar_outer.scale.setComponent(1, lamelles_count.value);
-    ]
+
-    pillar.value[0].position.setComponent(1, lSize * -0.5)
+    const pillar_inner = props.models.fence_inner.children[0];
-    pillar.value[1].scale.setComponent(1, lamelles_count.value)
+    pillar_inner.scale.setComponent(1, lamelles_count.value);
-    pillar.value[2].scale.setComponent(1, lamelles_count.value)
+
-    pillar.value[3].position.setComponent(1, lSize * lamelles_count.value)
+    const bottom = props.models.fence_bottom.children[0];
+    bottom.position.setComponent(1, lSize * -1)
+
+    let arr = [top.clone(), pillar_outer.clone(), pillar_inner.clone(), bottom.clone(),]
+    arr.map(el => {
+        set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
+    })
+    set_material(
+        { children: [arr[2]] },
+        getColorHexFromRal(pillar_color.value),
+        { pattern: pillar_pattern.value, count: lamelles_count.value },
+    )
+    pillar.value = arr
 }
 setPillar()
-watch([props.models.fence_top, props.models.fence, props.models.fence_inner, props.models.fence_bottom], () => {
+watch([pillar_pattern, pillar_color, fence_section, lamelles_count], setPillar)
-    setPillar()
+
-})
+const fastening = ref<Object3D[]>([])
+const setFastening = () => {
+    const one = props.models.fastening.children[0].clone();
+    one.position.setComponent(0, pillar_one_pos.value);
+    one.scale.set(1, lamelles_count.value, 1);
+
+    const two = props.models.fastening.children[0].clone();
+    two.position.setComponent(0, pillar_two_pos.value);
+    two.scale.set(-1, lamelles_count.value, 1);
+
+    const top = props.models.top.children[0].clone();
+    top.scale.setComponent(0, ((extra.value as number) || fence_section.value));
+    top.position.set(pillar_size * 0.5, lamelles_count.value * lSize, 0)
+
+    let arr = [one.clone(), two.clone(), top.clone(),]
+    arr.map(el => {
+        set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
+    })
+    fastening.value = arr
+}
+setFastening()
+watch([pillar_color, fence_section, lamelles_count], setFastening)
 </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">
             <template v-for="item in pillar">
-                <TresObject3D v-bind="item.clone()" />
+                <TresMesh v-bind="item.clone()" />
             </template>
         </TresGroup>
 
@@ -121,13 +154,9 @@ watch([props.models.fence_top, props.models.fence, props.models.fence_inner, pro
         <TresGroup name="lamelles">
             <TresInstancedMesh ref="instanced_lamelle" :args="instanced_v" />
         </TresGroup>
-        <TresObject3D v-bind="fastening.children[0]" name="lam_fastening_one" :position-x="pillar_one_pos"
+
-            :scale-y="lamelles_count" />
+        <template v-for="item in fastening">
-        <TresObject3D v-bind="fastening.children[0]" name="lam_fastening_two" :position-x="pillar_two_pos"
+            <TresObject3D v-bind="item.clone()" />
-            :scale="[-1, lamelles_count, 1]" />
+        </template>
-        <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="top.children[0]" />
-        </TresGroup>
     </TresGroup>
 </template>

components/model/parametric.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Mesh, Object3D, Vector3 } from 'three';
+import { Vector3 } from 'three';
 //@ts-ignore
-import { OrbitControls, useGLTF, } from '@tresjs/cientos'
+import {  useGLTF, } from '@tresjs/cientos'
 import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
 
 const section_count = use_section_count()
@@ -93,7 +93,4 @@ watch(open_calc, () => {
                 :count="count" />
         </template>
     </TresGroup>
-    <Suspense>
-        <ModelRecolor :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
-    </Suspense>
 </template>

components/model/recolor.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import type { Object3D } from 'three';
-import { getColorHexFromRal, type ralTypes } from '../ral';
-
-const props = defineProps(['models'])
-
-const pillar_color = use_pillar_color()
-const pillar_pattern = use_pattern()
-const lamelle_color = use_lamelle_color()
-const lamelle_count = use_lamelles_count()
-const remove_pillar = use_remove_pillar()
-
-const { top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle } = props.models
-const { scene } = useTresContext()
-const { seekAll } = useSeek()
-
-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
-}
-
-const recolorLamelles = () => {
-    [
-        lamelle,
-        ...seekAll(scene.value, 'name', "lamelles"),
-    ].map((el: Object3D) => { set_material(el, getColorHexFromRal(lamelle_color.value)) });
-}
-
-const recolorPillar = () => {
-    [
-        top, fastening, fence, fence_bottom, fence_top,
-        // ...seekAll(scene.value, 'name', "pillar_one"),
-        // ...seekAll(scene.value, 'name', "pillar_two"),
-        // ...seekAll(scene.value, 'name', "lam_fastening_one"),
-        // ...seekAll(scene.value, 'name', "lam_fastening_two"),
-        // ...seekAll(scene.value, 'name', "top_section"),
-    ].map((el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
-}
-
-const recolorPillarPattern = () => {
-    [fence_inner].map(
-        (el: Object3D) => {
-            set_material(el, getColorHexFromRal(pillar_color.value), {
-                pattern: pillar_pattern.value,
-                count: lamelle_count.value
-            })
-        });
-}
-
-recolorLamelles();
-recolorPillar();
-recolorPillarPattern();
-
-watch(lamelle_color, recolorLamelles)
-watch(pillar_color, recolorPillar)
-watch([pillar_color, pillar_pattern, lamelle_count, remove_pillar], recolorPillarPattern)
-</script>
-<template>
-</template>