useThrelte

This hook lets you consume the main Threlte context (ThrelteContext) of your application (scoped to the root <Canvas>) which contains the renderer, camera, scene and other properties.

Use this hook to manually invalidate the current frame …

const { invalidate } = useThrelte()
invalidate()

… access the renderer or the currently active camera …

const { renderer, camera } = useThrelte()
console.log(renderer, $camera)

… or update render properties:

const { toneMapping } = useThrelte()
toneMapping.set(THREE.LinearToneMapping)

Usage

This hook relies on context passed down by the <Canvas> component and can only be used in a child of that component.

const {
  dom, // HTMLElement
  size, // Readable<DOMRect>
  canvas, // HTMLCanvasElement
  camera, // CurrentWritable<Camera>
  scene, // Scene
  dpr, // CurrentWritable<number>
  renderer, // WebGLRenderer
  renderMode, // CurrentWritable<'always' | 'on-demand' | 'manual'>
  autoRender, // CurrentWritable<boolean>
  invalidate, // () => void
  advance, // () => void
  scheduler, // Scheduler
  mainStage, // Stage
  renderStage, // Stage
  autoRenderTask, // Task
  shouldRender, // () => boolean
  colorManagementEnabled, // CurrentWritable<boolean>
  colorSpace, // CurrentWritable<ColorSpace>
  toneMapping, // CurrentWritable<ToneMapping>
  shadows // CurrentWritable<boolean | ShadowMapType>
} = useThrelte()

renderMode

If the renderMode is set to 'on-demand' and you are manually editing objects or materials, be sure to invalidate the current frame to request a rerender:

const { invalidate } = useThrelte()

invalidate()

If the renderMode is set to 'manual' you must manually trigger a re-render:

const { advance } = useThrelte()

advance()

The property can be changed at any time, but it will only take effect on the next frame.