# React Three Fiber

Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js.

- Repository: https://github.com/freshtechbro/claudedesignskills (1210 stars)
- Category: Media
- License: MIT
- Last updated: 2025-11-20
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add freshtechbro/claudedesignskills --skill react-three-fiber -g -a claude-code -y`
Codex: `npx skills add freshtechbro/claudedesignskills --skill react-three-fiber -g -a codex -y`
Cursor: `npx skills add freshtechbro/claudedesignskills --skill react-three-fiber -g -a cursor -y`
Gemini CLI: `npx skills add freshtechbro/claudedesignskills --skill react-three-fiber -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add freshtechbro/claudedesignskills`

## Description

Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visualization, and immersive web experiences.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

**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)

**Key Benefits**:
- **Declarative**: Write 3D scenes like React components
- **React Integration**: Full access to hooks, context, state management
- **Reusability**: Create and share 3D component libraries
- **Performance**: Automatic render optimization and reconciliation
- **Ecosystem**: Works with Drei helpers, Zustand, Framer Motion, etc.
- **TypeScript Support**: Full type safety for Three.js objects

---

## Core Concepts

### 1. Canvas Component

The `<Canvas>` component sets up a Three.js scene, camera, renderer, and render loop.

```jsx
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 5], fov: 75 }}
      gl={{ antialias: true }}
      dpr={[1, 2]}
    >
      {/* 3D content goes here */}
    </Canvas>
  )
}
```

**Canvas Props**:
- `camera` - Camera configuration (position, fov, near, far)
- `gl` - WebGL renderer settings
- `dpr` - Device pixel ratio (default: [1, 2])
- `shadows` - Enable shadow mapping (default: false)
- `frameloop` - "always" (default), "demand", or "never"
- `flat` - Disable color management for simpler colors
- `linear` - Use linear color space instead of sRGB

### 2. Declarative 3D Objects

The rest: https://github.com/freshtechbro/claudedesignskills/blob/HEAD/.claude/skills/react-three-fiber/SKILL.md