发布信息
- 发布时间：2026-02-07
- 发布平台：前端公众号
- 状态：⏰ 待复盘（2026-02-22）
AI 写 3D 代码不靠谱？有人做了个技能包，1.3k Star
Three.js 是目前最主流的浏览器端 3D 图形库，用它可以在网页里实现 3D 场景、模型展示、数据可视化等效果。Claude Code 是 Anthropic 推出的 AI 编程工具，可以直接在终端里通过对话生成代码。
Claude Code 写一般的前端代码没什么问题，但碰到 Three.js 就容易出错——API 参数写反、构造函数签名过时、导入路径不对，这类问题很常见。原因是 Three.js 的 API 体系庞大且版本迭代频繁，AI 的通用训练数据跟不上。
threejs-skills 就是为了解决这个问题。它是一组知识文件，安装到项目里之后，Claude Code 在写 Three.js 代码时会自动参考这些文件里经过验证的 API 文档和代码示例，从而生成更准确的代码。
它本身不是一个框架，也不提供运行时功能，只是给 AI 补上了 Three.js 这块专业知识。
包含哪些内容
项目包含 10 个技能文件，每个覆盖 Three.js 的一个核心领域：
| 模块 | 一句话说明 | 覆盖内容 |
|---|---|---|
| threejs-fundamentals | 搭建一个最基础的 3D 场景 | 场景、相机、渲染器、坐标系 |
| threejs-geometry | 各种 3D 形状怎么画 | 内置几何体、自定义形状、批量渲染 |
| threejs-materials | 控制物体表面的外观 | 基础材质、物理材质、着色器材质 |
| threejs-lighting | 给场景打光 | 各类光源、阴影、环境光 |
| threejs-textures | 给物体贴图 | 纹理加载、UV 映射、环境贴图 |
| threejs-animation | 让物体动起来 | 关键帧动画、骨骼动画、动画混合 |
| threejs-loaders | 加载外部 3D 模型 | GLTF/GLB 格式加载、异步处理 |
| threejs-shaders | 自己写渲染效果 | GLSL 语言基础、自定义材质 |
| threejs-postprocessing | 画面后期处理 | 辉光、景深、屏幕特效 |
| threejs-interaction | 用户交互 | 鼠标点选物体、拖拽旋转视角 |
每个模块都包含可直接运行的代码示例、详细的 API 文档，以及性能优化建议。所有内容经过 Three.js 官方文档（r160+）审核，确保 API 签名和导入路径的准确性。
安装与使用
安装
前提：你的电脑上已经安装了 Claude Code。如果还没装，可以参考 Anthropic 官方文档先完成安装。
在你的项目根目录下执行：
git clone https://github.com/CloudAI-X/threejs-skills.git或者作为 Git 子模块引入：
git submodule add https://github.com/CloudAI-X/threejs-skills.git装完之后，确保项目的 .claude/skills/ 路径下有对应的技能文件，Claude Code 就会自动识别并加载。
使用方式
安装完成后，不需要手动操作。Claude Code 会根据对话上下文自动匹配并加载对应的技能文件。
| 你对 Claude Code 说 | 自动触发的模块 | AI 会帮你做什么 |
|---|---|---|
| "画一个旋转的立方体" | threejs-fundamentals | 生成完整的场景初始化代码，包括渲染循环和窗口自适应 |
| "给场景加个光，要有阴影" | threejs-lighting | 配置合适的光源类型和阴影参数 |
| "加载一个 3D 模型文件" | threejs-loaders | 生成模型加载代码，带错误处理 |
| "让用户能拖拽旋转视角" | threejs-interaction | 配置 OrbitControls 交互控制 |
| "给画面加一个发光效果" | threejs-postprocessing | 设置后处理管线和辉光参数 |
使用示例：假设你要做一个产品展示页面，需要加载一个 3D 模型并添加交互。
- 告诉 Claude Code "创建一个基础 Three.js 场景"，fundamentals 模块提供完整的初始化代码，包括渲染器、相机、动画循环和响应式调整
- 接着说 "加载这个 GLB 模型文件"，loaders 模块提供带错误处理和 Draco 支持的加载代码
- 然后 "添加环境光照和点光源"，lighting 模块提供光源配置和阴影设置
- 最后 "让用户可以旋转查看模型"，interaction 模块提供 OrbitControls 的配置代码
每一步生成的代码都基于经过验证的 API 参考，而非 AI 的模糊记忆。
自定义与扩展
技能文件本身是 Markdown 格式，可以直接编辑。如果你的项目有特定的 Three.js 使用模式（比如特定的着色器写法或性能优化策略），可以修改或扩展现有的技能文件。
写在最后
Claude Code 有一个 Skills 机制：你可以在项目里放一些结构化的知识文件，AI 在工作时会自动参考它们。threejs-skills 就是基于这个机制，把 Three.js 的专业知识整理成 AI 能理解的格式，让它从"凭记忆写代码"变成"查文档写代码"。
不过需要注意，这套技能文件是 Claude Code 特有的机制，其他 AI 编程工具无法直接使用。同时它提供的是准确的 API 参考，不是 Three.js 的高阶封装，也不能替代开发者对 3D 图形本身的理解。
项目目前有 1.3k Star，MIT 协议，接受社区贡献。如果你正在用 Claude Code 做 Three.js 开发，或者团队想统一 AI 辅助开发时的代码质量基线，值得试一下。
GitHub 项目地址：https://github.com/CloudAI-X/threejs-skills (opens in a new tab)