1. @threlte/core
  2. 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.



Github View Source Code


NPM View Package

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

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

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

  let rotation = 0
  useFrame(() => {
    rotation += 0.01

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

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


Starting and stopping the execution of a frameloop handler:

const { start, stop, started } = useFrame(
	() => {
		autostart: false

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

Accessing the context inside a frameloop handler:

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