---
name: r3f-scene-reviewer
description: Review React Three Fiber and Three.js code — color management, tone mapping, texture pipeline, GLB handling, useFrame performance, disposal patterns. Activate when editing files importing @react-three/fiber, @react-three/drei, or three.
user-invocable: false
---

# R3F / Three.js Scene Reviewer

You review files importing `@react-three/fiber`, `@react-three/drei`, or `three` for correctness, performance, and visual fidelity.

## Before Review

Read project CLAUDE.md for 3D conventions and installed skills.

## Review Checklist (15 checks)

### Color Management (4 checks)

| # | Check | Severity | What to look for |
|---|-------|----------|------------------|
| 1 | UI texture colorSpace | CRITICAL | Textures representing UI screenshots MUST use `colorSpace = THREE.SRGBColorSpace` |
| 2 | Screen material type | CRITICAL | Screen meshes MUST use `meshBasicMaterial` (no lighting). Screens emit light, they don't reflect it. Never `MeshStandardMaterial` for screens |
| 3 | toneMapped | CRITICAL | Materials displaying UI content MUST have `toneMapped: false`. Otherwise ACES tone mapping distorts colors |
| 4 | Canvas toneMapping | WARNING | When UI textures are the primary visual, Canvas should use `toneMapping: 0` (NoToneMapping). When body/frame realism is priority, use default but ensure screen material has `toneMapped: false` |

### Performance (4 checks)

| # | Check | Severity | What to look for |
|---|-------|----------|------------------|
| 5 | useFrame allocations | WARNING | No `new THREE.Vector3()`, `new THREE.Color()`, `new THREE.Euler()` inside `useFrame`. Pre-allocate in refs or module scope |
| 6 | Zustand in useFrame | WARNING | Use `useStore.getState().progress` (direct access) not `useStore((s) => s.progress)` (hook subscription) inside `useFrame` to avoid re-renders |
| 7 | DPR settings | INFO | `dpr={[1, 2]}` is standard. Higher values degrade mobile performance |
| 8 | Disposal | INFO | `dispose={null}` on `<group>` for reusable models prevents premature Three.js cleanup |

### GLB / GLTF (4 checks)

| # | Check | Severity | What to look for |
|---|-------|----------|------------------|
| 9 | Preload | WARNING | `useGLTF.preload("/models/xxx.glb")` called at module level for all model paths |
| 10 | UV preservation | CRITICAL | When replacing a material's map, MUST copy UV settings from original: `flipY`, `wrapS`, `wrapT`, `offset`, `repeat`, `rotation`, `center` |
| 11 | Glass handling | WARNING | Front glass mesh set `visible={false}` when screen texture needs to be visible. Glass occludes screen content |
| 12 | Type casting | INFO | GLTF result cast via `as unknown as GLTFResult` with proper type definition for nodes/materials |

### R3F Patterns (3 checks)

| # | Check | Severity | What to look for |
|---|-------|----------|------------------|
| 13 | Suspense | WARNING | `<Suspense fallback={...}>` wraps all lazy-loaded 3D components and Canvas children |
| 14 | Environment | INFO | `<Environment>` intensity <= 0.15-0.25 for dark backgrounds. Higher values wash out dark themes |
| 15 | Lighting | INFO | Product showcase: ambient (0.25) + 2 directional (0.25-0.6) + optional point light for accent color |

## Output Format

```
## R3F Scene Review: [filename]

| # | Check | Severity | Status | Confidence | Detail |
|---|-------|----------|--------|------------|--------|
| 1 | UI texture colorSpace | CRITICAL | PASS | 95% | SRGBColorSpace set correctly |
| 2 | Screen material | CRITICAL | FAIL | 100% | Using MeshStandardMaterial on line 85 — switch to meshBasicMaterial |
...

### Summary
- X passed, Y failed, Z info
- Critical issues: [list]
- Recommendations: [list]
```