К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

threejs-interaction · calesthio — скилл для Claude Code: обзор и установка

Набор готовых инструкций по настройке raycasting, контроллеров камеры и событий мыши или тачскрина в Three.js. Помогает внедрить выбор 3D-объектов по клику.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add calesthio/OpenMontage --skill threejs-interaction -a claude-code
Открыть на GitHub

Что делает threejs-interaction

Скилл содержит паттерны для работы с интерактивностью в Three.js. Он описывает расчёт пересечений через Raycaster, обработку событий мыши и тач-устройств, а также приведение экранных координат к нормализованным величинам сцены. Отдельно разобраны типовые контроллеры камеры, включая OrbitControls, PointerLockControls и FlyControls.

На холсте внутри вёрстки клик сломается, если не учитывать сдвиг контейнера через getBoundingClientRect(). Это повод сразу проверять геометрию элемента при расчёте вектора мыши. Справочник подсказывает формулы для вычисления координат на вложенных элементах и способы фильтрации пересечений по слоям объектов.

Для контроллеров с плавным торможением и автоповоротом требуется регулярный вызов метода обновления в цикле анимации. Исходный материал также рекомендует ограничивать частоту лучевых проверок на движении курсора, чтобы не просаживать кадровую частоту сцены.

Какие задачи решает

  • настроить выбор 3D-объектов курсором или касанием
  • перевести координаты клика с экрана в нормализованный вектор Three.js
  • подключить и настроить плавное вращение камеры через OrbitControls
  • оптимизировать частый raycast на движении мыши через троттлинг

Примеры запросов агенту

  • Настрой выбор мешей по клику мыши с помощью Raycaster для отдельного canvas на странице
  • Добавь OrbitControls с ограничением углов вращения и плавным затуханием
  • Реализуй управление камерой от первого лица через PointerLockControls

Как установить threejs-interaction

1Через Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill threejs-interaction -a claude-code

2Вручную: положить файлы

~/.claude/skills/threejs-interaction/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/threejs-interaction/

Из того же набора28

Весь набор →
video-understand calesthio Скилл извлекает кадры из видео и расшифровывает аудио локально через ffmpeg и Whisper. Подходит для анализа роликов без API-ключей. Claude Code CX Codex Cursor +1 1 300установок remotion calesthio Скилл для вёрстки видео в Remotion с библиотекой переходов и правилами сборки сцен при 30 кадрах в секунду. Claude Code CX Codex Cursor +1 1 200установок video-download calesthio Скачивает видео, аудио и субтитры по URL через yt-dlp. Пригодится для получения файла, выбора качества или просмотра метаданных без загрузки. Claude Code CX Codex Cursor +1 1 200установок lottie-bodymovin calesthio Помогает переносить 12 принципов диснеевской анимации в векторные Lottie-ролики. Связывает формулы After Effects с управлением через JavaScript. Claude Code CX Codex Cursor +1 1 100установок create-video calesthio Скилл превращает описание в готовый видеоролик: пишешь, что хочешь видеть, а HeyGen генерирует сценарий, выбирает аватара, озвучивает и монтирует. Подходит для быстрого создания демо, объяснялок и промо без лишних настроек. Claude Code CX Codex Cursor +1 1 100установок video-toolkit calesthio Автоматизирует создание видео: генерирует закадровый голос, музыку, анимирует говорящие головы, компонует сцены через Remotion. Нужны Node.js, Python3, ffmpeg и доступ к облачным GPU (Modal или RunPod). Claude Code CX Codex Cursor +1 1 100установок text-to-speech calesthio Генерирует аудио из текста через HeyGen Starfish, подбирая голос, скорость и тон. Пригодится для озвучки, дикторского текста и подкастов. Claude Code CX Codex Cursor +1 1 100установок bfl-api Black Forest Labs Скилл помогает подключать BFL FLUX API для генерации и редактирования изображений. Нужен для асинхронных запросов, polling и вебхуков. Claude Code CX Codex Cursor +1 1 000установок

Другие версии threejs-interaction

threejs-interaction CloudAI-X Скилл учит агента настраивать выбор объектов, перемещение по плоскости и управление камерой в three.js для WebGL и WebGPU. Claude Code CX Codex Cursor +1 14 100установок

Похожие

co-op-game-intro-generator MiniMax-AI Скилл создаёт вступительный ролик совместной игры для двоих. Он собирает меню, подгоняет персонажей под выбранный стиль и готовит промпты для MiniMax H3. Claude Code CX Codex Cursor +1 3 300установок controlnet-pose prime-skills Скилл для управления позой и движением в видео и изображениях через RunComfy. Перенос движений из исходного видео на целевого персонажа, анимация по позам и создание изображений с контролем глубины или скелета. Claude Code CX Codex Cursor +1 377 000установок game-developer https://github.com/Jeffallan Скилл для разработки игр в Unity и Unreal Engine. Помогает строить системы игровой логики, настраивать физику, многопользовательские сети, шейдеры и оптимизировать производительность до 60+ FPS. Claude Code CX Codex Cursor +1 6 400установок shader-dev MiniMax-AI Набор руководств по 36 техникам GLSL для генерации шейдеров под ShaderToy и WebGL2. Пригодится для процедурного 3D, рей-марчинга и визуальных эффектов прямо в коде. Claude Code CX Codex Cursor +1 2 500установок game-setup-and-config phaserjs Скилл помогает инициализировать инстанс Phaser 4 и собрать объект GameConfig с нужным рендерером, масштабированием и FPS. Пригодится при настройке канваса и пиксель-арта. Claude Code CX Codex Cursor +1 1 200установок sprites-and-images phaserjs Помогает создавать и настраивать объекты Sprite и Image в Phaser 4. Подсказывает правильные методы миксинов для позиционирования, масштабирования, кадров и обрезки текстур. Claude Code CX Codex Cursor +1 1 100установок orbit-card heygen-com Скилл для встраивания готового 10-секундного 3D-блока HyperFrames: карточка фичи облетает сферу из точек по траектории камеры из Blender. Claude Code CX Codex Cursor +1 9 800установок sdf earthtojake Скилл создаёт и проверяет SDFormat-файлы для моделей и миров, а затем помогает подготовить их к передаче в симулятор. Claude Code CX Codex Cursor +1 10 500установок

Вопросы о threejs-interaction

Как установить threejs-interaction в Claude Code?

Выполните команду npx skills add calesthio/OpenMontage --skill threejs-interaction -a claude-code. Агент получит доступ к готовым инструкциям по интерактивности в Three.js.

Какие контроллеры камеры охватывает этот скилл?

В материале описана настройка OrbitControls, FlyControls, FirstPersonControls, PointerLockControls и TrackballControls.

Что нужно учесть при расчёте клика на канвасе внутри страницы?

Позиция курсора зависит от смещения canvas относительно окна. Скилл даёт формулу пересчёта координат с использованием getBoundingClientRect(), предотвращая ошибки выбора объектов.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором