<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'

const controlsState = reactive({
    minDistance: 5,
    maxDistance: 15,
    enablePan: false,
    // enableZoom: false,
    maxPolarAngle: (Math.PI / 2) - 0.2,
    // maxZoom: 2,
    // minZoom: 1,
})
const { hasFinishLoading, progress, items } = await useProgress()
</script>
<template>
    <div class="container min-w-full relative">
        <Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
            leave-active-class="opacity-0 transition-opacity duration-200">
            <div v-show="!hasFinishLoading"
                class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
                <div class="w-200px">
                    Идет загрузка... {{ progress }} %
                    <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
                </div>
            </div>
        </Transition>
        <TresCanvas shadows>
            <TresPerspectiveCamera :position="[8, 2, -4]" />
            <OrbitControls v-bind="controlsState" make-default />
            <Suspense>
                <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
            </Suspense>
            <Suspense>
                <ModelParametric />
            </Suspense>
            <TresDirectionalLight :position="[70, 60, 70]" :intensity="10" color="#fdf5ca" cast-shadow />
        </TresCanvas>
    </div>
</template>

<style scoped>
.container {
    height: 600px;
    display: block;
}
</style>