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

<script setup lang="ts">
import {
    PCFSoftShadowMap,
    CineonToneMapping,
    Mesh,
    Object3D,
    PMREMGenerator,
} from 'three';
import { GainMapLoader, } from '@monogrid/gainmap-js'
//@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()
renderer.value.toneMapping = CineonToneMapping
renderer.value.toneMappingExposure = 0.5

renderer.value.shadowMap.enabled = true
renderer.value.shadowMap.type = PCFSoftShadowMap

const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
const { scene: model_fence_center } = await useGLTF('/fence_one/center.glb')
const { scene: model_fence_bottom } = await useGLTF('/fence_one/bottom.glb')
const { scene: model_fence_inner } = await useGLTF('/fence_one/inner.glb')
const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok.glb', { draco: true });
const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });

[model_fence_top, model_fence_bottom].map((sc: Object3D) =>
    sc.traverse((child: Object3D) => {
        if (child instanceof Mesh) {
            child.position.z = 0
        }
    })
)

const top = ref(top_model)
const fence = ref(model_fence_center)
const fence_top = ref(model_fence_top)
const fence_bottom = ref(model_fence_bottom)
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)

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)]
        }
    });
})

watch(lamelle_count, () => {
    [fence_inner].map(
        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), 
            {
                pattern: pillar_pattern.value,
                count: lamelle_count.value
            }
        ) });
})
const pmremGenerator = new PMREMGenerator(renderer.value);
pmremGenerator.compileEquirectangularShader();
onMounted(async () => {
    const loader = new GainMapLoader(renderer.value)
    const result = await loader.loadAsync([
        'hdrmaps/hdr.webp',
        'hdrmaps/hdr-gainmap.webp',
        'hdrmaps/hdr.json',
    ])
    if (renderer.value && camera.value) {
        renderer.value.render(scene.value, camera.value)
    }
    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;

    scene.value.environment = newEnvMap
    scene.value.environmentIntensity = 1.5
    result.renderTarget.texture.dispose();
})

</script>
<template>
    <TresGroup name="base">
        <template v-for="line in (total >= 4) ? 4 : 1" :key="`${line}_${count}`">
            <ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" :number="line"
                :count="count" />
        </template>
    </TresGroup>
</template>