@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>
clock, // Clock
camera, // CurrentWritable<THREE.Camera>
scene, // THREE.Scene
renderer, // THREE.WebGLRenderer
invalidate, // (debugFrameloopMessage?: string) => void
advance, // () => void
colorSpace, // CurrentWritable<THREE.ColorSpace>
toneMapping, // CurrentWritable<THREE.ToneMapping>
dpr, // CurrentWritable<number>
shadows, // CurrentWritable<boolean | THREE.ShadowMapType>
colorManagementEnabled, // CurrentWritable<boolean>
useLegacyLights, // CurrentWritable<boolean>
frameloop // CurrentWritable<'always' | 'demand' | 'never'>
} = 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()The property can be changed at any time, but it will only take effect on the next frame.