Three.js Skills
Десять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка
- 3 830 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы содержат только справочные инструкции и примеры кода
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/three-js-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы содержат только справочные инструкции и примеры кода
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скиллы дают агенту точные сведения об API Three.js, которых часто не хватает в общих знаниях модели. Каждый файл посвящен одной области: базовая сцена и рендерер, геометрия и инстансинг, PBR-материалы, свет и тени, текстуры, загрузка GLTF, GLSL-шейдеры, EffectComposer и эффекты, raycasting и управление камерой. В каждом есть минимальный рабочий пример, разбор ключевых классов, типовые приемы и советы по производительности. Агент подгружает нужный скилл по смыслу запроса.
Для кого. Для фронтенд-разработчиков, которые делают 3D-сцены и интерактивную графику в браузере.
Подходит, если
- Нужно собрать сцену Three.js с корректной настройкой рендерера и ресайза
- Нужно загрузить GLTF-модель с Draco и проиграть анимации
- Нужен свой шейдер или эффект постобработки
Не подходит, если
- Проект на React Three Fiber, Babylon.js или другом движке
- Нужна игра на полноценном игровом движке
Пример запроса к агенту
Сделай сцену Three.js с вращающимся кубом, мягкими тенями и bloom-эффектомОграничения
Материал сверен с документацией Three.js r160 и новее, в более старых версиях импорты и API могут отличаться. В README команда клонирования указывает на другой репозиторий, поэтому скиллы проще скопировать вручную. Файл лицензии в репозитории не определяется GitHub, хотя README заявляет MIT.
Как отключить. Удалите папки threejs-* из каталога скиллов агента.
Частые вопросы
Нужно ли ставить все десять скиллов?
Нет, каждый самостоятелен, но они ссылаются друг на друга, поэтому полный набор удобнее.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыThree.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы
Three.js Architecture Effects
threejs-architecture-effects
Скилл собирает на Three.js облетаемое здание, которое строится само: кирпич, каркас, процедурные материалы. Результат — рабочий сайт на Vite и React
Скилл для разработки WebGPU-приложений на Three.js с шейдерами на TSL: рендерер, node-материалы, compute-шейдеры, пост-обработка
Скиллы Мэна То для дизайна и игр
Agent Skills
Библиотека скиллов для выразительных лендингов, анимаций, WebGL и браузерных игр на Three.js с демо и промптами
Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js
Motion Web
motion-web
Сайты «с движением в приоритете» на чистом Three.js, Canvas 2D, WebGL и CSS: физика демпфирования, токены, 7 примеров. Лицензия CC BY-NC 4.0
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Three.js Skills (эта запись) | нет | 3 830 | |
| Shaders | да | 5 667 | скилл и MCP-сервер библиотеки Shaders |
| Machine Skill | нет | 444 | одна строка с названием машины |
Коротко о README
README объясняет, зачем нужны скиллы: модель знает программирование в целом, но путается в деталях API Three.js. Перечислены десять скиллов и какие запросы включают каждый из них. Описана единая структура файла: быстрый старт, концепции, приемы, производительность и связанные скиллы. Автор отмечает сверку с документацией r160 и выше.
Бейдж для README
Исходный SKILL.md
---
name: threejs-animation
description: Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
---
# Three.js Animation
## Quick Start
```javascript
import * as THREE from "three";
// Simple procedural animation
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
const elapsed = clock.getElapsedTime();
mesh.rotation.y += delta;
mesh.position.y = Math.sin(elapsed) * 0.5;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
```
## Animation System Overview
Three.js animation system has three main components:
1. **AnimationClip** - Container for keyframe data
2. **AnimationMixer** - Plays animations on a root object
3. **AnimationAction** - Controls playback of a clip