这是一个基于 Three.js 和 Vite 的实时程序化地牢生成器前端项目。项目通过单一随机种子驱动完整生成流程，包括房间散布、碰撞分离、Delaunay 三角剖分、最小生成树连接、回环添加、房间语义标注、瓦片雕刻、装饰物生成和 WebGL 渲染。它支持 5 种主题、可视化生成过程、图结构叠加、难度热力图、Bloom 与 Tilt-shift 后处理，并使用 InstancedMesh 优化大量瓦片和装饰物的渲染性能。项目更偏向技术演示、游戏原型、算法学习和 WebGL 视觉实验，而不是可直接用于生产的完整游戏框架。
适用领域
WebGL / Three.js / 程序化内容生成 / 游戏开发 / 地牢生成 / 图算法 / 前端可视化 / 实时渲染 / 创意编码 / 独立游戏原型
配置难度
中等偏高。运行和部署很简单，只需要 Node.js、npm 和浏览器；但如果要深入修改地牢生成算法、抽离为游戏模块、优化渲染管线或迁移到其他引擎，需要理解图算法、瓦片地图、Three.js 渲染、InstancedMesh、后处理和前端交互逻辑。对于有 Three.js 和游戏开发经验的开发者难度中等；对于普通前端开发者，算法和渲染部分会有一定学习成本。
商业价值
该项目的直接商业价值主要体现在技术验证、原型开发和视觉 Demo 展示上。它可以帮助游戏团队快速验证程序化地牢布局、种子复现、主题化关卡和 WebGL 实时渲染效果；也可以作为独立游戏、网页游戏、桌游地图生成器、关卡编辑器或创意工具的基础参考。由于 MIT 许可，商业项目可以较自由地复用代码，但若要变成产品级系统，需要进行模块化重构、补充工程化测试、抽象生成 API、优化移动端性能，并与实际游戏玩法系统集成。
01
技术亮点
- 确定性生成：同一个 seed 可以复现完全相同的地牢，包括房间、走廊、装饰和灯光
- 完整生成管线可视化：scatter、separate、Delaunay、MST、loops、semantics、carve、rasterize、decorate 等步骤清晰展示
- 使用 Delaunay 三角剖分和 MST 构建自然且保证连通的房间图
- 支持回环连接，避免地牢变成单调的树状结构
- 通过 BFS 计算深度和难度，并分配入口、战斗、精英、宝藏、神龛、Boss 等房间语义
- 内置 Ancient、Molten、Frost、Grim、Verdant 五种主题，并支持根据 seed 自动选择
- 大量使用 InstancedMesh，适合渲染数千个瓦片、墙体和装饰物
- 自定义后处理管线，包括 bloom、模糊、tilt-shift、色彩分级、暗角和胶片颗粒
- 提供图叠加、难度热力图、对象层开关和性能统计，非常适合调试和教学
- 无后端、无外部素材，部署简单，适合作为静态网页 Demo
02
目标用户
- 希望学习程序化地图生成的前端开发者
- Three.js 和 WebGL 开发者
- 独立游戏开发者
- 游戏关卡生成算法研究者
- 需要地牢或房间图生成参考实现的开发者
- 想制作 roguelike、ARPG、桌游地图工具的开发者
- 学习 Delaunay、MST、BFS 在游戏关卡中应用的学生或工程师
- 需要可视化技术 Demo 的创意开发者
03
配置要求
- Node.js 18+
- 现代浏览器，需要支持 WebGL
- 建议使用支持硬件加速的桌面浏览器以获得更好帧率
- 项目主要依赖 Three.js 和 Vite
- 不需要后端服务
- 不需要数据库
- 不需要外部美术资产管线，纹理、几何体和后处理均在浏览器端生成
- 如果部署到静态站点，需要正确配置 SPA/静态资源路径，通常 Vite 默认配置即可
- 移动端可运行，但复杂场景、后处理和高房间数量可能影响性能
04
适用场景
- 作为程序化地牢生成算法的学习案例
- 作为 WebGL/Three.js 实时渲染和后处理管线参考
- 用于游戏原型中的地牢布局生成逻辑参考
- 用于演示种子驱动的确定性生成系统
- 用于研究房间图、最小生成树、回环连接和难度曲线设计
- 作为互动式网页技术 Demo 部署到 Netlify、GitHub Pages 或 itch.io
- 提取其中的地图生成逻辑，迁移到 Unity、Godot、Unreal 或自研游戏引擎
- 作为教学材料，展示程序化生成从图结构到瓦片网格再到渲染的完整流程
05
部署与配置
- 确保本地安装 Node.js 18 或更高版本
- 克隆仓库：git clone https://github.com/majidmanzarpour/threejs-procedural-dungeon.git
- 进入项目目录：cd threejs-procedural-dungeon
- 安装依赖：npm install
- 启动开发服务器：npm run dev
- 在浏览器访问 Vite 输出的本地地址，通常是 http://localhost:5173
- 构建生产版本：npm run build
- 本地预览生产构建：npm run preview
- 将 dist/ 目录部署到任意静态托管服务，例如 Netlify、GitHub Pages、Vercel 或普通静态服务器
06
风险与注意事项
- 核心逻辑集中在单个 main.js 文件中，模块化程度较低，后续维护和二次开发成本可能较高
- 项目更像完整技术 Demo，而不是可插拔的 npm 库，直接集成到大型项目需要重构
- 算法、渲染、UI、材质、输入控制高度耦合，提取单独功能时需要理解整体代码
- 复杂场景加后处理在低端设备或移动端可能存在性能压力
- README 描述功能较完整，但如果缺少 API 文档，开发者需要直接阅读源码理解实现细节
- 没有提到自动化测试，算法改动后可能较难保证生成结果和视觉表现稳定
- 如果用于商业游戏，需要补充存档、碰撞、寻路、实体系统、战斗系统、资源加载和编辑器能力
- Three.js 版本升级可能影响颜色管理、灯光、后处理和渲染结果，需要注意兼容性
2026-07-12
第18名
新收录 · github_search
2026-07-11
第26名
新收录 · github_search
2026-07-10
第25名
新收录 · github_search
2026-07-09
第29名
新收录 · github_search
2026-07-08
第26名
新收录 · github_search
