一款在浏览器中用 three.js 实时渲染的 3D 日本河谷小船之旅,涵盖四季与全天时段。
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
克隆仓库
git clone https://github.com/lhlGitHub/threejs-architecture-effects.git - 2
从起始模板生成新项目
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building - 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 数据每日更新。
相关项目
为 react-three-fiber 提供的一组开箱即用的 React 3D 辅助组件与 Hooks。
开源、免登录的 Three.js/WebGL 交互式 UI 组件目录,附带实时渲染与完整 React 源码。
为 react-three-fiber 提供后期处理效果的 React 封装,可用 JSX 组件声明式地添加效果。
将单张参考图重建为可动画的程序化 Three.js 代码模型,而不是网格文件。
交互式 3D 昆虫图鉴,用 TypeScript 与 Three.js 在浏览器中程序化生成 63 种昆虫模型。