r3f-geometry — скилл для Claude Code: геометрия React Three Fiber
Помогает собирать геометрию и инстансированные объекты в React Three Fiber, а также разбираться с буферами, линиями и точками. Пригодится для формы объектов и сокращения draw calls.
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a claude-codeЧто делает r3f-geometry
Скилл подсказывает, когда строить фигуры средствами JSX, а когда брать BufferGeometry, буферы точек или инстансирование. Он разбирает различия между Instances, Merged и настоящим объединением геометрии, а также настройки атрибутов, нормалей, UV и границ объектов.
Есть рекомендации по обновлению буферов, лучевым проверкам и очистке ресурсов. Для часто меняющихся наборов объектов предлагается рассмотреть нативное инстансирование: у декларативных инстансов есть накладные расходы React. Перед использованием примеров проверьте установленные версии Three.js, Fiber и Drei — аргументы конструкторов и свойства помощников могут отличаться.
Какие задачи решает
- выбрать способ построения геометрии для формы объекта
- сократить draw calls при множестве повторяющихся объектов
- обновить атрибуты буфера после изменения вершин
- настроить нормали, UV и границы геометрии
- проверить raycast и очистку общих ресурсов
Примеры запросов агенту
- Подскажи, как создать эту форму в React Three Fiber с помощью JSX-геометрии.
- Покажи, как инстансировать повторяющиеся объекты и сократить draw calls.
- Как обновить
BufferGeometryпосле изменения вершин и сохранить корректные границы?
Как установить r3f-geometry
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-geometry/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-geometry/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a codex2Вручную: положить файлы
.agents/skills/r3f-geometry/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a cursor2Вручную: положить файлы
.cursor/skills/r3f-geometry/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-geometry2Вручную: положить файлы
.github/skills/r3f-geometry/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-geometryВручную: положить файлы
.devin/skills/r3f-geometry/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-geometry
Как установить r3f-geometry в Claude Code?
Выполните npx skills add EnzeD/r3f-skills --skill r3f-geometry -a claude-code. Файл скилла находится по пути ~/.claude/skills/r3f-geometry/SKILL.md.
Что делает r3f-geometry?
Помогает агенту создавать геометрию React Three Fiber, работать с пользовательскими буферами и инстансированием. Также объясняет обновление атрибутов и проверку границ объектов.
Чем Drei Merged отличается от объединения геометрии?
Merged создаёт инстансированные объекты на основе мешей, но не склеивает произвольные объекты BufferGeometry. Для реального объединения в скилле предлагается изучить mergeGeometries из three/addons/utils/BufferGeometryUtils.js.
