color of explosion scheme

components/expDiagram.vue

@@ -10,7 +10,7 @@ const controlsState = reactive({
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
 
-const explosion_state = useState<boolean>('explosion_state', () => false)
+const explosion_state = use_explosion_state()
 const toggleExpState = () => {
     explosion_state.value = !explosion_state.value
 }
@@ -51,7 +51,9 @@ onMounted(() => {
                 <Suspense v-if=false>
                     <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
                 </Suspense>
-                <ModelDiagram />
+                <Suspense>
+                    <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="key_light" v-if="key_light":position="[key_light.position.x, key_light.position.y, key_light.position.z]" />

components/model/diagram.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-const props = defineProps(['koef'])
+import { useGLTF, } from '@tresjs/cientos'
 import Item from './item.vue';
+import { getColorHexFromRal } from '../ral';
+import { Color, MeshStandardMaterial } from 'three';
 
-const explosion_state = useState<boolean>('explosion_state')
+const explosion_state = use_explosion_state()
 
 const k = 1.5
 const targetExplosion = {
@@ -13,21 +15,49 @@ const targetExplosion = {
     stolb: [0 * k, 0 * k, 1 * k],
     verh: [0 * k, 0.25 * k, 0 * k],
 }
+
+const { scene: kosynka } = await useGLTF('/models/kosynka.glb', { draco: true })
+const { scene: krepleniye_planok } = await useGLTF('/models/krepleniye_planok.glb', { draco: true })
+const { scene: osnova_stolba } = await useGLTF('/models/osnova_stolba.glb', { draco: true })
+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 })
+function set_material(scene: any, material: any) {
+    scene.children.forEach((el: any) => {
+        if (el.material) el.material = material
+        set_material(el, material)
+    })
+}
+
+const lamelle_color = use_lamelle_color()
+const lcolor = getColorHexFromRal(lamelle_color.value)
+const lamelle_material = new MeshStandardMaterial({
+    color: new Color(lcolor || '#9c9c9c'),
+    transparent: true,
+    opacity: 1,
+    roughness: 0.3,
+    metalness: 0.3
+})
+set_material(planki, lamelle_material)
+
+const pillar_color = use_pillar_color()
+const pcolor = getColorHexFromRal(pillar_color.value)
+const pillar_material = new MeshStandardMaterial({
+    color: new Color(pcolor || '#9c9c9c'),
+    transparent: true,
+    opacity: 1,
+    roughness: 0.3,
+    metalness: 0.3
+});
+[stolb, verh, krepleniye_planok].map(el => set_material(el, pillar_material))
 </script>
 <template>
-    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
-        <TresCircleGeometry :args="[8, 8, 1]" />
-        <TresMeshStandardMaterial color="pink" />
-    </TresMesh>
-    <Suspense>
-        <TresGroup :translate-y="-2" :scale="1.25">
-            <Item model-url="/models/kosynka.glb" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
-            <Item model-url="/models/krepleniye_planok.glb"
-                :target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
-            <Item model-url="/models/osnova_stolba.glb" />
-            <Item model-url="/models/planki.glb" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
-            <Item model-url="/models/stolb.glb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
-            <Item model-url="/models/verh.glb" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
-        </TresGroup>
-    </Suspense>
+    <TresGroup :translate-y="-2" :scale="1.25">
+        <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" />
+        <Item :model="planki" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
+        <Item :model="stolb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
+        <Item :model="verh" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
+    </TresGroup>
 </template>

composables/useCalc.ts

@@ -13,3 +13,4 @@ export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (1000 * 5 - 100) * 0.001)
 export const use_min_length = () => useState('min_length', () => 1000)
 export const use_max_size = () => useState<number>('max_size', () => 13)
+export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)