AIKraft/AI/Войти
AIKraft/Skills/threejs-shaders

threejs-shaders

Создаёт кастомные визуальные эффекты с помощью GLSL, ShaderMaterial и uniforms. Пригодится для модификации вершин, написания фрагментных шейдеров и расширения встроенных материалов Three.js.

cloudai-x official Разработка ★ 3.5k

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

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

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

  • Создание анимированных градиентов или текстур на основе времени
  • Модификация геометрии через кастомные vertex-шейдеры
  • Разработка сложных визуальных эффектов (glow, distortion, noise) через fragment-шейдеры
  • Интеграция пользовательских материалов в сцены Three.js

Как работает

  1. Импортировать библиотеку Three.js и создать экземпляр ShaderMaterial.
  2. Определить uniforms (например, time, color) для передачи данных в шейдеры.
  3. Написать vertexShader для обработки позиции вершин (например, gl_Position).
  4. Написать fragmentShader для определения цвета и эффектов пикселей (например, использование uniform color).
  5. Применить созданный материал к объекту в сцене Three.js.
  6. Обновлять значения uniforms в цикле анимации для динамических эффектов.

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

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

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

  • Библиотека Three.js

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

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

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

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