# threejs-react-three-fiber

Скилл для тех, кто пишет three.js-сцены компонентами React. Подсказывает, как устроены Canvas, хуки и события указателя в React Three Fiber.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 установок · ★ 3745
- Автор: CloudAI-X
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-react-three-fiber/SKILL.md
- Обновлён: 2026-10-19
- HTML: https://affpapa.org/nevibecode/skills/threejs-react-three-fiber

## Что делает

Скилл описывает сборку сцен three.js из React через `@react-three/fiber` и `@react-three/drei`. Ориентир — three.js r186, `@react-three/fiber` 9.8 с React 19 и `@react-three/drei` 10.7. Примеры идут на `WebGLRenderer`, а раздел про WebGPU и TSL — на `WebGPURenderer`.

Внутри разобраны пропсы `Canvas`: `camera`, `dpr`, `shadows`, `frameloop`, `gl`, `events`, `onCreated`. Отдельно — сцена как JSX: строчные теги вроде `<mesh>` превращаются в классы three, `args` задаёт аргументы конструктора, а смена `args` пересобирает объект заново. Есть хуки: `useFrame` для цикла рендера, `useThree` для чтения состояния Canvas, работа с `extend` для классов вне пространства имён three и оговорка про коллизии тегов `line`, `audio`, `source`, `path` в TypeScript.

Canvas заполняет родительский элемент, поэтому высоту родителю придётся задать самому — иначе сцена схлопнется в ноль. Тонкость с тенями: `true`, `'soft'` и значение по умолчанию `false` ставят PCFSoftShadowMap, который three меняет на PCFShadowMap с предупреждением в консоли; `'percentage'` даёт тот же мягкий фильтр без предупреждения. Ещё один момент: в отличие от чистого three.js, tone mapping здесь включён по умолчанию — ACESFilmicToneMapping, отключается пропом `flat`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/threejs-react-three-fiber/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/threejs-react-three-fiber/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/threejs-react-three-fiber/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/threejs-react-three-fiber/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install CloudAI-X/threejs-skills threejs-react-three-fiber
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/threejs-react-three-fiber/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/CloudAI-X/threejs-skills --path skills/threejs-react-three-fiber
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/threejs-react-three-fiber/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-react-three-fiber/SKILL.md

## Когда брать
- собрать three.js-сцену компонентами React вместо императивного кода
- настроить камеру, теней и pixel ratio через пропсы Canvas
- анимировать объекты в кадровом цикле через useFrame
- пробросить указатель и клики в 3D-объекты
- подключить класс three из addons через extend

## Примеры запросов агенту
- Собери сцену с вращающимся кубом на React Three Fiber и OrbitControls
- Почему у меня не работает тень на меше в Canvas?
- Перепиши этот three.js-код на компоненты @react-three/fiber

## Похожие
- [react-three-fiber-game](https://affpapa.org/nevibecode/skills/react-three-fiber-game.md) — скилл · 39 установок
- [r3f-interaction](https://affpapa.org/nevibecode/skills/r3f-interaction.md) — скилл · 3300 установок
- [three-best-practices](https://affpapa.org/nevibecode/skills/three-best-practices.md) — скилл · 1500 установок
- [threejs-animation](https://affpapa.org/nevibecode/skills/iart-ai-threejs-animation.md) — скилл · 1400 установок
- [improve-threejs](https://affpapa.org/nevibecode/skills/improve-threejs.md) — скилл · 316 установок

Из того же набора: [cloudai-x/threejs-skills](https://affpapa.org/nevibecode/by/cloudai-x/threejs-skills.md) — 13 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md