Design / UX / Frontendthreads
threejs-architecture-effects：用 Agent Skill 生成可互動、逐層建造的 Three.js 建築
查證 lhlGitHub/threejs-architecture-effects：MIT 授權的 Codex／Claude Code／Cursor Skill，以 React＋Three.js 程序化生成可 orbit、zoom、timeline scrub 的實體 3D 建築網站；社群所稱『大廠五位數收購』缺乏一手證據。
2026年9月24日2 分鐘閱讀👁 6
Three.js × Agent Skill × Procedural 3D
threejs-architecture-effects：讓 Codex／Claude Code 生成可互動、逐層搭建的 3D 建築
這個 MIT Agent Skill 不是把參考圖貼到平面上做假 3D，而是用 Vite、React、Three.js 與程序化幾何產生可 orbit、zoom、scrub timeline 的建築網站。內附鐘樓 starter、scaffold、建造原則與驗證文件。
| 項目 | 查證結果 |
|---|---|
| 輸出 | 真正 Three.js solid geometry，可 orbit／zoom，包含近景 camera；不是影片貼圖 |
| 動畫 | 以單一 0–1 timeline 控制逐層建造，可 play、pause、倒退 scrub、replay |
| 材質 | 磚、木、灰泥、瓦、石、銅等 procedural PBR；starter 不依賴付費模型 |
| 技術棧 | Vite＋React＋Three.js；Node.js 22.13+、npm、WebGL2 browser |
| 安裝位置 | Codex ~/.codex/skills/、Claude Code ~/.claude/skills/、Cursor ~/.cursor/skills/ |
| 授權／成熟度 | MIT；2026-09-22 建立，查證時約 270 stars、45 forks、0 issues，尚無 GitHub release |
它實際怎麼做
- 先定義 foundations → frame → masonry → decks → upper walls → brackets／eaves／tiles → ornament 的 assembly plan。
- 先把完成後 silhouette 建對，確保尺寸共享、不懸浮。
- 每個 solid part 設 start、duration、travel；顏色與陰影 shader 共用 progress，讓 seek 可重現。
- 材質與幾何分離；不用霧、bloom 掩蓋粗糙接縫。
快速啟動
git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building
cd my-building
npm ci
npm run dev