r3f-materials — скилл для Claude Code: что делает и как установить
Помогает настроить PBR-поверхности и прозрачность в React Three Fiber. Предотвращает ошибки с цветовыми пространствами текстур и лишней нагрузкой на видеокарту.
npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-codeЧто делает r3f-materials
Скилл задаёт правила выбора материалов Three.js для сцен в React Three Fiber. Вместо ресурсоёмкого meshPhysicalMaterial агент подберёт meshStandardMaterial или базовый meshBasicMaterial, если объекту не нужны вычисления света. Текст чётко разграничивает форматы текстур: карты цвета требуют sRGB, а нормали и шероховатость должны передаваться в NoColorSpace.
Внутри собраны практические приёмы для стекла и прозрачности. Для листвы или декалей предписано включать alphaTest, чтобы не ломать порядок сортировки в буфере глубины. Отдельно описана работа с MeshTransmissionMaterial из Drei, где каждый объект может создавать дополнительный проход рендеринга всей сцены.
Материалы ориентированы на связку Fiber 9 и React 19 под WebGL. Они сломаются на WebGPU, если слепо переносить шейдерные компоненты Drei без адаптации под TSL. Вызов dispose у материала тоже таит подвох: он не выгружает связанные текстуры из видеопамяти автоматически.
Какие задачи решает
- подобрать наименее затратный материал Three.js для меша
- настроить прозрачность через
alphaTestбез артефактов сортировки - распределить пространства sRGB и
NoColorSpaceпо текстурным картам - оптимизировать параметры стеклянных поверхностей в Drei
Примеры запросов агенту
- Подбери подходящий PBR-материал для металлической сферы в React Three Fiber.
- Настрой стекло с трансмиссией через Drei, чтобы сцена не теряла кадры.
- Исправь артефакты наложения полупрозрачных текстур на моделях листвы.
Как установить r3f-materials
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-materials/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-materials/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-materials -a codex2Вручную: положить файлы
.agents/skills/r3f-materials/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-materials -a cursor2Вручную: положить файлы
.cursor/skills/r3f-materials/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-materials2Вручную: положить файлы
.github/skills/r3f-materials/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-materials -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-materialsВручную: положить файлы
.devin/skills/r3f-materials/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-materials -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-materials
Как установить r3f-materials в Claude Code?
Выполните в терминале команду npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-code.
Зачем нужен скилл r3f-materials?
Он направляет ассистента при настройке материалов Three.js, отсекая избыточные шейдерные эффекты и исправляя частые ошибки с цветом текстур.
Очищает ли удаление материала связанные текстуры?
Нет. Вызов метода dispose у материала освобождает только сам материал, поэтому текстуры требуют отдельного ручного удаления из памяти GPU.
