<template>
    <div class="webgl-canvas">
        <TresCanvas
            v-bind="{
                powerPreference: 'high-performance',
                alpha: true,
                ...options,
            }"
        >
            <!-- <TresOrthographicCamera
                :args="[0, 1, 0, 1, 0.001, 5000]"
                :position="[0, 0, -1000]"
                :look-at="[0, 0, 0]"
            /> -->
            <TresOrthographicCamera
                :args="[1 / -2, 1 / 2, 1 / 2, 1 / -2, 0.001, 5000]"
                :position="[0, 0, 1000]"
            />

            <TresAmbientLight />
            <TresPointLight />

            <OrbitControls v-if="controls" />

            <slot />
        </TresCanvas>
    </div>
</template>

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

const { controls, perspective } = defineProps({
    options: Object,
    controls: Boolean
})
</script>

<style lang="scss">
.webgl-canvas {
    position: absolute;
    inset: 0;

    &:not(.controls) {
        pointer-events: none;

        .sticky canvas {
            pointer-events: none !important;
        }
    }
}
</style>
