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

const controlsState = reactive({
    position: { x: 0, y: 0, z: 0 },
    enablePan: false,
    enableZoom: false,
    minPolarAngle: degToRad(60),
    maxPolarAngle: degToRad(100),
    // minAzimuthAngle: degToRad(0),
    // maxAzimuthAngle: degToRad(180),
})
const cameraStat = reactive({
    position: [0, 0, 5],
    aspect: 1920 / 600,
    // fov: 40,
})
</script>
<template>
    <div class="calc">
        <ClientOnly fallback-tag="div">
            <template #fallback>
                <div class="fallback">
                    Загрузка 3D модели
                </div>
            </template>
            <Loader />
            <TresCanvas clear-color="#e2e8f0">
                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                <OrbitControls v-bind="controlsState" make-default />
                <Suspense>
                    <ModelSmoothCamera />
                </Suspense>
                <Suspense>
                    <ModelEnv />
                </Suspense>
                <TresGroup>
                    <Suspense>
                        <ModelParametric />
                    </Suspense>
                </TresGroup>
            </TresCanvas>
        </ClientOnly>
    </div>
</template>