CloudAI-X Three.js Skills（Three.js 三维开发技能包）

# CloudAI-X Three.js Skills：安装说明

这个工具包里是 Mindket 写的安装说明，不包含技能本身。技能要从 CloudAI-X 的仓库安装：https://github.com/CloudAI-X/threejs-skills

许可证：MIT，Copyright (c) 2026 CloudAI-X。全文见 https://github.com/CloudAI-X/threejs-skills/blob/main/LICENSE

CloudAI-X Three.js Skills 是 CloudAI-X 的社区项目，并非 Anthropic 或 three.js 项目制作或背书。

这些说明的来源：README（https://github.com/CloudAI-X/threejs-skills/blob/main/README.md），以及 https://github.com/CloudAI-X/threejs-skills/tree/main/skills 下每个技能的 SKILL.md。Claude Code 从哪里加载技能，出自 Claude Code 自己的文档（https://code.claude.com/docs/en/skills），用到的地方都注明了。所有命令都由 Mindket 照抄，一条也没有运行过。

## 它是什么

13 个给 Claude Code 用的技能文件，three.js 工作的每个部分各对应一个。它们针对 three.js r186（three@0.186）、React Three Fiber 9.8 搭配 drei 10.7，以及 gltf-transform 4.5。README 给出了原因：Claude Code 学到的 three.js 混杂了很多个版本，而从 r160 到 r186 变了不少。

每个技能的结构都一样：Quick Start、本主题的各节、一节 WebGPU and TSL、一份把过时写法和现在改法放在一起的 Common Mistakes（常见错误）清单，以及 See Also。示例用的是 WebGLRenderer，WebGPU and TSL 那一节用 WebGPURenderer。

这些技能只是参考文字，本身不会运行任何东西。

## 13 个技能

| 技能 | 涵盖内容 |
|---|---|
| threejs-fundamentals | 场景、相机、渲染器设置、动画循环、对象层级、变换 |
| threejs-geometry | 内置形状、BufferGeometry、合并、实例化、BatchedMesh、点、线 |
| threejs-materials | 材质类型、PBR、混合、模板、重新编译、节点材质 |
| threejs-lighting | 光源类型和物理单位、阴影、HDR 环境、光照探针 |
| threejs-textures | 加载、色彩空间、UV 通道、纹理类型、渲染目标、内存 |
| threejs-animation | 关键帧、动画混合器、骨骼动画和变形动画、动画混合 |
| threejs-loaders | 带 Draco、meshopt 和 KTX2 的 glTF，其他格式、HDR、加载进度、释放 |
| threejs-shaders | ShaderMaterial 和 RawShaderMaterial、着色器片段、TSL 和节点材质 |
| threejs-postprocessing | EffectComposer、渲染器内置特效、WebGPU 的 RenderPipeline |
| threejs-interaction | 射线拾取、相机控制、变换操纵器、拖拽和框选 |
| threejs-performance | 测量帧开销、绘制调用、GPU 内存、填充率、编译卡顿 |
| threejs-react-three-fiber | React Three Fiber 9 和一组经过核实的 drei 辅助组件，可用 WebGL 或 WebGPU |
| threejs-asset-pipeline | gltf-transform：Draco、meshopt、KTX2、WebP，以及对应的加载器设置 |

来源：README 里的“Skills Included”表格。

## 工具包里的文件

- setup/claude-code.md：README 给的手动方式，克隆后复制进你的个人技能文件夹，或某个项目的技能文件夹
- setup/skills-cli.md：README 给的 skills CLI 一行安装方式
- setup/first-run.md：先问什么、由哪个技能回答，以及 threejs-asset-pipeline 里的 gltf-transform 命令

## 先准备好这些

- Claude Code。README 的标题是“Three.js Skills for Claude Code”，没有提到其他智能体。
- 一个 three.js 项目。技能里的示例会导入 three 包。它们针对 r186，所以要把你项目的版本和它核对一下。
- Git，用于克隆安装。Node 和 npx，用于 skills CLI 安装方式，以及 gltf-transform 和 gltfjsx 命令。
- KTX-Software，即 4.4.0 或更新版本的 ktx 命令，只有你要 KTX2 纹理时才需要。这是 threejs-asset-pipeline 说的。
- 不需要账号、注册或 API 密钥。README 一个也没提。Claude 本身用的是你的 Claude 账号。

## 装到了哪里

- 克隆并复制：13 个名为 threejs-* 的文件夹，放在 ~/.claude/skills/（所有项目）或你项目的 .claude/skills/（单个项目）里。每个文件夹里有一个 SKILL.md。
- skills CLI：README 没说它会写到哪个文件夹。见 setup/skills-cli.md。

## 你的数据

这些技能是给 Claude 读的文字。技能让 Claude 运行的工具都在 threejs-asset-pipeline 里：通过 npx 的 gltf-transform 和 gltfjsx，以及一个基于 gltf-transform SDK 的 Node 脚本。它们读取你指定的模型文件，再写出新文件。npx 第一次运行时可能会从 npm 下载一个包。threejs-fundamentals 里的纯 HTML 示例通过 import map 从 cdn.jsdelivr.net 加载 three.js。你贴给或交给 Claude 的内容，和其他 Claude 工作一样会发给 Claude。

## 更新和删除

README 没有给出更新或删除的步骤。setup/claude-code.md 写了 Claude Code 自己的文档里移除技能的做法。

README.md  5 KB
setup/claude-code.md  2 KB
setup/first-run.md  2 KB
setup/skills-cli.md  1 KB