some 3d fixes

components/model/fence.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { getColorHexFromRal } from '@/components/ral'
-import type { ralTypes } from '@/components/ral'
-import { CanvasTexture } from 'three';
-
 const props = defineProps(['index', 'models'])
 
-const lamelles_count = useState<number>('lamelles_count')
+const lamelles_count = use_lamelles_count()
-const fence_section = useState<number>('fence_section')
+const fence_section = use_fence_section()
-const section_count = useState<number>('section_count')
+const section_count = use_section_count()
-const extra_section = useState<number>('extra_section')
+const extra_section = use_extra_section()
-const pillar_color = useState<ralTypes>('pillar_color')
+const remove_pillar = use_remove_pillar()
-const lamelle_color = useState<ralTypes>('lamelle_color')
-const remove_pillar = useState<boolean>('remove_pillar')
 
 const lSize = 0.115
 const bSize = 0.0235
@@ -59,58 +53,58 @@ watch([section_count, fence_section, extra_section], () => {
         <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]">
-                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                <ModelItem :model="props.models.fence" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)">
-                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                    <ModelItem :model="props.models.fence" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                <ModelItem :model="props.models.fence" />
             </TresGroup>
         </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]">
-                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                <ModelItem :model="props.models.fence" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
-                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                    <ModelItem :model="props.models.fence" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
+                <ModelItem :model="props.models.fence" />
             </TresGroup>
         </TresGroup>
 
         <TresGroup name="lamelles">
             <template v-for="(n, i) in lamelles_count">
-                <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="(extra || fence_section) * 10">
+                <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]"
-                    <ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)" />
+                    :scale-x="((extra as number) || fence_section) * 10">
+                    <ModelItem :model="props.models.lamelle" />
                 </TresGroup>
             </template>
         </TresGroup>
-        <TresGroup name="lamelles_fastening_one">
+        <TresGroup name="lam_fastening_one">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :position-x="pillar_one_pos">
-                    <ModelItem :model="props.models.fastening" :color="getColorHexFromRal(pillar_color)" />
+                    <ModelItem :model="props.models.fastening" />
                 </TresGroup>
             </template>
         </TresGroup>
-        <TresGroup name="lamelles_fastening_two">
+        <TresGroup name="lam_fastening_two">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]" :position-x="pillar_two_pos">
-                    <ModelItem :model="props.models.fastening" :remove-pos="true"
+                    <ModelItem :model="props.models.fastening" :remove-pos="true" />
-                        :color="getColorHexFromRal(pillar_color)" />
                 </TresGroup>
             </template>
         </TresGroup>
-        <TresGroup name="top_section" :scale-x="(extra || fence_section) * 10"
+        <TresGroup name="top_section" :scale-x="((extra as number) || fence_section) * 10"
             :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
-            <ModelItem :model="props.models.top" :color="getColorHexFromRal(pillar_color)" />
+            <ModelItem :model="props.models.top" />
         </TresGroup>
     </TresGroup>
 </template>

components/model/item.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
-import { Box3, CanvasTexture, Color, DoubleSide, MeshStandardMaterial, Vector3 } from 'three';
+import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map'])
 
-let scene
+let scene: any
 if (props.modelUrl) {
     const { scene: model } = await useGLTF(props.modelUrl, { draco: true })
     scene = model
@@ -14,33 +14,14 @@ scene.receiveShadow = true
 scene.castShadow = true
 
 const target = ref(props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0))
-const box = new Box3();
-box.expandByObject(scene.children[0]);
-let size = new Vector3();
-box.getSize(size)
 
-const getMaterial = async () => {
-    return new MeshStandardMaterial({
-        color: new Color(props.color || '#9c9c9c'),
-        transparent: true,
-        opacity:1,
-        roughness: 0.3,
-        metalness: 0.3
-    })
-}
-const material = await getMaterial()
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
-        if (el.isMesh) {
-            el.castShadow = true
-            el.receiveShadow = true
-        }
         if (props.removePos) {
             el.translateX(-el.position.x)
             el.translateY(-el.position.y)
             el.translateZ(-el.position.z)
         }
