AIKraft/AI/Войти
AIKraft/Skills/Three.js

Three.js

Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.

mengto official Дизайн

Что делает навык

Навык обеспечивает создание и отладку интерактивных 3D-сцен в вебе с использованием библиотеки Three.js, включая настройку сцены, камеры, рендерера, управление освещением и загрузку моделей. Он помогает решать задачи по созданию полноценных 3D-элементов интерфейса, обеспечивая полный контроль над визуализацией и производительностью.

Когда применять

  • Создание интерактивных 3D-сцен для hero-секций сайта или витрин товаров.
  • Разработка 3D-визуализации данных с возможностью взаимодействия.
  • Применение шейдеров и эффектов материалов для уникального визуального стиля.
  • Отладка производительности и управление ресурсами WebGL в одностраничных приложениях (SPA).

Как работает

  1. Инициализировать базовые компоненты: создать Scene, камеру (Perspective/Orthographic) и WebGLRenderer.
  2. Настроить цикл рендеринга через requestAnimationFrame для обновления анимаций и вызова renderer.render.
  3. Добавить объекты в сцену, используя Mesh (Geometry + Material), и при необходимости добавить источники света.
  4. Обработать загрузку внешних ресурсов с помощью GLTFLoader, TextureLoader или DRACOLoader.
  5. Реализовать управление (например, OrbitControls) и обработать события изменения размера окна.
  6. Обеспечить корректное освобождение ресурсов (dispose) при удалении сцены для предотвращения утечек памяти.

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

Создай минимальную вращающуюся 3D-сцену с кубом, освещением и адаптивным рендерингом на Three.js.
Напиши код для загрузки и отображения 3D-модели в формате glTF с использованием GLTFLoader.
Реализуй обработчик изменения размера окна для корректного масштабирования 3D-сцены без искажений.

Что понадобится

  • Библиотека Three.js
  • Среда выполнения с поддержкой WebGL
  • HTML-элемент (canvas) для рендеринга

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «threejs» из репозитория: # https://github.com/mengto/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r threejs/ ~/.claude/skills/threejs/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.