85 lines
3.3 KiB
Vue
85 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { Mesh, Object3D, Vector3 } from 'three';
|
|
//@ts-ignore
|
|
import { OrbitControls, useGLTF, } from '@tresjs/cientos'
|
|
import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
|
|
|
|
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 { scene, controls, camera } = useTresContext()
|
|
const { seek, seekAll } = useSeek()
|
|
|
|
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 });
|
|
|
|
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)
|
|
|
|
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 = () => {
|
|
const f = fence_section.value * 0.5
|
|
const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
|
|
(controls.value as OrbitControlsProps).target = target
|
|
camera.value?.position.set(f, f, f)
|
|
}
|
|
setTarget()
|
|
watch(lamelles_count, setTarget)
|
|
|
|
</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>
|
|
<Suspense>
|
|
<ModelRecolor :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
|
|
</Suspense>
|
|
</template> |