TresCanvas ​

The TresCanvas component is the main component of Tres. It's the one that creates the ThreeJS WebGLRenderer .

<template>
  <TresCanvas shadows :output-encoding="SRGBColorSpace">
    <TresPerspectiveCamera />
      <!-- Your scene goes here -->
  </TresCanvas>
</template>

Canvas size ​

The TresCanvas component will use the parent element size as the canvas size. If you want to use the window size as the canvas size, you can set the window-size prop to true .

<template>
  <TresCanvas window-size>
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

Or you can use CSS to set your canvas size.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
#canvas {
  height: 100%;
  width: 100%;
}

Presets ​

Tres comes with a few presets for the TresCanvas component. You can use them by setting the preset prop.

Realistic ​

The realistic preset makes it easy to setup the renderer for more realistic 3D scenes.

<template>
  <TresCanvas preset="realistic">
    <!-- Your scene goes here -->
  </TresCanvas>
</template>

It's equivalent to:

renderer.shadows = true
renderer.physicallyCorrectLights = true
renderer.outputColorSpace = SRGBColorSpace
renderer.toneMapping = ACESFilmicToneMapping
renderer.toneMappingExposure = 3