mode func to utils

assets/main.scss

@@ -201,4 +201,8 @@ button {
     &-name {
         @apply text-ioprim font-bold w-20 text-xl leading-4 col-span-2;
     }
+}
+
+.fallback {
+    @apply absolute bg-neutral-600 top-0 left-0 w-full h-full z-20 flex justify-center items-center text-black font-mono
 }

components/calcModels.vue

@@ -79,7 +79,12 @@ watch([section_count, extra_section], () => {
 </script>
 <template>
     <div class="container min-w-full relative h-[50vh]">
-        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
+        <ClientOnly fallback-tag="div">
+            <template #fallback>
+                <div class="fallback">
+                    Загрузка 3D модели
+                </div>
+            </template>
             <Loader />
             <TresCanvas shadows>
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />

components/calcValues.vue

@@ -125,7 +125,12 @@ const plurals = {
 </script>
 <template>
     <div class="container py-4">
-        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
+        <ClientOnly fallback-tag="div">
+            <template #fallback>
+                <div class="fallback">
+                    Загрузка 3D модели
+                </div>
+            </template>
             <form class="form">
                 <div class="col-span-12 lg:col-span-6">
                     <div class="form-row">

components/expDiagram.vue

@@ -22,21 +22,20 @@ const loadAll = async () => {
     const { scene: key } = await useGLTF('/models_light/key_exp.glb')
     const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb')
 
-    const k = 1
+    const k = 0.001
 
     back_light.value = back.children[0]
-    // back_light.value.intensity = back_light.value.intensity * k
+    back_light.value.intensity = back_light.value.intensity * k
-    back_light.value.intensity = 250
+    // back_light.value.intensity = 250
 
     key_light.value = key.children[0]
-    // key_light.value.intensity = key_light.value.intensity * k
+    key_light.value.intensity = key_light.value.intensity * k
-    key_light.value.intensity = 250
+    // key_light.value.intensity = 250
     key_light.value.cast_shadow = true
 
     secondary_light.value = secondary.children[0]
-    // secondary_light.value.intensity = secondary_light.value.intensity * k
+    secondary_light.value.intensity = secondary_light.value.intensity * k
-    secondary_light.value.intensity = 50
+    // secondary_light.value.intensity = 50
-
 }
 onMounted(() => {
     loadAll()
@@ -44,7 +43,12 @@ onMounted(() => {
 </script>
 <template>
     <div class="h-96 relative">
-        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
+        <ClientOnly fallback-tag="div">
+            <template #fallback>
+                <div class="fallback">
+                    Загрузка 3D модели
+                </div>
+            </template>
             <TresCanvas preset="realistic" heoght="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" />
                 <OrbitControls v-bind="controlsState" make-default />
@@ -55,8 +59,10 @@ onMounted(() => {
                     <ModelDiagram />
                 </Suspense>
 
-                <TresPointLight v-bind="back_light" v-if="back_light":position="[back_light.position.x, back_light.position.y, back_light.position.z]" />
+                <TresPointLight v-bind="back_light" v-if="back_light"
-                <TresPointLight v-bind="key_light" v-if="key_light":position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
+                    :position="[back_light.position.x, back_light.position.y, back_light.position.z]" />
+                <TresPointLight v-bind="key_light" v-if="key_light"
+                    :position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
                 <TresPointLight v-bind="secondary_light" v-if="secondary_light"
                     :position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
             </TresCanvas>

components/model/diagram.vue

@@ -23,11 +23,14 @@ const { scene: planki } = await useGLTF('/models/planki.glb', { draco: true })
 const { scene: stolb } = await useGLTF('/models/stolb.glb', { draco: true })
 const { scene: verh } = await useGLTF('/models/verh.glb', { draco: true })
 
-set_material(planki, 'lamelle');
+const lamelle_color = use_lamelle_color()
-[stolb, verh, krepleniye_planok].map(el => set_material(el, 'pillar'))
+const pillar_color = use_pillar_color()
+
+set_material(planki, getColorHexFromRal(lamelle_color.value));
+[stolb, verh, krepleniye_planok].map(el => set_material(el, getColorHexFromRal(pillar_color.value)))
 </script>
 <template>
-    <TresGroup :translate-y="-2" :scale="1.25">
+    <TresGroup :position-y="-3.5" :scale="2">
         <Item :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
         <Item :model="krepleniye_planok" :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
         <Item :model="osnova_stolba" />

components/model/parametric.vue

@@ -26,16 +26,6 @@ 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 })
 
-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 lcolor = getColorHexFromRal(lamelle_color.value)
 const lamelle_material = new MeshStandardMaterial({
     color: new Color(lcolor || '#9c9c9c'),
@@ -52,11 +42,9 @@ const pillar_material = new MeshStandardMaterial({
     roughness: 0.3,
     metalness: 0.3
 })
-set_material(lamelle, lamelle_material);
+set_material(lamelle, getColorHexFromRal(lamelle_color.value));
+[top, fence, fastening].map((el: any) => { set_material(el, getColorHexFromRal(pillar_color.value)) })
 
-[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")
@@ -64,7 +52,7 @@ watch(lamelle_color, () => {
     const mcolor = getColorHexFromRal(lamelle_color.value as ralTypes)
     if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
-        set_material(element, m)
+        set_material(element, getColorHexFromRal(lamelle_color.value))
     });
 })
 watch(pillar_color, () => {
@@ -79,7 +67,7 @@ watch(pillar_color, () => {
     const mcolor = getColorHexFromRal(pillar_color.value as ralTypes)
     if (mcolor) m.color = new Color(mcolor)
     items.forEach(element => {
-        set_material(element, m)
+        set_material(element, getColorHexFromRal(pillar_color.value))
     });
 })
 watch([section_count, extra_section], () => {

utils/material.ts

@@ -1,8 +1,5 @@
 import { Color, MeshStandardMaterial } from "three"
-import { getColorHexFromRal } from "~/components/ral"
 
-const lamelle_color = use_lamelle_color()
-const pillar_color = use_pillar_color()
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
         if (el.isMesh) {
@@ -10,17 +7,11 @@ const set_metaril_func = (scene: any, material: any) => {
             el.receiveShadow = true
         }
         if (el.material) el.material = material
-        set_material(el, material)
+        set_metaril_func(el, material)
     })
 }
 export const set_material = (scene: any, color: any) => {
     let c = color
-    if (color == 'lamelle') {
-        c = getColorHexFromRal(lamelle_color.value)
-    }
-    if (color == 'pillar') {
-        c = getColorHexFromRal(pillar_color.value)
-    }
     const material = new MeshStandardMaterial({
         color: new Color(c || '#9c9c00'),
         transparent: true,