Tiny World Builder 微型世界建造器

Tiny World Builder 微型世界建造器

Tiny World Builder 是一个完全运行在浏览器中的 3D 体素世界编辑器：你可以在网页里搭建地形、放置房屋与动物、雕刻山川河流，还能切换相机模式自由飞行浏览，最后把作品保存、导出或分享给他人。

项目基于 Three.js 与原生 JavaScript 实现，无需安装客户端，打开网页即可开始建造。

核心功能

• 建造（Build）：放置地形、道具、房屋、道路、庄稼与动物。
• 雕刻（Sculpt）：抬升、下沉、上色地表，塑造悬崖与河流。
• 飞行（Fly）：切换等距 / 柔和 / 透视相机，从任意角度探索世界。
• 分享（Share）：保存、二次创作、导出，并把世界开放给真实玩家。

工具与规则

内置工具覆盖 Grass、Path、Water、Stone、Lava、Sand、Snow 等地形，以及 House、Tree、Fence、Bridge、Crop、Cow、Sheep 等对象。

渲染器会对地形与对象做归一化处理：

• 庄稼会自动在下方生成泥土；
• 桥梁会强制生成水面；
• 普通物体不会漂浮在水面上；
• 道路、海岸线、桥梁、栅栏、房屋、岩石都具备邻接感知，放置相邻方块时会自动重绘周边，使道路衔接、河流生成河岸、栅栏连成墙、房屋组合成 L/T/+/方形建筑。

操作方式（节选）

车辆运行时（Road AI）

项目内置了一套可复现的路网与车辆 AI 演示，通过 URL 参数即可加载：

http://localhost:3000/tiny-world-builder?demo=vehicles&seed=tide-ridge-428

大规模路网压力测试支持 size、cars 等参数，车辆只在 path 或桥面格子上行驶；若在道路上放置岩石、树木等物体，会形成实时交通阻塞，车辆会绕行或在无替代路径时停下。

架构概览

项目为单个 <script> 块、约 2.9 万行原生 JS，按段落注释组织，模型划分清晰：

• world[x][z]：每个格子的意图数据 { terrain, kind, floors }。
• cellMeshes['x,z']：每个格子对应的 Three.js 渲染组。
• setCell(x, z, opts)：唯一的变更入口，负责更新数据、重建网格并重绘受邻接影响的邻居。

房屋集群使用 BFS 与 tryComposite / trySquare 判断是否合并为统一结构。此外还有预览板、AI 生成、本地存档槽、天气时间云层、命令面板，以及可选的 Mesh Terrain 体素地形雕刻器等系统，均通过同一套契约接入。

部署方式

应用可作为静态站点部署到 Vercel 或 Netlify，构建脚本会生成 dist/ 目录；Three.js r185 及其加载器、解码器自托管于 vendor/three/，部署不依赖运行时 CDN。

注意：项目采用 AGPL-3.0 许可证，商业闭源使用需谨慎评估；账号登录依赖 Netlify Identity 与钱包会话，自部署时需配置相应环境变量。