<TresCanvas />

Component Overview

<TresCanvas /> creates the necessary Three.js environment and bridges the gap between Vue's reactivity system and Three.js's imperative rendering approach. It is responsible for:

• Creating and configuring the WebGL canvas element
• Setting up the Three.js scene, camera, and renderer
• Establishing the render loop
• Providing the shared context to all child components
• Handling user events through a comprehensive event system
• Managing memory and disposal of Three.js objects

Usage

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

<template>
  <TresCanvas shadows>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <!-- Your scene content here -->
  </TresCanvas>
</template>

Canvas Size

The <TresCanvas /> component offers flexible sizing options to fit different layout requirements. Understanding how canvas sizing works is crucial for creating responsive 3D experiences.

Default Behavior: Parent Element Size

By default, <TresCanvas /> automatically adapts to its parent element's dimensions. This is the most common and recommended approach as it integrates seamlessly with your existing CSS layout.

<template>
  <div class="w-full aspect-video">
    <!-- Canvas automatically fills the container -->
    <TresCanvas>
      <TresPerspectiveCamera :position="[3, 3, 3]" />
      <!-- Your 3D scene here -->
    </TresCanvas>
  </div>
</template>

Full Window Size

For immersive full-screen 3D experiences, use the window-size prop to make the canvas fill the entire browser viewport:

<template>
  <!-- Canvas automatically fills the entire window -->
  <TresCanvas window-size>
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <!-- Your 3D scene here -->
  </TresCanvas>
</template>

API

Props

Events

Exposed Properties