useFrame

Import

import { useFrame } from '@react-three/fiber'

Video Lecture

Section	Video Links
useFrame Hook

Description

The useFrame hook is a React Three Fiber hook, and is useful if you want to execute code before every rendered frame.

In this example we will transform the mesh's rotation.

When React calls our useFrame hook, it gives us a state object of the Three.js scene, and a clock delta indicating how many milliseconds since the last time the delta was set. The delta time shows the milliseconds between renders and can be used to change an object over time at a consistent speed independent of the clients frame rate.

E.g., you could move an object at a speed of 10 units per second.

ref.current.position.x += 10 * delta

The useFrame hook will be invoked after the JSX is converted into Three.js objects and just before the current frame is rendered to the canvas.

The useFrame hook is invoked continually and will try to match the display refresh rate used by the browser. This will generally be about 60 times per second in most browsers on a desktop, but you may see 30, 90 or 120 FPS depending on the hardware.

`./src/Box.jsx`

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

export default function Box(props) {
  const ref = useRef()

  useFrame((_, delta) => {
    ref.current.rotation.x += 1 * delta
    ref.current.rotation.y += 0.5 * delta
  })

  return (
    <mesh {...props} ref={ref}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

Useful Links


useFrame	docs.pmnd.rs	codesandbox.io
THREE.Clock	threejs.org
THREE.Object3D	threejs.org	sbcode.net

Working Example

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout useFrame
npm install
npm start

	Zabbix
	Grafana
	Prometheus
	React Three Fiber
	Threejs and TypeScript
	SocketIO and TypeScript
	Blender Topological Earth
	Sweet Home 3D
	Design Patterns Python
	Design Patterns TypeScript

	Course Coupon Codes

Three.js and TypeScript
		Kindle Edition $6.99 $9.99 Paperback $22.99 $29.99
Design Patterns in TypeScript
		Kindle Edition $6.99 $9.99 Paperback $11.99 $19.99
Design Patterns in Python
		Kindle Edition $6.99 $9.99 Paperback $11.99 $19.99