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

<script setup lang="ts">
import { Object3D, Vector3 } from 'three';
//@ts-ignore
import { useGLTF, } from '@tresjs/cientos'
import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
import { getModel, allToppers, baseToppers, aristoToppers, type toppersIds } from '../topper';

const section_count = use_section_count()
const extra_section = use_extra_section()
const lamelles_count = use_lamelles_count()
const lamelle_height = use_lamelle_height()
const fence_section = use_fence_section()

const pillar_topper = use_topper()

const open_calc = use_open_calc()
const goto_cam = use_goto_camera()
const goto_target = use_goto_target()

const { scene, controls, camera } = useTresContext()
const { seek, seekAll } = useSeek()

const globalFenceType = useGlobalFenceType()

const topper_models = {
    baseToppers: {} as { [key: toppersIds]: Object3D },
    aristoToppers: {} as { [key: toppersIds]: Object3D },
}
for (const key of Object.keys(allToppers)) {
    let toppers = allToppers[key]
    for await (const element of toppers) {
        const { scene } = await useGLTF(getModel(element.id, key))
        topper_models[key][element.id] = scene
    }
}

const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')
const { scene: model_pillar_brace } = await useGLTF('/models_one/pillar/brace.glb')

const { scene: model_fastening_top } = await useGLTF('/models_one/fastening/top.glb');
const { scene: model_fastening_side } = await useGLTF('/models_one/fastening/side.glb');
const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb');

const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true })
// const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });

const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
const { scene: lamelle_model_aristo } = await useGLTF('/models_one/lamel_100_aristo.glb', { draco: true });

const top = ref(top_model)
const pillar_top = ref()
const pillar_center = ref(model_pillar_center)
const pillar_bottom = ref(model_pillar_bottom)
const pillar_inner = ref(model_pillar_inner)
const pillar_brace = ref(model_pillar_brace)
const fastening_top = ref(model_fastening_top)
const fastening_side = ref(model_fastening_side)
const fixing = ref(model_fixing)
const lamelle = ref(lamelle_model_standart)

const setPillarTopper = () => {
    let key = 'baseToppers'
    if (globalFenceType.value?.type == 'aristo') {
        key = 'aristoToppers'
    }
    pillar_top.value = topper_models[key][pillar_topper.value]
}
setPillarTopper()
watch(pillar_topper, setPillarTopper)

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)

watch(() => [section_count.value, extra_section.value], () => {
    total.value = (section_count.value + ~~(!!extra_section.value))
    size.value = Math.ceil(total.value / 4);
    count.value = (total.value >= 4) ? size.value : total.value;

    const lines_count = (total.value >= 4) ? 4 : 1
    const base = seek(scene.value, 'name', 'base')
    if (base?.children && base.children.length !== lines_count) {
        base.children = [...base?.children.slice(0, lines_count)]
    }

    const lines = seekAll(scene.value, 'name', 'line')
    lines.forEach(line => {
        let n = size.value
        if (lines_count == 1) {
            n = total.value
        }
        if (line.name.endsWith('_4')) {
            n = total.value - size.value * 3
            if (n < 0) {
                n = 0
            }
        }
        const inner = seek(line, 'name', line.name + '_inner');
        if (inner?.children && n < inner?.children.length) {
            inner.children = [...inner?.children.slice(0, n)]
        }
    });
})
const setTarget = (smooth = false) => {
    let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75;
    const max = 2.25
    if (f < max) f = max
    const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
    if (smooth) {
        goto_target.value = target
        goto_cam.value = new Vector3(f, f, f)
    } else {
        (controls.value as OrbitControlsProps).target = target;
        (controls.value as any).update()
        goto_cam.value = new Vector3(f, f, f)
    }
}
watch([lamelles_count, fence_section, lamelle_height], () => {
    setTarget()
    open_calc.value = []
})

watch(open_calc, () => {
    if (Object.keys(open_calc.value).length == 0) {
        setTarget(true)
    }
})
const min_for_square = 12;

setTarget()

const setLamelleType = () => {
    if (globalFenceType.value?.type == 'standart') {
        lamelle.value = lamelle_model_standart
        lamelle_height.value = 0.115
        pillar_topper.value = 0
        setPillarTopper()
    }
    if (globalFenceType.value?.type == 'aristo') {
        lamelle.value = lamelle_model_aristo
        lamelle_height.value = 0.196
        pillar_topper.value = 0
        setPillarTopper()
    }
}
setLamelleType()
watch(() => globalFenceType.value?.id, setLamelleType)
</script>
<template>
    <TresGroup name="base">
        <template v-for="line in (total >= min_for_square) ? 4 : 1"
            :key="`${globalFenceType?.id ?? 5}_${line}_${count}`">
            <ModelLine :models="{
                top,
                pillar_center, pillar_top, pillar_bottom, pillar_inner,
                pillar_brace,
                fastening_top, fastening_side, fixing,
                lamelle
            }" :number="line" :count="count" />
        </template>
    </TresGroup>
</template>