Frontory

Open code, practice, and notes →

Download source with English comments · for reading

React Three Fiber · 07 useFrame and Time-based Rotation

Series contents · Technology map

Stage: Declarative Scenes and Frame Coordinates · Editable example · Storage ID: react-three-fiber-step-07

Goals and learning outcomes

Prerequisites

Unit 7 continues using the deliverables and experiment records from Unit 6.

Key concepts and explanations

Frame Callback

useFrame participates in the Canvas render loop. Its subscription is removed when the component is removed, so avoid adding a separate overlapping RAF loop.

delta

delta is the time since the previous frame. Multiplying speed by delta reduces differences in rotation speed caused by frame count.

Practice setup

First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Use JSX in a separate React Vite project. Record compatible major versions of React and @react-three/fiber, the Three.js version, and the lockfile. This course uses stable WebGL-based APIs and does not mix in alpha WebGPU APIs. Handle frame updates with useFrame and ref.

The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.

Practice tasks

  1. Update the ref rotation with useFrame((_state,delta) => ...) in src/RotatingBox.jsx.
  2. Pass speed prop values of 0, 1, and 2, and do not use React setState inside the frame.
  3. Record accumulated delta and rotation over 5-second intervals.

Variables to observe

VariableBaselineChangeExpected change / hypothesis
speed1 rad/s2 rad/sRotation doubles for the same accumulated delta.

Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.

Completion criteria

Self-check

  1. What device differences arise if you add 0.01 every frame?
  2. How does limiting a large delta after returning to a tab change its meaning?

Official references

Linked example and execution scope

Example source · Runtime environments and limits

This is an actual React Three Fiber Canvas experiment. A browser with WebGL support is required.

Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.

Next learning

Previous: Reading Three.js Objects through ref · Next: useThree Scope and Selection

Open code, practice, and notes →