Three.js Awesome Graphics Agent Skills – 24 个让 AI 写出专业级 WebGL 特效的 Three.js 技能包 Skill 技能

技能简介

threejs-awesome-graphics-agent-skills 是一套面向 Three.js 的 Agent 技能包，目标不是教模型 API 用法，而是把高质量图形实现的「词汇表」和可运行范例交给 Agent。当前 v0.12.0，MIT 与 GPL-3.0 双协议，GitHub 约 919 星、101 个 fork。仓库自述的核心判断是：不能只靠一句「做得好看些」让 Agent 产出好画面，它需要看到好图形的具体实现，这正是该技能包要提供的东西。

核心能力

1. 24 个专项技能：覆盖网格设计、灯光、PBR 材质、纹理、着色器、TSL/WebGPU、后处理、真实感与风格化等方向，每个技能对应一类可独立调用的机制。
2. 程序化材质库：混合纹理 PBR 土壤与苔藓、程序化法线、可变形颗粒沙、模拟可撕裂牛仔布、熔岩与自发光表面、光线追踪钻石宝石折射、软体果冻折射焦散等。
3. 海洋与水体光学：验证过的 FFT 合成、有限体积海滩浪、混合 FFT/Gerstner 水面、水下 Snell 窗、全内反射、水面焦散与衍射眩光。
4. 天气与大气：共享 Rayleigh/Mie 大气模型、体积云与云影、降雨积雪、湿地积水与涟漪、镜面水波。
5. 程序化几何与自然：放样、旋转、扫掠、实体化、倒角与语义接缝，程序化植被生长层级与根系风场，球形星球地形、山脊、陨石坑与生物群系。
6. 视差遮蔽映射与空间特效：TSL 高度步进、浮雕壳体自阴影、曲光线路径积分黑洞与吸积盘、虫洞喉道与透镜化星空。
7. 附带示例库：随包提供示例实现与资源，可供人眼逐个视觉检查。

安装配置

1. 全局安装到指定 Agent：npx threejs-awesome-graphics-agent-skills@latest install --agent codex（claude-code、cursor 用法相同）。
2. 项目级安装：npx threejs-awesome-graphics-agent-skills@latest install --agent github-copilot --scope project。
3. 自定义 Agent 目录：npx threejs-awesome-graphics-agent-skills@latest install --agent custom --path designated-agent-skills-dir。
4. 强制重装当前版本：加 --force；卸载使用 npx threejs-awesome-graphics-agent-skills uninstall --agent codex。
5. 支持目标：universal、grok、codex、claude-code、cursor、github-copilot、gemini-cli、windsurf 与 custom，各自对应用户级与项目级目录。

使用步骤

1. 选好目标 Agent 并执行安装命令，把技能包落到该 Agent 期望的目录结构。
2. 在项目中描述你想要的画面，例如「做一个有体积雾和折射焦散的水下场景」。
3. Agent 先用 threejs-skill-router 把视觉目标拆成最小的相关专家系统，再调用对应专项技能。
4. 按技能给出的实现要点落代码，必要时参考随包附带的示例实现与资源。
5. 运行后用示例画廊逐个视觉检查，确认材质、光照与后期是否达到预期。
6. 不满意时回到对应专项技能调整参数，而不是在场景代码里堆一次性 hack。

适用场景

1. WebGL 作品集、创意网站与品牌页的 3D 主视觉制作。
2. 游戏场景与可玩 Demo 的图形品质升级。
3. 数据可视化中的三维地理、粒子与体积效果。
4. Three.js 学习者想读懂高质量实现路径，而不只是 API 用法。
5. 用 AI 批量产出风格统一的 3D 场景与产品演示。

适用人群

Three.js 与 WebGL 前端开发者；游戏与互动叙事开发者；生成式视觉与创意编码从业者；希望让编码 Agent 直接产出专业画面质量的团队。

工作原理

技能包把「好图形」拆成若干可独立调用的专家系统，每个技能对应一类可控机制，并遵循统一的运行模型：确定性或可复现的输入、被命名的控制字段与感知参数、可诊断的输出、尺度与距离与时间稳定性规则、机制支撑的质量层级，以及一条「即使不做后处理也仍然成立」的基线。技能随包附带对应示例的实现与资源，Agent 参照具体实现而不是空泛描述来写代码，从而把「做得好」从主观形容词变成可执行的参数与步骤。

官方链接

• npm：https://www.npmjs.com/package/threejs-awesome-graphics-agent-skills
• GitHub：https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills