<template>
    <div ref="contentRef" class="content"></div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from "vue";
    import { WebGLRenderer } from "@ray-lab/renderer-webgl";

    const contentRef = ref<HTMLDivElement>();
    const canvasEle = document.createElement("canvas");

    onMounted(() => {
        const renderer = new WebGLRenderer({
            canvas: canvasEle,
            container: contentRef.value,
            autoResize: true,
            width: 800,
            height: 600
        });

        if (contentRef.value) {
            contentRef.value.appendChild(canvasEle);
        }

        console.log(renderer);
    })
</script>

<style>

    html, body {
        margin: 0;
    }

    div.content {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>