<template>
    <div :class="['webgl-canvas', { controls }]">
            <TresCanvas
                v-bind="{
                    powerPreference: 'high-performance',
                    alpha: true,
                    clearAlpha: 0,
                }"
                windowSize
            >
                <TresPerspectiveCamera
                    v-if="perspective"
                    :position="[0, 0, 0]"
                    :near="0.001"
                    :far="1000"
                />
                <TresOrthographicCamera
                    v-else
                    :args="[0, 1, 0, 1, 0.001, 5000]"
                    :position="[0, 0, -1000]"
                    :look-at="[0, 0, 0]"
                />

                <!-- Lighting -->
                <TresAmbientLight :intensity="1.2" />

                <TresDirectionalLight
                    :position="[width * -0.25, height * 1.3, width * 0.25]"
                    :intensity="3"
                    cast-shadow
                />

                <TresDirectionalLight
                    :position="[width * 0.8, height * -0.9, width * 0.25]"
                    :intensity="3"
                    cast-shadow
                />

                <OrbitControls v-if="controls" />

                <slot />

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

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

const { controls, perspective } = defineProps({
    controls: Boolean,
    perspective: {
        type: Boolean,
        default: () => false,
    },
})

const { width, height } = useWindowSize()
</script>

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

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

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