threejs-skills
Создание 3D-графики и интерактивных сцен с Three.js
Создание 3D-веб-интерфейсов требует понимания настройки сцены, освещения и паттернов рендеринга. Этот навык предоставляет систематические паттерны Three.js для создания производительного интерактивного 3D-контента.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «threejs-skills». Создайте 3D-сцену с вращающейся сферой, меняющей цвет при клике
Ожидаемый результат:
- Полный HTML-файл с импортом Three.js r128 CDN
- Инициализация сцены с камерой, позиционированной на z=5
- SphereGeometry с 32 сегментами для плавного вида
- MeshStandardMaterial с начальным цветом
- Настройка ambient и directional освещения
- Анимационный цикл, вращающий сферу по осям x и y
- Реализация рейкастинга для обнаружения кликов
- Обработчик событий, меняющий цвет материала при пересечении
- Обработчик изменения размера окна для адаптивного canvas
Использование «threejs-skills». Постройте поле частиц, текущее к камере
Ожидаемый результат:
- BufferGeometry с 2000 частицами используя Float32Array
- Случайные начальные позиции, распределённые по 3D-пространству
- PointsMaterial белого цвета с размером 0.02
- Анимационный цикл, обновляющий z-позиции каждый кадр
- Сброс позиции при прохождении частицами порога камеры
- Правильный паттерн dispose для очистки
- Оптимизация для плавных 60fps
Аудит безопасности
БезопасноThis skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.
Оценка качества
Что вы можете построить
Интерактивная визуализация продукта
Создание 3D-отображений продуктов, которые пользователи могут вращать, масштабировать и исследовать прямо в браузере.
Панель визуализации данных
Преобразование сложных наборов данных в иммерсивные 3D-диаграммы, графики и пространственные представления.
Образовательный 3D-контент
Создание интерактивных моделей для обучения анатомии, астрономии, архитектуре или инженерным концепциям.
Попробуйте эти промпты
Создайте базовую сцену Three.js с вращающимся кубом. Включите настройку сцены, камеру, рендерер со сглаживанием, цветную геометрию куба, освещение и анимационный цикл. Добавьте обработку изменения размера окна.
Постройте интерактивную 3D-сферу, реагирующую на движение мыши. Реализуйте пользовательское управление камерой (перетаскивание для вращения, прокрутка для масштабирования) без OrbitControls. Используйте MeshStandardMaterial с правильным освещением.
Сгенерируйте систему частиц с 1000+ частицами используя BufferGeometry. Добавьте анимацию движения или вращения частиц со временем. Включите правильные практики производительности вроде утилизации геометрии и материалов.
Реализуйте рейкастинг для обнаружения кликов мыши и наведения на 3D-объекты. При наведении масштабируйте объект и меняйте стиль курсора. При клике меняйте цвет объекта. Включите массив кликабельных объектов.
Лучшие практики
- Всегда используйте Three.js r128 CDN для совместимости артефактов и проверяйте доступность функций
- Добавляйте обработчики изменения размера окна для обновления aspect ratio камеры и размеров рендерера
- Утилизируйте геометрии, материалы и текстуры при удалении объектов для предотвращения утечек памяти
Избегать
- Использование OrbitControls или импорта аддонов, недоступных в r128 CDN
- Использование CapsuleGeometry, требующего версии r142 или новее
- Забывание добавить свет при использовании освещаемых материалов вроде MeshStandardMaterial