Skip to content

TresCanvas

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

vue
<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.

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

Or you can use CSS to set your canvas size.

css
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.

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

It's equivalent to:

ts
renderer.shadows = true
renderer.physicallyCorrectLights = true
renderer.outputColorSpace = SRGBColorSpace
renderer.toneMapping = ACESFilmicToneMapping
renderer.toneMappingExposure = 3
renderer.shadowMap.enabled = true
renderer.shadowMap.type = PCFSoftShadowMap

Props

PropDescriptionDefault
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
renderModeRender mode, can be always, on-demand or manual. See Performancealways
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.ACESFilmicToneMapping
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
enableProvideBridgeEnables the provide/inject bridge between Vue context and TresCanvas.true

Defaults

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

PropertyDescription
contextsee useTresContext