# threejs-aaa-graphics-builder

Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3200 установок · ★ 2588
- Автор: majidmanzarpour
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/majidmanzarpour/threejs-game-skills/tree/HEAD/skills/threejs-aaa-graphics-builder/SKILL.md
- Обновлён: 2026-09-28
- HTML: https://affpapa.org/nevibecode/skills/threejs-aaa-graphics-builder

## Что делает

Скилл выстраивает визуальный пайплайн для игр на Three.js. Работа идёт строго по порядку: сначала форма и геометрия объектов, затем материалы и процедурные текстуры, следом освещение с tone mapping и только потом визуальные эффекты. Подход запрещает маскировать простые примитивы свечением. Для проверки прогресса используется таблица из десяти категорий, где каждый пункт должен получить не менее двух баллов.

Внутри заложены четыре справочника: рецепты создания моделей и пропсов, шейдерный сборник, правила технического арта и визуальная шкала оценки. При работе с кастомными шейдерами код обязательно проверяется на совместимость с версией Three.js в проекте: рецепты служат лишь отправной точкой. Пайплайн затрагивает всю видимую сцену, включая препятствия, награды, фон, геометрию трассы и состояние интерфейса.

Если подключена внешняя генерация ассетов через `threejs-image-generator` или `threejs-3d-generator`, потребуется проверить API-ключи скриптом `threejs-game-director/scripts/probe_asset_credentials.sh`. Для чисто процедурной графики ключи не нужны.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-aaa-graphics-builder -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-aaa-graphics-builder -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-aaa-graphics-builder -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install majidmanzarpour/threejs-game-skills threejs-aaa-graphics-builder
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-aaa-graphics-builder -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/majidmanzarpour/threejs-game-skills --path skills/threejs-aaa-graphics-builder
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add majidmanzarpour/threejs-game-skills --skill threejs-aaa-graphics-builder -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/majidmanzarpour/threejs-game-skills/tree/HEAD/skills/threejs-aaa-graphics-builder/SKILL.md

## Когда брать
- убрать эффект сырого прототипа со скриншотов Three.js
- настроить процедурные материалы, декали и текстуры
- выстроить пайплайн освещения и тональной компрессии
- внедрить инстансинг и уровни детализации (LOD) под лимиты рендера
- составить отчёт с оценками по десяти графическим категориям

## Примеры запросов агенту
- Оцени скриншоты текущей сцены на Three.js по визуальной шкале и обнови графику окружения
- Сделай процедурные материалы и настрой освещение с tone mapping для нашей браузерной игры
- Переработай модели препятствий и эффекты в Three.js, ориентируясь на бюджет рендера

## Похожие
- [threejs](https://affpapa.org/nevibecode/skills/threejs.md) — скилл · 3400 установок
- [threejs-landscape](https://affpapa.org/nevibecode/skills/threejs-landscape.md) — скилл · 1200 установок
- [threejs-shaders](https://affpapa.org/nevibecode/skills/threejs-shaders.md) — скилл · 15600 установок
- [threejs-r3f](https://affpapa.org/nevibecode/skills/threejs-r3f.md) — скилл · 1000 установок
- [threejs-geometry](https://affpapa.org/nevibecode/skills/threejs-geometry.md) — скилл · 14600 установок

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

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