跳到正文
网页珍奇柜Web Curio

可漫步的小镇

Walkable City (engine behind Client City),John Bailey / The Bailey Perspective,2026 年

正在布展…

原作直展:这是 John Bailey / The Bailey Perspective 的原始作品,按 MIT(贴图来自 Poly Haven,CC0;字体 Manrope/Cinzel 为 OFL;three.js r170 为 MIT) 许可证收录(版本 74ccf76)。原样展出,只把 Google Fonts 换成本地打包的同款字体。点“Enter the town”后用 WASD 走路、拖动看四周;房子的外链在展厅沙箱里打不开。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步高度图地形 + splat 贴图混合多套 CC0 PBR 材质
  2. 第 2 步松树林用 InstancedMesh 大批量绘制,河流与石桥沿样条布置
  3. 第 3 步沿道路的快速旅行、指南针条和路牌做导航
  4. 第 4 步手机端虚拟摇杆,低配模式降低树木数量和贴图尺寸

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Generate a terrain mesh from a grayscale heightmap and blend 3-4 tiling PBR textures in the fragment shader using an RGBA splat map. Scatter trees with InstancedMesh, rejecting placements on steep slopes or near a road spline. Place one low-poly building per content item along the road and attach a trigger volume that opens an info panel when the player is near. Use a capsule-vs-heightfield check for third-person walking and a virtual joystick on touch devices. Add a quality toggle that halves instance counts and texture resolution on phones.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Opened three.js forum post; demo URL returns 200; repo has MIT LICENSE file (GitHub field shows NOASSERTION).