Typorithm · medium

react-three-fiber Canvas

r3f-canvasreactr3fcanvasdeclarative

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn react-three-fiber Canvas

Three.js & R3F

react-three-fiber renders Three.js declaratively as JSX. <Canvas> sets up the scene, camera, renderer, and render loop for you; lowercase tags map to Three.js classes; nested geometry and material become the mesh's children — far less boilerplate than the imperative API.

react-three-fiber (R3F) is a React renderer for Three.js. Instead of constructing objects imperatively, you write JSX and R3F builds the equivalent scene graph.

<Canvas> is the root: it creates the scene, a default camera, a WebGLRenderer, and a render loop, so you do not wire those up by hand. Everything inside is your 3D content.

Lowercase tags map to Three.js classes — mesh to THREE.Mesh, boxGeometry to THREE.BoxGeometry. Nested geometry and material attach as the mesh's children, and Three.js props like color pass straight through.

<Canvas> sets up scene, camera, renderer, and loop.

Lowercase tags map to Three.js classes.

Nested geometry/material attach to the parent mesh.

import { Canvas } from "@react-three/fiber";

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  );
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Import Canvas

Canvas is the root component react-three-fiber renders Three.js into.

import { Canvas } from "@react-three/fiber";

2. The Canvas

<Canvas> sets up the scene, camera, renderer, and render loop automatically.

<Canvas>

3. Lowercase mesh

Lowercase JSX tags map to Three.js classes — mesh becomes a THREE.Mesh.

<mesh>

4. Child geometry

A nested geometry tag becomes the mesh's geometry — children attach to the parent.

<boxGeometry />

5. Child material

The material tag attaches to the mesh and takes Three.js props like color directly.

<meshStandardMaterial color="orange" />

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.