Core Hooks
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()
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()