# Threejs R3f

Three.js and React Three Fiber sub-skill - 3D scenes, shaders, postprocessing.

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Media
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill threejs-r3f -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill threejs-r3f -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill threejs-r3f -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill threejs-r3f -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

Three.js and React Three Fiber sub-skill - 3D scenes, shaders, postprocessing.

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

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# Three.js & React Three Fiber

> 3D on the web. Three.js is the engine, R3F is the React renderer.
> Concise rules here. Deep-dive in `references/`.
>
> **Versions:** `three` r187 (`0.187.x`) · `@react-three/fiber` 9.x · `@react-three/drei` 10.x · `@react-three/postprocessing` 3.x.
> **R3F 9 is React 19 only** - its declared peer range is `react` / `react-dom` `>=19 <19.4` (drei 10 asks `^19`). React 18 projects must stay on R3F 8 + drei 9. Check the installed React major before scaffolding.
> **Renderers:** `WebGLRenderer` is still R3F's default. `WebGPURenderer` + TSL is shipped (not flagged) and self-falls-back to WebGL 2, but three's docs call it "the new alternative of `WebGLRenderer`", not the default. Opt in with an async `gl` callback:
> ```tsx
> import * as THREE from 'three/webgpu'
> <Canvas gl={async (props) => { const r = new THREE.WebGPURenderer(props as any); await r.init(); return r }} />
> ```

---

## When to Use What

| Need | Tool | Why |
|---|---|---|
| Full 3D scene (models, lights, physics) | R3F + drei | Declarative, React-friendly, ecosystem |
| Vanilla 3D (no React) | Three.js direct | Lighter, no React overhead |
| Simple 3D transforms on UI | CSS `transform3d` | GPU-composited, no WebGL context |
| 2D particles / generative | Canvas 2D | Simpler API, less GPU overhead |
| Shader-only visuals (no scene graph) | Raw WebGL / ShaderMaterial | Maximum control, minimal abstraction |

---

## Scene Setup Patterns

```tsx
import { Canvas } from '@react-three/fiber'
import { Environment, OrbitControls } from '@react-three/drei'
import { Suspense } from 'react'

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/threejs-r3f/SKILL.md