R3f Fundamentals

This covers the foundational React Three Fiber concepts you'll reach for constantly: setting up the Canvas with camera and renderer options, using useFrame for animations and useThree for accessing scene state, and writing Three.js objects as JSX elements. The examples show practical patterns like selective state subscription to avoid unnecessary re-renders, frame priority control, and the args prop for geometry parameters. What's useful here is seeing how R3F bridges the imperative Three.js world with React's declarative model. If you're building anything in R3F, you'll use these primitives in every scene, so having quick reference for Canvas props, the state object shape, and attach syntax saves you from digging through docs mid-flow.

skills.sh installs: 2.3K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber fundamentals

Choose the right baseline

Inspect the project's manifest and lockfile before selecting APIs. These examples target Fiber 9 / React 19; Fiber 8 pairs with React 18. Do not upgrade a project just to match a recipe.
Check installed Three.js and Drei versions too. Use released documentation matching those versions; if unavailable, state the uncertainty instead of inventing props.
Keep the existing renderer unless the task calls for changing it. For WebGPU, read renderer selection; Fiber 10 alpha APIs are not Fiber 9 APIs.

Minimal scene

This example owns its Canvas. Its parent must have a nonzero height.

import { useRef } from 'react'
import { Canvas, useFrame, type ThreeElements } from '@react-three/fiber'
import type { Mesh } from 'three'

function RotatingBox(props: ThreeElements['mesh']) {
  const mesh = useRef<Mesh>(null)
  useFrame((_, delta) => {
    if (mesh.current) mesh.current.rotation.y += delta * 0.5
  })
  return (
    <mesh {...props} ref={mesh}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="coral" />
    </mesh>
  )
}

SKILL.md on GitHub