前言¶
在前端项目里做一段古建搭建动画，常规做法是自己写 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 。
