threejs-awesome-graphics-agent-skills

定义与身份

threejs-awesome-graphics-agent-skills 是 Scott 发布的一个自定义 npx 安装入口，对应的是面向 Codex 的 Three.js 图形 Agent Skills 包。

它的定位要与常见图形工具区分开：

• 它不是独立 3D 引擎；
• 它不是 Three.js 的替代品；
• 它不是传统意义上供开发者手工 import 的 npm 图形库；
• 它本质上是把高质量 Three.js 视觉经验封装成可安装、可被 AI 编码代理按需调用的技能包。

文中给出的安装命令是：

npx threejs-awesome-graphics-agent-skills install --agent codex

文章强调，这一做法并不是发明了一套新的技能机制，而是 Scott 在 Codex 已有的 Agent Skills 机制外面套了一层自己的分发入口，使其可以一键安装、即装即用。

发布背景

Scott 于 2026 年 6 月 21 日 在 X 发布该技能包，并附带一段 85 秒演示视频 与上述安装命令。

原文记录的帖文互动数据为：

• 192 个赞；
• 1.1 万次观看；
• 7 条回复。

文章认为，真正重要的不是这条帖子的互动量，而是它所代表的方向：给 AI 编码代理安装一种可复用的“审美插件”，把过去只能依赖人工经验的图形判断，转成 AI 可调用的工作流资产。

来源方法：不是看 star，而是看是否真的好看

Scott 的方法不是从热门仓库榜单里按 star 排名抓项目，而是持续在 X 上搜集视觉效果最好的 Three.js 开源项目。

他的筛选标准在文中说得很具体，不是“是否流行”，而是这些项目在以下维度上是否真正出彩：

• 光照是否有层次和电影感；
• 材质是否真实、细腻，而不是默认塑料感；
• 构图是否成熟；
• 后期处理是否到位。

换言之，这个包依赖的是一种偏审美与制作质量的人工策展，而不是社区热度排序。文章特别指出：star 数高低并不能说明视觉质量是否足够高。

蒸馏内容

threejs-awesome-graphics-agent-skills 的核心工作不是简单收集链接，而是把优秀项目源码中的关键视觉经验提炼成 AI 可复用的内容。

文中明确列出的蒸馏范围包括：

• 高级材质用法；
• 灯光布局；
• 后处理链路；
• 相机运镜模式；
• 性能优化策略；
• 可直接引用的代码片段；
• 可直接复用的场景配置。

这些内容解决的不是“Three.js API 怎么写”这种基础语法问题，而是更难被通用模型学稳的图形决策问题，例如：

• PBR 材质的金属度、粗糙度、清漆参数该怎么调；
• 灯光怎样布置才不像教程默认场景；
• 相机该用什么焦段或 FOV 才更有镜头感；
• 后处理应该串哪些效果，如 Bloom、SSAO、色散、胶片颗粒等；
• 在视觉提升和浏览器性能之间如何权衡。

文章的判断是，这类答案通常不在文档、教程或问答站里，而是散落在真正优秀的开源作品源码中；Scott 做的事，就是把这些“人类已经验证过的正确答案”提炼出来。

角色职责

作为一个面向 Codex 的技能包，threejs-awesome-graphics-agent-skills 在文章中的职责可以概括为四层：

1. 给 AI 提供高质量默认路径

通用模型虽然会写 new THREE.BoxGeometry()、new THREE.MeshPhongMaterial()、scene.add(mesh) 这样的基本代码，但这类能力只能保证“能跑”，不能保证“好看”。

该技能包的职责，是让 Codex 在生成 Three.js 场景时，不优先走最安全、最平庸的默认模板，而优先参考经过筛选的高质量做法。

2. 缓解 Demo 诅咒

文章把 AI 生成 Three.js 场景常见的问题称为 Demo 诅咒：

• 旋转立方体；
• 基础 Phong 光照；
• 三个白色点光源平均打亮；
• 没有阴影层次；
• 所有物体金属度 0；
• 粗糙度 0.5；
• 相机匀速绕圈；
• 动画没有情绪；
• 整体质感停留在“廉价 demo”层级。

该包的直接职责，就是把 AI 从这条默认路径上拉开。

3. 把人类图形经验变成可安装基础设施

Scott 在 2026 年 6 月 18 日曾做过一次 AI 生成 Three.js 过山车游戏的实验。文中提到：

• 视觉由 glm 5.2 生成；
• 复杂逻辑还需要 GPT 5.5 修 bug；
• 但整体视觉已经超出常见 demo 水平。

从这次实验到 6 月 21 日发布技能包，中间只隔了三天。文章据此指出，Scott 的思路已经从“一次性做出好效果”转向“把产生好效果的方法变成可复用基础设施”。

4. 为后续持续更新提供入口

文中提到 Scott 承诺持续更新，把新的史诗级项目不断加入技能包。因此它不是一次性的静态示例，而被设想成一个会持续吸收优秀案例的审美知识入口。

预期效果

文章给出了一个很明确的使用场景：当用户对 Codex 说“做一个赛博朋克雨夜城市场景”时，装了 threejs-awesome-graphics-agent-skills 之后，Codex 的起手式应当发生变化。

它不再从下面这些低阶默认组合起步：

• BoxGeometry；
• 默认材质；
• 几个白色光源平均照亮场景。

而是优先调用更高质量的方案，例如：

• HDRI 环境光配置；
• 体积雾着色器；
• PBR 材质参数；
• UnrealBloom 后处理链路。

原文进一步描述，这种变化不只是“看起来更高级”，而是让 AI 在生成代码时能够说明自己参考了哪一类成熟方案，优先站在人类已经做好的视觉解法上，而不是从最基础的几何体和默认灯光重新摸索。

与 Codex Agent Skills 的关系

文章用较大篇幅解释，为什么“一行安装命令”能改变 AI 的图形输出质量，其前提是 Codex 的 Agent Skills 机制。

原文给出的关键点包括：

• 技能是可复用的工作流封装；
• 一个技能通常包含一个目录和 SKILL.md；