@threlte/core
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 {
size, // Readable<Size>
camera, // CurrentWritable<Camera>
scene, // Scene
dpr, // CurrentWritable<number>
useLegacyLights, // CurrentWritable<boolean>
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.