-        if (el.material && props.color) el.material = material
         shadows_and_pos(el)
     })
 }
@@ -49,6 +30,7 @@ shadows_and_pos(scene)
 
 const model = ref()
 const { onLoop } = useRenderLoop()
+
 let stepbase = 0.005
 const axis = [
     { axis: 'x', func: 'translateX', },
@@ -73,15 +55,6 @@ onLoop(() => {
 })
 
 watch(props, () => {
-    if (props.color && `#${material.color.getHexString()}` !== props.color) {
-        function set_material(scene: any) {
-            scene.children.forEach((el: any) => {
-                if (el.material && props.color) el.material.color = new Color(props.color)
-                set_material(el)
-            })
-        }
-        set_material(model.value)
-    }
     if (props.target) {
         target.value = new Vector3(...props.target)
     }

components/model/parametric.vue

@@ -2,11 +2,16 @@
 import {
     ReinhardToneMapping, PCFSoftShadowMap,
     PMREMGenerator, Euler,
+    MeshStandardMaterial,
+    Color,
 } from 'three';
 import { EXRLoader } from 'three/examples/jsm/Addons.js';
 import { useGLTF, } from '@tresjs/cientos'
+import { getColorHexFromRal, type ralTypes } from '../ral';
 
-const section_count = useState<number>('section_count')
+const pillar_color = use_pillar_color()
+const lamelle_color = use_lamelle_color()
+const section_count = use_section_count()
 const extra_section = use_extra_section()
 const max_size = use_max_size()
 
@@ -21,7 +26,58 @@ const { scene: fence } = await useGLTF('/models_one/fence.glb', { draco: true })
 const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
 const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
 
-const { seek } = useSeek()
+function set_material(scene: any, material: any) {
+    scene.children.forEach((el: any) => {
+        if (el.isMesh) {
+            el.castShadow = true
+            el.receiveShadow = true
+        }
+        if (el.material) el.material = material
+        set_material(el, material)
+    })
+}
+const lamelle_material = new MeshStandardMaterial({
+    color: new Color(getColorHexFromRal(lamelle_color.value as ralTypes)),
+    transparent: true,
+    opacity: 1,
+    roughness: 0.3,
+    metalness: 0.3
+})
+const pillar_material = new MeshStandardMaterial({
+    color: new Color(getColorHexFromRal(pillar_color.value as ralTypes)),
+    transparent: true,
+    opacity: 1,
+    roughness: 0.3,
+    metalness: 0.3
+})
+set_material(lamelle, lamelle_material);
+
+[top, fence, fastening].map((el: any) => {
+    set_material(el, pillar_material)
+})
+const { seek, seekAll } = useSeek()
+watch(lamelle_color, () => {
+    const items = seekAll(scene.value, 'name', "lamelles")
+    const m = lamelle_material
+    m.color = new Color(getColorHexFromRal(lamelle_color.value as ralTypes))
+    items.forEach(element => {
+        set_material(element, m)
+    });
+})
+watch(pillar_color, () => {
+    const items = [
+        ...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"),
+    ]
+    const m = pillar_material
+    m.color = new Color(getColorHexFromRal(pillar_color.value as ralTypes))
+    items.forEach(element => {
+        set_material(element, m)
+    });
+})
 watch([section_count, extra_section], () => {
     const base = seek(scene.value, 'name', 'base')
     const n = (section_count.value as number) + ~~(!!extra_section.value)
@@ -51,7 +107,8 @@ onMounted(() => {
     <TresGroup name="base">
         <template v-for="i in (section_count + ~~(!!extra_section))">
             <template v-if="i <= max_size">
-                <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
+                <ModelFence :index="i"
+                    :models="{ top: top.clone(), fence: fence.clone(), fastening: fastening.clone(), lamelle }" />
             </template>
         </template>
     </TresGroup>