Core Hooks

useFrame

This hook allows you to execute code on every frame inside the unified frameloop.
You receive the state (the same as useThrelte) and a clock delta in seconds.
Your callback function will be invoked just before a frame is rendered. When the component unmounts it is unsubscribed automatically from the frame loop.

You may pass additional options to this hook. The property order is useful if you need to order the sequence of useFrame callbacks across the component tree where callbacks are ordered from low to high. To debug your frameloop, provide a debugFrameloopMessage and add debugFrameloop to your <Canvas> component.

type ThrelteUseFrameOptions = {
  autostart?: boolean
  order?: number
  debugFrameloopMessage?: string
}

useFrame returns an object containing functions start and stop to control the execution of the callback and a store started to subscribe to its state.

Import

Source

View Source Code

INFO

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

Show code

Wrapper.svelte

<script lang="ts">
  import { Canvas } from 'threlte'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <Scene />
</Canvas>

Scene.svelte

<script lang="ts">
  import { BoxBufferGeometry, MeshStandardMaterial } from 'three'
  import { DirectionalLight, Mesh, useFrame } from 'threlte'

  let rotation = 0
  useFrame(() => {
    rotation += 0.01
  })
</script>

<DirectionalLight position={{ y: 10, z: 10 }} />

<Mesh
  rotation={{
    x: rotation,
    y: rotation,
    z: rotation
  }}
  geometry={new BoxBufferGeometry(2, 2, 2)}
  material={new MeshStandardMaterial()}
/>

Example

Starting and stopping the execution of a frameloop handler:

const { start, stop, started } = useFrame(
  () => {
    console.log('rendering…')
  },
  {
    autostart: false
  }
)

const toggleUseFrame = () => {
  if ($started) {
    stop()
  } else {
    start()
  }
}

Accessing the context inside a frameloop handler:

useFrame(({ camera }) => {
  get(camera) // camera is a store, so you have to unwrap it
})

useFrame

# Example

Example