一列火车离开城市，穿过峡谷，驶入一个农庄。
所有这些都在浏览器中使用 @thirdjs 、 WebGL、TypeScript 和 @nextjs 、 opus 5.5 进行实时模拟。单击任何内容。
Factory Yard 是开源的：
https://github.com/Khalidabdi1/factory
如果你喜欢它，GitHub 上的 ⭐ 意义重大
Factory Yard 开源浏览器城镇模拟，Three.js 实时等距世界在线体验
Factory Yard 是一个在浏览器里实时运行的开源等距视角城镇模拟项目，由开发者 Khalid 使用 Three.js、WebGL、TypeScript 与 Next.js 构建，并借助 AI 模型 Opus 5.5 辅助完成。它用极细的线条风格绘制出一座海滨小镇：货物从工厂出发，沿主干道运往仓库，再送到海边的商店；城镇以东越过林带是新城 Sahel，拥有高架地铁、Metrobus、汽车展厅与集装箱港口，地铁继续穿过群山抵达山谷农庄 Millbrook，Beacon Hill 上立着天文台，海岬上还在建造并发射星舰。整个场景没有仪表盘，点击任何物体都会弹出卡片显示其实时状态，点击车辆还能看到它的行驶路线。项目以静态站点形式构建，可托管在任意平台。
痛点是什么
很多开发者想学习 WebGL 与 Three.js 的实战用法，却常常卡在零散示例上：官方 demo 大多只演示单个几何体或材质，缺少一个完整、可运行、结构清晰的中大型项目作为参照。想研究等距投影、昼夜光照、路径寻路、交通调度这些系统如何协同工作，往往要在多个仓库之间来回拼凑，很难看到它们在同一套代码里如何被组织起来。同时，喜欢城市模拟类内容的用户也缺少一个打开浏览器就能观看、无需安装、还能点击交互的轻量作品，Factory Yard 正好填补了这两类需求之间的空白。
主要功能特点
项目把一座会自己运转的微型城市完整搬进浏览器，所有元素都由代码实时驱动，而非预渲染视频或贴图动画。
实时等距城镇模拟
工厂、仓库、商店、港口与地铁在同一张地图上持续运转，货物与车辆按路线流动。
点击查看实时详情
没有仪表盘，点击任意建筑或车辆即可弹出卡片，显示其当前状态与行驶路线。
昼夜与天气循环
六分钟走完一天，黄昏时窗户、路灯、车灯与灯塔自动亮起，营造出真实的时间感。
静态站点即可部署
基于 Next.js 构建为纯静态 HTML 与 JS，可托管在任意静态空间，无需后端服务。
为什么值得关注
它既是一份可运行的前端工程范例，也是一件能让人安静看上一会儿的数字玩具，代码结构与视觉表达都相当克制。
完整可读的开源工程
内核、模型、世界、模拟与视图分层清晰，适合作为 WebGL 项目的学习样本。
浏览器内零安装体验
打开网页即可观看整座城镇运转，无需下载客户端，也无需配置任何环境。
项目已在 GitHub 开源，地址为 Khalidabdi1/factory，感兴趣可以前往查看源码并点个 Star。
推荐信息
Khalid
@KhalidDevLog 2026年10月08日 22:10
