38 lines
888 B
Vue
38 lines
888 B
Vue
<template>
|
|
<div ref="contentRef" class="content"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from "vue";
|
|
import { WebGLCanvas, EventEmitter } from "@ray-lab/renderer-webgl";
|
|
|
|
const contentRef = ref<HTMLDivElement>();
|
|
const canvasEle = document.createElement("canvas");
|
|
|
|
onMounted(() => {
|
|
const c = new WebGLCanvas({
|
|
canvas: canvasEle,
|
|
container: contentRef.value,
|
|
autoResize: true,
|
|
width: 800,
|
|
height: 600
|
|
});
|
|
// c.on("resize", () => { console.log(c.canvas.width, c.canvas.height) });
|
|
if (contentRef.value) {
|
|
contentRef.value.appendChild(canvasEle);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
|
|
div.content {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |