1. @threlte/core
  2. Canvas

@threlte/core

Canvas

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

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.

Import

Source

Github View Source Code

Package

NPM View Package

Properties

// optional
dpr: number = browser ? window.devicePixelRatio : 1
flat: boolean = false
linear: boolean = false
frameloop: 'always' | 'demand' | 'never' = 'demand'
debugFrameloop: boolean = false
shadows: boolean = true
shadowMapType: THREE.ShadowMapType = THREE.PCFSoftShadowMap
size: { width: number, height: number } | undefined = undefined
rendererParameters: THREE.WebGLRendererParameters | undefined = undefined

Bindings

ctx: ThrelteContext
rootCtx: ThrelteRootContext
TIP

See Context Types for details