threlte logo
@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 frameloop is set to demand (default) property changes to components and other changes that are picked up by Threlte automatically invalidate the current frame. If frameloop is set to always the frameloop always renders. If frameloop is set to never the frameloop must manually be advanced with useThrelte().advance(). This is especially useful if you want to debug the frameloop with debugFrameloop set to true.

Component Signature

Props

name
type
required
default
description

colorManagementEnabled
boolean
no
true

colorSpace
THREE.ColorSpace
no
'srgb'

debugFrameloop
boolean
no
false

dpr
number
no
window.devicePixelRatio

frameloop
"always" | "demand" | "never"
no
"demand"

rendererParameters
THREE.WebGLRendererParameters
no

shadows
boolean | THREE.ShadowMapType
no
THREE.PCFSoftShadowMap

size
{ width: number, height: number }
no
If not provided, the dimensions of the parent element will be used.

toneMapping
THREE.ToneMapping
no
THREE.ACESFilmicToneMapping
renderer.toneMapping

useLegacyLights
boolean
no
true
Whether to use legacy lighting mode or physically correct lighting mode. Physically correct lighting mode is more physically accurate, but legacy lighting mode may be more intuitive.

Bindings

name
type

ctx
ThrelteContext