# three-js

Правило для Cursor задаёт стандарты разработки на three.js: обработка ошибок WebGL, ленивая загрузка ассетов, оптимизация цикла рендера и освобождение ресурсов.

- правило · `type=rule` · Cursor · ★ 3579
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/three-js.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/three-js

## Что делает

Правило подключается к файлам `**/*.{js,jsx}` и описывает пять блоков практик. Первый — работа с WebGL: проверять `gl.getError()` во время разработки, а в продакшене убрать блокирующие вызовы вроде `getError()` и `getParameter()`, заранее спрашивать поддержку расширений через `gl.getExtension()` и держать запасной путь. Второй — загрузка ассетов: `GLTFLoader` и `TextureLoader` вызываются только тогда, когда модель вот-вот появится в кадре, файлы лежат в `public/`.

Дальше про производительность и память. Для повторяющихся объектов правило советует `InstancedMesh` и общие материалы вместо тысячи отдельных мешей, а текстуры — собирать в атласы. При удалении объекта со сцены нужно вручную вызвать `dispose()` у геометрии, материалов и текстур: сборщик мусора чистит только ссылки в JS, видеопамять он не трогает. Есть отдельная функция-пример `disposeObject`, которая обходит материал-массив и снимает объект с родителя.

Последний блок — структура проекта: npm для зависимостей, Vite для сборки, точка входа `main.js` и модульные импорты из `three/addons/`. Файл кладётся в `.cursor/rules/three-js.mdc`. Если в проекте three.js не используется, правило будет только шуметь в подсказках — это повод проверить, стоит ли его вообще подключать.

## Установка

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

**Вручную: положить файлы**
- Файл: `.cursor/rules/three-js.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/three-js.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/three-js.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/three-js.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/three-js.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/three-js.mdc

## Когда брать
- поймать ошибки WebGL, которые иначе проходят молча
- не уронить сцену на железе без нужного расширения
- убрать фризы при загрузке тяжёлых моделей и текстур
- сократить число draw calls на повторяющихся объектах
- освободить видеопамять при удалении объекта со сцены

## Примеры запросов агенту
- добавь InstancedMesh вместо тысячи отдельных мешей в этой сцене
- проверь поддержку расширения перед использованием InstancedMesh
- напиши dispose для этого меша: геометрия, материал, текстура

## Похожие
- [react-three-fiber](https://affpapa.org/nevibecode/skills/react-three-fiber.md) — скилл · 3800 установок
- [three-best-practices](https://affpapa.org/nevibecode/skills/three-best-practices.md) — скилл · 1500 установок
- [webgl-3d-object](https://affpapa.org/nevibecode/skills/webgl-3d-object.md) — скилл · 1600 установок
- [threejs-react-three-fiber](https://affpapa.org/nevibecode/skills/threejs-react-three-fiber.md) — скилл · 1300 установок
- [three-webgl-game](https://affpapa.org/nevibecode/skills/three-webgl-game.md) — скилл · 48 установок
- [threejs-geometry](https://affpapa.org/nevibecode/skills/threejs-geometry.md) — скилл · 14600 установок

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 69 карточек

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

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