recolor

components/model/parametric.vue

@@ -1,24 +1,13 @@
 <script setup lang="ts">
-import {
-    PCFSoftShadowMap,
-    CineonToneMapping,
-    Mesh,
-    Object3D,
-    PMREMGenerator,
-} from 'three';
-import { GainMapLoader, } from '@monogrid/gainmap-js'
+import { Mesh, Object3D } from 'three';
 //@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
-import { getColorHexFromRal, type ralTypes } from '../ral';
 
-const pillar_color = use_pillar_color()
-const pillar_pattern = use_pattern()
-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 { scene, renderer, camera, controls } = useTresContext()
+const { scene } = useTresContext()
+const { seek, seekAll } = useSeek()
 
 const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
 const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
@@ -44,53 +33,6 @@ const fence_inner = ref(model_fence_inner)
 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));
-[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)) });
-
-const { seek, seekAll } = useSeek()
-watch(lamelle_color, () => {
-    set_material(lamelle.value, getColorHexFromRal(lamelle_color.value))
-    const items = seekAll(scene.value, 'name', "lamelles")
-    items.forEach(element => {
-        set_material(element, getColorHexFromRal(lamelle_color.value))
-    });
-})
-watch(pillar_color, () => {
-    [top, fastening, fence, fence_bottom, fence_top].map(
-        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
-
-    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"),
-    ]
-    items.forEach(element => {
-        set_material(element, getColorHexFromRal(pillar_color.value))
-    })
-})
-watch([pillar_color, pillar_pattern], () => {
-    [fence_inner].map(
-        (el: Ref) => {
-            set_material(el.value, getColorHexFromRal(pillar_color.value), {
-                pattern: pillar_pattern.value,
-                count: lamelle_count.value
-            })
-        });
-})
-
 const total = ref((section_count.value + ~~(!!extra_section.value)))
 const size = ref(Math.ceil(total.value / 4))
 const count = ref((total.value >= 4) ? size.value : total.value)
@@ -125,16 +67,6 @@ watch(() => [section_count.value, extra_section.value], () => {
     });
 })
 
-watch(lamelle_count, () => {
-    [fence_inner].map(
-        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), 
-            {
-                pattern: pillar_pattern.value,
-                count: lamelle_count.value
-            }
-        ) });
-})
-
 </script>
 <template>
     <TresGroup name="base">
@@ -143,4 +75,7 @@ watch(lamelle_count, () => {
                 :count="count" />
         </template>
     </TresGroup>
+    <Suspense>
+        <ModelRecolor :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
+    </Suspense>
 </template>

components/model/recolor.vue

@@ -0,0 +1,58 @@
+<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 { 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
+}
+
+set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
+[lamelle].map(
+    (el: Object3D) => set_material(el, getColorHexFromRal(lamelle_color.value)));
+[top, fastening, fence, fence_bottom, fence_top].map(
+    (el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
+[fence_inner].map(
+    (el: Object3D) => { set_material(el, getColorHexFromRal(pillar_color.value)) });
+
+watch(lamelle_color, () => {
+    [
+        lamelle,
+        ...seekAll(scene.value, 'name', "lamelles"),
+    ].map((el: Object3D) => { set_material(el, getColorHexFromRal(lamelle_color.value)) });
+})
+watch(pillar_color, () => {
+    [
+        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)) });
+
+})
+watch([pillar_color, pillar_pattern, lamelle_count], () => {
+    [fence_inner].map(
+        (el: Object3D) => {
+            set_material(el, getColorHexFromRal(pillar_color.value), {
+                pattern: pillar_pattern.value,
+                count: lamelle_count.value
+            })
+        });
+})
+</script>
+<template>
+</template>

utils/material.ts

@@ -47,6 +47,6 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
             })
         }
     }
-
-    set_metaril_func(scene, material)
+    if (scene) set_metaril_func(scene, material)
+    else console.log(scene)
 }