Renderer ​

The Renderer component is the main component of Tres. It's the one that creates the ThreeJS WebGLRenderer and define your Tres Scene.

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

Canvas size ​

The Renderer 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 app size.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#app {
  height: 100%;
  width: 100%;
  background-color: #000;
}

Presets ​

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

Realistic ​

The realistic preset makes 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,
renderer.shadowMap.enabled: true,
renderer.shadowMap.type: PCFSoftShadowMap

Props ​

Defaults ​

Tres tries to be as less opinionated as possible. That's why it doesn't set almost any default value for the Renderer component. You need to set the props you want to use. The only exception is the antialias prop. It's set to true by default.