<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Stats, OrbitControls } from '@tresjs/cientos'
import { degToRad } from 'three/src/math/MathUtils.js';

const section_count = use_section_count()
const extra_section = use_extra_section()

const controlsState = reactive({
    distance: section_count.value,
    minDistance: 10,
    maxDistance: 10,
    position: { x: 0, y: 0, z: 0 },
    enablePan: false,
    enableZoom: false,
    minPolarAngle: degToRad(60),
    maxPolarAngle: degToRad(60),
})
const cameraStat = reactive({
    aspect: 1920 / 600,
    // fov: 40,
})

const camera = ref("camera")

watch([section_count, extra_section], () => {
    let v = (section_count.value + ~~(!!extra_section.value));
    if (v <= 10) v = 10
    controlsState.minDistance = v;
    controlsState.maxDistance = v;
    (camera.value as any).position.normalize().multiplyScalar(v)
})
</script>
<template>
    <div class="container min-w-full siteblock_calc-canvas">
        <ClientOnly fallback-tag="div">
            <template #fallback>
                <div class="fallback">
                    Загрузка 3D модели
                </div>
            </template>
            <Loader />
            <Stats />
            <TresCanvas clear-color="#ccc">
                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                <OrbitControls v-bind="controlsState" make-default />
                <TresGroup>
                    <Suspense>
                        <ModelParametric />
                    </Suspense>
                </TresGroup>

                <TresAmbientLight intensity="10" />
            </TresCanvas>
        </ClientOnly>
    </div>
</template>