1. @threlte/core
  2. useThrelte

@threlte/core

useThrelte

This hook lets you consume the main context of the <Canvas> component which contains the renderer, camera, scene and other properties.

Use this hook to manually invalidate the current frame …

const { invalidate } = useThrelte()
invalidate()

… access the current pointer coordinates …

const { pointer } = useThrelte()
console.log($pointer)

… or use the currently active camera:

const { camera } = useThrelte()
$camera.updateProjectionMatrix()

Import

Source

Github View Source Code

Package

NPM View Package
INFO

This hook needs context. Use only in a child component to <Canvas>.


Types

const {
	size, // Readable<Size>
	pointer, // Writable<Vector2>
	pointerOverCanvas, // Writable<boolean>
	clock, // Clock
	camera, // Writable<Camera>
	scene, // Scene
	renderer, // WebGLRenderer
	composer, // EffectComposer
	invalidate, // (debugFrameloopMessage?: string) => void
	advance // () => void
} = useThrelte()

Frameloop

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

const { invalidate } = useThrelte()

invalidate()

// Optionally provide a debugFrameloopMessage to debug the frame loop
invalidate('changed material color')

If the frameloop is set to 'never' you must manually advance the frameloop to request a new render:

const { advance } = useThrelte()

advance()