mns-mini-zabor/components/model/diagram.vue

44 lines
1.8 KiB
Vue

<script setup lang="ts">
//@ts-ignore
import { useGLTF } from '@tresjs/cientos'
import { getColorHexFromRal } from '../ral';
const explosion_state = use_explosion_state()
const k = 1.5
const targetExplosion = {
kosynka: [0 * k, 0 * k, 0.75 * k],
krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
osnova_stolba: [0 * k, 0 * k, 0 * k],
planki: [0 * k, 0 * k, -0.5 * k],
stolb: [0 * k, 0 * k, 1 * k],
verh: [0 * k, 0.25 * k, 0 * k],
}
const { scene: kosynka } = await useGLTF('/models_exp/kosynka.glb')
const { scene: krepleniye_planok } = await useGLTF('/models_exp/krepleniye_planok.glb')
const { scene: osnova_stolba } = await useGLTF('/models_exp/osnova_stolba.glb')
const { scene: planki } = await useGLTF('/models_exp/planki.glb')
const { scene: stolb } = await useGLTF('/models_exp/stolb.glb')
const { scene: verh } = await useGLTF('/models_exp/verh.glb')
const lamelle_color = use_lamelle_color()
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>
<Suspense>
<TresGroup :position-y="-3.5" :scale="2">
<ModelItem :model="kosynka" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
<ModelItem :model="krepleniye_planok"
:target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
<ModelItem :model="osnova_stolba" />
<ModelItem :model="planki" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
<ModelItem :model="stolb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
<ModelItem :model="verh" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
</TresGroup>
</Suspense>
</template>