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

const controlsState = reactive({
    minDistance: 1,
    maxDistance: 5,
    enablePan: false,
    maxPolarAngle: (Math.PI / 2) - 0.2,
})
</script>
<template>
    <div class="container min-w-full">
        <TresCanvas shadows>
            <TresPerspectiveCamera :position="[7, 2, 6]" />
            <OrbitControls v-bind="controlsState" make-default />
            <ModelParametric />
            <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="10" cast-shadow />
            <TresDirectionalLight :position="[-2, 2, -2]" color="#f6f6f6" :intensity="10" cast-shadow />
            <TresAmbientLight :intensity="20" />
        </TresCanvas>
    </div>
</template>

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