Skip to content


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

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

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.

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

Or you can use CSS to set your canvas size.

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


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


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

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

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


alphaControls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1.false
antialiasWhether to perform antialiasing.true
cameraA manual camera to be used by the renderer.
clearColorThe color the renderer will use to clear the canvas.#000000
contextThis can be used to attach the renderer to an existing RenderingContext
depthWhether the drawing buffer has a depth buffer of at least 16 bits.true
disableRenderDisable render on requestAnimationFrame, usefull for PostProcessingfalse
failIfMajorPerformanceCaveatWhether the renderer creation will fail upon low performance is detected. See WebGL spec for details.false
logarithmicDepthBufferWhether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance.false
outputColorSpaceDefines the output encodingLinearEncoding
powerPreferenceProvides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default".default
precisionShader precision. Can be "highp", "mediump" or "lowp"."highp" if supported by the device
premultipliedAlphaWhether the renderer will assume that colors have premultiplied alpha.true
preserveDrawingBufferWhether to preserve the buffers until manually cleared or overwritten..false
shadowsEnable shadows in the rendererfalse
shadowMapTypeSet the shadow map typePCFSoftShadowMap
stencilWhether the drawing buffer has a stencil buffer of at least 8 bits.true
toneMappingDefines the tone mapping exposure used by the renderer.NoToneMapping
toneMappingExposureExposure level of tone mapping.1
useLegacyLightsWhether to use the legacy lighting mode or nottrue
windowSizeWhether to use the window size as the canvas size or the parent element.false


Tres tries to be as little opinionated as possible. That's why it doesn't set almost any default value for the TresCanvas component. It uses the defaults from three.js. The only exception is the antialias prop. It's set to true by default.

Exposed public properties

contextsee useTresContext