<TresCanvasContext />

Component Overview

<TresCanvasContext /> is the internal component that powers <TresCanvas />. It mounts the TresJS renderer and scene using a provided canvas element instead of creating one for you.

When to Use It

Use <TresCanvasContext /> only if you already own the WebGL canvas (or must integrate with a host framework that provides one) and you still want TresJS to manage the Three.js scene, render loop, and events.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { TresCanvasContext } from '@tresjs/core'

const canvasRef = ref<HTMLCanvasElement>()
</script>

<template>
  <canvas ref="canvasRef" class="w-full h-full">
    <TresCanvasContext v-if="canvasRef" :canvas="canvasRef">
      <TresPerspectiveCamera :position="[3, 3, 3]" />
      <!-- Your scene content here -->
    </TresCanvasContext>
  </canvas>
</template>

Notes

• You must pass a valid canvas element.
• Canvas sizing and styling are your responsibility.
• Props and events match <TresCanvas />, so you can reuse the same API surface.