前言¶
在前端項目裏做一段古建搭建動畫，常規做法是自己寫 Three.js 場景：搭幾何體、調材質、寫生長動畫、再補鏡頭切換。工作量集中在“搭”，而不是“表現”。下面介紹的大馮老師的3D演示場景生成器，把樓閣、寶塔、鐘樓這類中國古建的三維搭建流程封裝成一套可交互的 Skill，基於 Three.js 輸出，側重逐層建造的動態效果。
這是什麼¶
一句話定位：基於 Three.js 的可交互 3D 古建生成技能，用於樓閣、寶塔、鐘樓的逐層搭建動畫。
出處與維護：發佈在 SkillHub，座標 @indiv-dfteacher/fmg-3dthree，分類 education，來源 community，發佈者 user_73cb5b59，當前版本 1.0.2。作者同時維護公衆號“數智化教學大馮老師”。
不需要 API key：該 Skill 標記 requires_api_key=false，沒有密鑰成本。頁面當前顯示評分 100000，下載 1432。
核心功能¶
資料中列明的能力如下：
- 逐層自搭建樓閣、寶塔、鐘樓，適合“磚一塊一塊長起來”的建造動畫。
- 程序化 PBR 材質，材質由代碼生成，不需要外部貼圖資產。
- 飛檐斗拱等中國古建特徵構件。
- 環繞鏡頭與近景鏡頭，覆蓋全景和細節觀察兩種視角。
- 自帶 Vite + React 起始工程，本地 npm run dev 即可預覽。
官方給出的適用描述是：3D 建築生長、古建搭建特效、樓臺逐層建造、建築動態組裝。
安裝與啓用¶
官方地址：
SkillHub 頁面: https://www.skillhub.cn/skills/indiv-dfteacher/fmg-3dthree
API 地址: https://api.skillhub.cn/indiv-dfteacher/fmg-3dthree
座標: @indiv-dfteacher/fmg-3dthree
該 Skill 採用通用 SKILL.md 格式，在支持該格式的 Agent 環境（如 Cursor、Codex CLI、Claude Code 一類工具）中加載後，即可在對話中觸發。官方資料未給出統一的 CLI 安裝命令，不同環境的安裝方式以各自工具的說明爲準，安裝前建議先打開上面的 SkillHub 頁面確認。
本地預覽¶
Skill 自帶 Vite + React 起始工程，進入工程目錄後執行：
npm run dev
這一步是把生成結果放到本地瀏覽器裏看，方便反覆調整。
典型用法¶
用一個可復現的例子說明：在支持該 Skill 的 Agent 中發起對話，描述目標場景，例如“搭一座中國亭子，逐層生長，帶環繞鏡頭”。Agent 按 SKILL.md 生成 Three.js 場景代碼，放入自帶的 Vite + React 工程，運行 npm run dev，即可在本地預覽亭子逐層搭建、鏡頭環繞的效果。
換成寶塔或鐘樓同理，變化的是生成腳本搭建的構件層級，工程結構不變。
適用場景與注意¶
適合：
- 教學演示、彙報中需要一段三維建築生長動畫。
- 想快速驗證古建小品視覺效果的前端項目。
- 需要亭、臺、樓、閣、塔、鐘樓等程序化建築模型的 Three.js 場景。
注意：
- 生成物是程序化搭建的演示模型，不是 CAD 級別的精確模型，尺寸和形制以演示效果爲準。
- 本地預覽需要 Node 環境和 Vite + React 工程運行基礎。
- 該 Skill 面向三維建築場景，官方明確說明不適合扁平圖片揭示和通用網頁樣式。
- 頁面當前顯示下載量 1432、評分 100000，實際效果建議自行運行後再評估。
結尾¶
這個 Skill 的價值在於把“古建搭建動畫”從一次手工編碼變成一個可複用的技能包：構件逐層生長、程序化 PBR 材質、環繞與近景鏡頭都內置，配合自帶的 Vite + React 起始工程，能在本地直接跑起來。官方地址：https://api.skillhub.cn/indiv-dfteacher/fmg-3dthree ，SkillHub 頁面：https://www.skillhub.cn/skills/indiv-dfteacher/fmg-3dthree 。
