Three.js Skills

Установка

Скачай репозиторий CloudAI-X/threejs-skills и скопируй все папки из skills/ в .claude/skills текущего проекта.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скиллы дают агенту точные сведения об API Three.js, которых часто не хватает в общих знаниях модели. Каждый файл посвящен одной области: базовая сцена и рендерер, геометрия и инстансинг, PBR-материалы, свет и тени, текстуры, загрузка GLTF, GLSL-шейдеры, EffectComposer и эффекты, raycasting и управление камерой. В каждом есть минимальный рабочий пример, разбор ключевых классов, типовые приемы и советы по производительности. Агент подгружает нужный скилл по смыслу запроса.

Для кого. Для фронтенд-разработчиков, которые делают 3D-сцены и интерактивную графику в браузере.

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

Сделай сцену Three.js с вращающимся кубом, мягкими тенями и bloom-эффектом

Ограничения

Материал сверен с документацией Three.js r160 и новее, в более старых версиях импорты и API могут отличаться. В README команда клонирования указывает на другой репозиторий, поэтому скиллы проще скопировать вручную. Файл лицензии в репозитории не определяется GitHub, хотя README заявляет MIT.

Как отключить. Удалите папки threejs-* из каталога скиллов агента.

Проверка безопасности

• Скиллы содержат только справочные инструкции и примеры кода

Коротко о README

README объясняет, зачем нужны скиллы: модель знает программирование в целом, но путается в деталях API Three.js. Перечислены десять скиллов и какие запросы включают каждый из них. Описана единая структура файла: быстрый старт, концепции, приемы, производительность и связанные скиллы. Автор отмечает сверку с документацией r160 и выше.

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

Похожие