React Three Fiber

Overview

React Three Fiber (R3F) is a React renderer for Three.js that brings declarative, component-based 3D development to React applications. Instead of imperatively creating and managing Three.js objects, you build 3D scenes using JSX components that map directly to Three.js objects.

Current versions: @react-three/fiber v9 (9.6.1) requires React 19 and three.js 0.156+; @react-three/drei v10 (10.7.7) requires React 19 and three.js 0.159+. This skill targets three.js r185 to match the threejs-webgl skill. R3F v8 targeted React 18 and is legacy — use v9 for new projects.

When to Use This Skill:

• Building 3D experiences within React applications
• Creating interactive product configurators or showcases
• Developing 3D portfolios, galleries, or storytelling experiences
• Building games or simulations in React
• Adding 3D elements to existing React projects
• When you need state management and React hooks with 3D graphics
• When working with React frameworks (Next.js, Gatsby, Remix)