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.

Install to Claude Code

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