设计#开源#智能体#Agent Skill#3D 建模#Three.js
threejs-architecture-effects：让智能体一砖一瓦盖出能拖动旋转的真 3D 古建
Hailey 开源的 Agent Skill，装进 Codex、Claude Code 或 Cursor 后，智能体会按「地基 → 木架 → 砖墙 → 斗拱瓦片」的顺序盖起一座可交互的 Three.js 建筑，而不是拿一张贴图动画糊弄。适合作品集、文旅和活动页的 3D 展示。
Skill 资料
npx skills add lhlGitHub/threejs-architecture-effects --skill threejs-architecture-effects让智能体「做一个 3D 建筑生长动画」，最常见的产出是一张图慢慢淡入，或者一段视频贴在平面上循环——看着像，拖不动。threejs-architecture-effects 是 Hailey 开源的一个 Agent Skill，要求产出的是一个真 Three.js 场景：实体部件逐件组装、可以拖动旋转、可以拖时间线倒放。仓库 2026 年 9 月 22 日创建，MIT 协议，截至 2026 年 9 月 27 日已有 301 星。
它让智能体按什么顺序做事
Skill 把建筑拆成一条装配顺序：地基 → 承重框架 → 砖墙 → 楼板 → 上层墙体 → 斗拱、屋檐、瓦片 → 装饰。先建好最终轮廓，让所有部件共享尺寸，保证上层永远有东西可落；再给每个实体部件标注起始时间、时长和位移，整场动画由一个 0 到 1 的进度值驱动，颜色和阴影 shader 读的是同一个值——所以拖动、暂停、倒放、重播都是确定的，第二遍播放和第一遍逐帧一致。
它明确禁止什么
- 贴图充数：不许把截图贴到平面上，不许用透明度淡入让墙「浮现」，每个部件都得是真几何体。
- shader 各说各话：颜色和阴影必须共享同一个进度值，否则拖动时间线时影子会和生长对不上。
- 用后期遮丑：雾、辉光、拉亮度都不允许用来盖住粗糙的接缝；砖、木、灰泥、瓦、石、铜的材质要单独写颜色、粗糙度和微高度。
- 过度承诺：不许宣称博物馆级还原或历史准确性，也不许凭一张截图断言任何机器都能跑 60 FPS。
适合谁
做作品集、文旅或活动页，想要一个「建筑自己长起来」的 3D 展示、又不想从零写装配动画的人。把仓库拷进 ~/.claude/skills/（Codex、Cursor 同理）就能用；不带智能体也能跑，node threejs-architecture-effects/scripts/scaffold.mjs ./my-building 会复制出一份 Vite + React + Three.js 模板，npm ci && npm run dev 直接打开。
注意它只管 Web 端：需要 Node 22.13+ 和支持 WebGL2 的浏览器，面向桌面，没有视频导出——要交宣传视频得自己录屏。自带的钟楼是演示样例，不是历史建筑复原。