r3f-interaction — скилл для Claude Code: что делает и как установить
Настраивает события указателя, выбор объектов, перетаскивание и управление камерой в React Three Fiber. Помогает связать ввод мыши и клавиатуры без конфликтов между контроллерами сцены.
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-codeЧто делает r3f-interaction
Скилл описывает правила обработки событий для проектов на React Three Fiber 9 и React 19. Он разбирает нюансы лучевого поиска (raycasting), различия между event.object и event.eventObject, а также поведение stopPropagation(), которое блокирует передачу дальше по глубине, но не отменяет уже выполненный расчёт луча. Для сброса выбора с объектов предлагается отслеживать onPointerMissed на уровне Canvas.
Внутри собраны рекомендации по связке Drei-компонентов: OrbitControls, CameraControls, TransformControls и PivotControls. Чтобы контроллеры камеры не перехватывали курсор во время перетаскивания мешей, скилл предписывает временно отключать управление сценой и использовать захват указателя через setPointerCapture. Для высокочастотных координат движения курсора рекомендуются рефы, а состояние React — только для семантических событий.
Если вы строите доступный интерфейс, нельзя полагаться только на обработчики мешей, потому что события указателя в Three.js не дают клавиатурной доступности без внешних DOM-элементов. Непрерывный ввод с клавиатуры через KeyboardControls рекомендуется считывать внутри useFrame с нормализацией диагоналей и обязательным сбросом зажатых клавиш при потере фокуса окна.
Какие задачи решает
- разграничить клики и вращение камеры при перетаскивании трёхмерных объектов
- настроить сброс выделения через onPointerMissed на холсте Canvas
- координировать перехват курсора между OrbitControls и TransformControls
- организовать непрерывное управление перемещением через KeyboardControls в useFrame
Примеры запросов агенту
- Настрой клик и выбор меша в Canvas с блокировкой всплытия через stopPropagation
- Сделай перетаскивание объекта в 3D с временным отключением OrbitControls
- Добавь управление перемещением с клавиатуры через Drei KeyboardControls внутри useFrame
Как установить r3f-interaction
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-interaction/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-interaction/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a codex2Вручную: положить файлы
.agents/skills/r3f-interaction/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a cursor2Вручную: положить файлы
.cursor/skills/r3f-interaction/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-interaction2Вручную: положить файлы
.github/skills/r3f-interaction/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-interactionВручную: положить файлы
.devin/skills/r3f-interaction/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-interaction
Как установить r3f-interaction в Claude Code?
Выполните команду npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-code.
Что делает скилл r3f-interaction?
Он даёт агенту правила и шаблоны для обработки событий указателя, перетаскивания мешей, клавиатурного ввода и координации контроллеров камеры в React Three Fiber.
Почему stopPropagation() в R3F может вызывать pointerout на соседних мешах?
Вызов stopPropagation() не отменяет уже выполненный raycast, но прерывает доставку события объектам глубже по лучу. Из-за этого объекты позади точки попадания могут сразу потерять состояние наведения.
