@threlte/core

<Canvas>

The <Canvas> component is the root of your Threlte scene. It provides contexts that all other components and many hooks are depending on. This means they need to be child components to the <Canvas> component.

Structuring Your App

Check out our guide on structuring your app for a fail-safe app architecture recipe.

By default, the <canvas> element and the renderer will resize to fit the parent element whenever the window resizes. Provide the property size to set a fixed <canvas> size.

<Canvas> also provides a default camera, located at { z: 5 }.

If renderMode is set to on-demand (default) property changes to components and other changes that are picked up by Threlte automatically invalidate the current frame.
If renderMode is set to always a re-render is automatically scheduled every frame.
If renderMode is set to manual a re-render must manually be triggered with useThrelte().advance().

Component Signature

Props

name
type
required
default
description
autoRender
boolean
no
true
Whether to automatically render the scene every frame. Set to `false` to implement custom render pipelines.
colorManagementEnabled
boolean
no
true
colorSpace
THREE.ColorSpace
no
srgb
createRenderer
(canvas: HTMLCanvasElement) => THREE.Renderer
no
To set up a custom renderer, pass a function that returns a new renderer instance.
dpr
number
no
window.devicePixelRatio
renderMode
'always' | 'on-demand' | 'manual'
no
'on-demand'
shadows
boolean | THREE.ShadowMapType
no
THREE.PCFSoftShadowMap
toneMapping
THREE.ToneMapping
no
THREE.ACESFilmicToneMapping
renderer.toneMapping

Bindings

name
type
ctx
ThrelteContext
Previous Page Components
Next Page <T>