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

const controlsState = reactive({
    minDistance: 1,
    maxDistance: 10,
    enablePan: false,
    // enableZoom: false,
    maxPolarAngle: (Math.PI / 2) - 0.2,
})
const container = ref()
const koef = ref()
const scrollBlock = (e: Event) => {
    const { top, bottom, height } = container.value.getBoundingClientRect();
    const { innerHeight } = window;
    const partiallyVisible = (top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)
    const visibleHeight = innerHeight - top
    const h = height * 1.5
    if (partiallyVisible && visibleHeight < h) {
        koef.value = visibleHeight / h
    }
}
</script>
<template>
    <div class="container min-w-full" ref="container">
        <TresCanvas shadows>
            <TresPerspectiveCamera :position="[-7, 2, 4]" />
            <OrbitControls v-bind="controlsState" make-default />
            <Suspense>
                <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" />
            </Suspense>
            <ModelDiagram />

            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
            <TresAmbientLight />
        </TresCanvas>
    </div>
</template>

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