·three-js
</>

three-js

Этот навык следует использовать, когда пользователь просит «создать 3D-сцену», «добавить сетку», «реализовать OrbitControls», «загрузить модель GLTF», «добавить постобработку цветения», «написать собственный шейдер», «создать эффекты частиц», «оптимизировать производительность Three.js», «использовать WebGPU», «добавлять тени», «анимировать модель» или упоминать Three.js, Threejs, WebGL, WebGPU, GLTF, raycaster, шейдерный материал, PBR-материал или эффекты постобработки. ВАЖНО: Этот навык предназначен для VANILLA Three.js (обязательный JavaScript). Для Реакта Три Fiber (@react-three/fiber, R3F, drei), проверьте навык `r3f-best-practices`, хотя навыки Three-js помогают при работе с R3F, поскольку R3F — это средство рендеринга React для Three.js. Предоставляет полный справочник по Three.js для веб-3D-графики, включая настройку сцены, геометрия, материалы, текстуры, освещение, камеры, загрузчики, анимация, управление, взаимодействие, шейдеры, постобработка, оптимизация производительности, материалы TSL/узла, Интеграция WebGPU, физики и VR/XR.

49Установки·1Тренд·@noklip-io

Установка

$npx skills add https://github.com/noklip-io/agent-skills --skill three-js

Как установить three-js

Быстро установите AI-навык three-js в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/noklip-io/agent-skills --skill three-js
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: noklip-io/agent-skills.

React Three Fiber users: This reference is for vanilla Three.js. For R3F/Drei patterns, use the r3f-best-practices skill. However, understanding Three.js concepts here helps when working with R3F since R3F is a React renderer for Three.js.

| references/01-fundamentals.md | Scene setup, renderer config, Object3D hierarchy, coordinate systems | | references/02-geometry.md | Creating shapes, BufferGeometry, instancing, points, lines | | references/06-cameras.md | Camera types, frustum, viewport, projection | | references/13-math.md | Vector3, Matrix4, Quaternion, Euler, Color, MathUtils |

| references/03-materials.md | PBR materials, shader materials, all material types | | references/04-textures.md | Texture loading, UV mapping, render targets, environment maps | | references/05-lighting.md | Light types, shadows, IBL, light probes | | references/11-shaders.md | Custom GLSL shaders, uniforms, varyings, shader patterns |

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/noklip-io/agent-skills --skill three-js
Источник
noklip-io/agent-skills
Категория
</>Разработка
Проверено
Впервые замечено
2026-02-01
Обновлено
2026-03-10

Browse more skills from noklip-io/agent-skills

Короткие ответы

Что такое three-js?

Этот навык следует использовать, когда пользователь просит «создать 3D-сцену», «добавить сетку», «реализовать OrbitControls», «загрузить модель GLTF», «добавить постобработку цветения», «написать собственный шейдер», «создать эффекты частиц», «оптимизировать производительность Three.js», «использовать WebGPU», «добавлять тени», «анимировать модель» или упоминать Three.js, Threejs, WebGL, WebGPU, GLTF, raycaster, шейдерный материал, PBR-материал или эффекты постобработки. ВАЖНО: Этот навык предназначен для VANILLA Three.js (обязательный JavaScript). Для Реакта Три Fiber (@react-three/fiber, R3F, drei), проверьте навык `r3f-best-practices`, хотя навыки Three-js помогают при работе с R3F, поскольку R3F — это средство рендеринга React для Three.js. Предоставляет полный справочник по Three.js для веб-3D-графики, включая настройку сцены, геометрия, материалы, текстуры, освещение, камеры, загрузчики, анимация, управление, взаимодействие, шейдеры, постобработка, оптимизация производительности, материалы TSL/узла, Интеграция WebGPU, физики и VR/XR. Источник: noklip-io/agent-skills.

Как установить three-js?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/noklip-io/agent-skills --skill three-js После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/noklip-io/agent-skills

Детали

Категория
</>Разработка
Источник
skills.sh
Впервые замечено
2026-02-01