The turning cube, as JSX
The first line is R3F's own clock warning (explained above). The scene holds one object: the Cube component's mesh.
R3F writes the same three.js objects as JSX and keeps them in step with React state. It does not wrap or hide three.js: every tag is a real three.js class, and the version rule is fiber 9 with React 19.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the JSX for a mesh named wheel at x = 0.58, y = 0.35: a TorusGeometry with radius 0.33 and tube 0.022, in dark grey #22262c rubber with roughness 0.9.
Install the packages for an R3F project with exact versions, and say which two version numbers must go together.
Explain it without notes
What does <mesh><boxGeometry args={[1, 1, 1]} /></mesh> create, and how do the two tags find each other?
A teammate says R3F will make the 3D scene slow because it adds a layer. What is true and what is not?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
objects in the scene: 1 | Mesh cube