项目介绍
在这个万物皆可 Web 的时代，我们见过无数令人惊艳的浏览器端应用。但如果你是一个热衷于 世界构建 、喜欢 沙盒游戏 ，或者对现代前端与 3D 渲染技术充满热情的开发者，今天介绍的这个开源项目绝对会让你眼前一亮 —— 它就是 Tiny World Builder 。
- 在线体验: https://tinyworld.build/tiny-world-builder
- 项目地址：https://github.com/jasonkneen/tiny-world-builder
预览图片：
这是什么项目？
Tiny World Builder 是由开发者 Jason Kneen 打造的一款基于浏览器的 3D 迷你世界建造工具。打开网页，你就能得到一块漂浮在虚空中的 8x8 网格地块。通过简单的点击和拖拽快捷键，你可以随心所欲地铺设草地、河流、雪地，或者建立起错落有致的房屋、农田与桥梁。
它有着类似《Minecraft》的体素风与清新的等距视角，但更注重宏观的 “上帝视角” 微缩景观搭建。无需下载任何客户端，打开浏览器即刻开始创造。
核心亮点：不止于 “摆积木”
1. 智能相邻逻辑
这绝对是项目最酷的特性之一。在搭建时，你不需要手动去选择“房屋拐角”或“T型路口”的模型。底层的渲染逻辑会自动根据你放置的相邻方块进行运算：
- 道路与河流：水面会自动生成河岸，道路会自动连接并形成复杂的路网。
- 建筑群落：当你在相邻的网格放置房屋时，它们会自动融合成 L 型、T 型或是大型方形连体建筑。
- 生态融合：桥梁会自动适应水面方向，农作物会自动将下方的地块转化为泥土。这种“所见即所得”的顺滑感，极大地提升了建造体验。
2. 鲜活的 AI 交通系统与动态生态
这个世界不是静止的！系统内置了一套完整的运行时车辆 AI（Runtime Vehicles）。
当你在道路上放置了寻路机器人或车辆，它们会自动在路网中行驶、寻找目标。更有意思的是它的动态避障与重新寻路机制：如果你突然在马路中间放一块大石头或种一棵树，车辆会判断前方受阻，尝试重新规划路线，或者在无法通行时乖乖停下排队。再加上随风摇曳的树木、动态的云影，整个微缩世界充满了勃勃生机。
3. 强大的地形雕刻（Mesh Terrain）
除了平铺直叙地放方块，项目还提供了高阶的“网格地形雕刻”模式。开启后，你可以直接使用鼠标像拉伸橡皮泥一样，将地形的特定区域拉高或降低，配合平滑的张力衰减（Smoothstep tension falloff），轻松塑造出悬崖、盆地或是起伏的山脉。
4. 日夜交替与动态天气系统
一个充满生机的世界怎么能少得了阴晴圆缺和四季更迭？Tiny World Builder 并没有仅仅停留在“静态模型”的展示上，而是为你提供了一套极其精细的环境控制面板。
如截图中展示的那样，点击左侧的“太阳”图标，你就能呼出强大的时间与天气（Time & Weather）设置菜单，化身掌控大自然的造物主：
- 精确的日夜交替： 通过“一天中的时间”滑块，你可以自由拨动世界的时钟（例如图中的 10:55）。随着滑块的拖动，你可以直观地看到光影的推移、太阳角度的变化以及夜晚灯光的亮起，瞬间拉满氛围感。
- 一键四季变换： 提供春、夏、秋、冬四个季节选项卡。只需轻轻一点，你的世界就能在春意盎然、盛夏绿荫、金秋落叶和凛冬白雪之间无缝切换。
- 多样的天气预设： 无论是想要阳光明媚的晴天、适合漫步的多云、淅淅沥沥的雨天、电闪雷鸣的暴风雨，还是唯美的雪景，统统不在话下。
- 细腻的特效微调： 系统不仅仅是贴个滤镜，而是赋予了你控制粒子物理属性的权力：
- 天气强度 ： 滑动它（如图中的 25%），你可以直接控制天空中飘落粒子的密度以及风暴的猛烈程度。
- 溅落 / 积累 ： 滑动它（如图中的 150%），你可以控制雨滴落在地面的反弹水花、地面积水的形成速度，甚至是冬天雪花在屋顶和树木上的积雪厚度！
简单来说，无论是想营造一个温馨宁静的午后小镇，还是一个狂风骤雨中的赛博前哨站，这套动态天气系统都能完美满足你的视觉需求。
极客时间：硬核的底层技术
对于全栈开发者来说，这个项目的源码简直是一座宝库：
- 极致的纯粹与性能：核心逻辑由近 3 万行的 Vanilla JS（原生 JavaScript）构成，渲染层则由 Three.js 强力驱动。采用了对象动画队列和按需渲染机制，确保了哪怕是在大规模的复杂城市路网中，也能保持极其流畅的帧率。
- 丰富的功能栈：支持本地浏览器存储，标准的 JSON Schema 数据导入导出。更令人惊喜的是，它还集成了 PartyKit 实现多人实时协作建造，以及 Netlify Identity 认证登录机制。
谁适合玩这款工具？
- 游戏策划与世界观设定党：无论你是在构思一个充满奇幻色彩的修仙大世界，还是一个赛博朋克风的机甲前哨站，它都能帮你极速构建出地形原型和关卡草图（Level Blockout），将抽象的文字 PRD 瞬间具象化。
- WebGL / 前端学习者：想知道如何在浏览器里徒手搓出一个 3D 渲染引擎和动态寻路系统？克隆它的 GitHub 仓库，阅读纯粹的代码架构就是最好的进阶途径。
- 解压摸鱼爱好者：单纯想在工作间隙放松一下大脑？听着环境音，捏一个小岛，看小车在上面跑来跑去，绝对是数字时代的“枯山水”。
结语
Tiny World Builder 完美诠释了什么是 Web 端的“小而美”。它不仅是一个展现前端 3D 潜力的优秀开源作品，更是一个承载创造力的微缩沙盒。
赶紧点击 官网链接 去捏一个属于你自己的迷你群岛吧！如果你也是开发者，别忘了去 GitHub 给作者点个 🌟 Star，支持一下这个令人惊叹的个人开源项目。
评论