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

import Canvas from './model/canvas.vue';

const controlsState = reactive({
    minDistance: 0,
    maxDistance: 10,
    // enablePan: false,
    // enebleZoom: false,
    maxPolarAngle: (Math.PI / 2) - 0.02,
    // distance: 3
})
console.log(controlsState)
// const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
// const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
// const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
// console.log({ backLight, primaryLight, secondaryLight })

</script>
<template>
    <div class="container">
        <TresCanvas shadows>
            <TresPerspectiveCamera :position="[-7, 2, 3]" :distance="3" />
            <OrbitControls v-bind="controlsState" make-default />
            <Canvas />
            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
            <TresAmbientLight />
        </TresCanvas>
    </div>
</template>

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