Repolode
lhlGitHub

lhlGitHub/threejs-architecture-effects

一个为 Codex、Claude Code、Cursor 等 Agent 提供的 Skill,用于生成可交互、逐步建造的 Three.js 三维古建场景。

Star
587
Fork
69
未关闭 Issue
0
最近提交
28天前

这是什么?

这是一个 Agent Skill,指导 AI 编程助手用 Three.js 生成可交互的中式三维建筑。输出是一个可直接运行的 Vite + React + Three.js 网站,实体建筑模型依据同一个 0 到 1 的时间轴逐步建造,支持播放、暂停、倒退拖动和重播。构件包括砖层、木构架、斗拱、分层飞檐和瓦面等。

砖、木、灰泥、瓦、石、青铜等材质均为程序化生成,不依赖付费模型,也不需要 API key。场景支持旋转与缩放,并提供飞檐与石狮的近距离镜头。脚手架脚本可把示例工程复制到新目录,且不会覆盖已有文件;在支持 WebGL2 的浏览器中,执行 npm ci 与 npm run dev 即可运行。

自带的钟楼是示例而非历史复原,该 Skill 也可用于其他设计,例如两层临水亭台。项目不包含视频导出功能。

核心功能

  • 01生成可旋转的实体三维建筑,而非平面视频
  • 02通过单一 0-1 时间轴控制建造过程,支持播放、暂停、拖动和重播
  • 03砖、木、灰泥、瓦、石、青铜等材质均为程序化 PBR 生成
  • 04提供飞檐与石狮的近距离观察镜头
  • 05脚手架脚本复制 Vite + React 示例工程,且不覆盖已有目录

适用场景

  • 让 AI 编程助手生成中式亭台或建筑的 Three.js 场景
  • 制作逐层建造动画的交互式建筑展示页面
  • 将示例模板改造为临水亭台等其他设计

快速上手

  1. 1

    克隆仓库

    git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
  2. 2

    从起始模板生成新项目

    node threejs-architecture-effects/scripts/scaffold.mjs ./my-building
  3. 3

    安装依赖并启动开发服务器

    npm ci && npm run dev

使用前须知

  • 需要 Node.js 22.13+ 和支持 WebGL2 的浏览器。
  • 主要面向桌面端,README 未承诺在所有设备上流畅运行。
  • 不包含视频导出功能,输出为交互式网站。

标签

常见问题

threejs-architecture-effects 是什么?
一个为 Codex、Claude Code、Cursor 等 Agent 提供的 Skill,用于生成可交互、逐步建造的 Three.js 三维古建场景。 这是一个 Agent Skill,指导 AI 编程助手用 Three.js 生成可交互的中式三维建筑。输出是一个可直接运行的 Vite + React + Three.js 网站,实体建筑模型依据同一个 0 到 1 的时间轴逐步建造,支持播放、暂停、倒退拖动和重播。构件包括砖层、木构架、斗拱、分层飞檐和瓦面等。
threejs-architecture-effects 可以免费使用吗?用的什么许可证?
threejs-architecture-effects 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
threejs-architecture-effects 还在维护吗?
活跃维护中。threejs-architecture-effects 最近一次提交是在 2026年9月22日。
threejs-architecture-effects 适合用来做什么?
让 AI 编程助手生成中式亭台或建筑的 Three.js 场景 制作逐层建造动画的交互式建筑展示页面 将示例模板改造为临水亭台等其他设计
threejs-architecture-effects 怎么安装和运行?
克隆仓库: git clone https://github.com/lhlGitHub/threejs-architecture-effects.git 从起始模板生成新项目: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building 安装依赖并启动开发服务器: npm ci && npm run dev
在哪里获取 threejs-architecture-effects?
源代码和安装说明在 GitHub 上:https://github.com/lhlGitHub/threejs-architecture-effects

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目