Three.js 做我的世界生成器，山地植被昼夜全有，打开就能用

MinecraftWorldGenerator 是一个纯前端的体素地形生成器，基于 Three.js 构建。它的使用方式极简：把仓库克隆下来，直接用浏览器打开 minecraft-world-generator.html，不需要本地服务器，不需要构建工具，页面上就会出现一个程序化生成的 3D 世界——地形起伏、树木分布、云层漂浮、日月交替都已就位。

所有贴图也是程序生成的（草地、泥土、石头、水面、树叶），不依赖任何外部图片资源，这让这个单文件项目可以直接从磁盘运行。项目目前 2 Star，MIT 协议开源（非商业用途）。

地形是怎么生成的

体素地形的生成核心是噪声算法。MinecraftWorldGenerator 支持两种：

• Perlin 噪声：经典的梯度噪声，基于置换表和插值实现，生成连续平滑的高度变化
• Simplex 噪声：比 Perlin 更快的算法，使用三角网格替代方形网格，边缘锯齿更少

两种噪声都支持种子值，相同参数下每次生成结果一致。

FBM（分形布朗运动） 是让地形"自然"的关键：通过叠加多个不同频率和振幅的噪声层（即 Octaves），产生从宏观山脉到细节起伏的多层次地形。具体参数：

此外还有一个 Ridge 层，专门用于生成尖锐山峰：把噪声值做绝对值反转处理，平滑丘陵就会变成锯齿山脊。

高度决定地貌

地形高度生成后，代码根据四条高度分界线决定每个位置的地貌类型：

• 雪线以上：覆盖积雪
• 树线到雪线之间：松树分布区
• 沙线以下：沙地或水面

植被有 6 种树型：Oak（橡树）、Pine（松树）、Autumn（秋叶）、Mystic（神秘树）、Golden（金叶树）、Tropical（热带树），按高度带加权随机分布。这个分层设计让不同高度的区域自然出现不同的植被，不需要单独定义生物群系。

渲染架构

体素存储

地形数据以列为单位存储：colMap[x + z * CHUNK] 存储每列最高的 [y, typeId]。这个设计的优势是 O(1) 高度查找，生成网格时直接取值，不需要遍历整个三维数组。

只渲染可见面

体素渲染最常见的优化是剔除被遮挡的面。MinecraftWorldGenerator 只渲染每列最顶层的面（及侧面），大幅减少三角形数量。世界被分成多个 Tile，每帧只流式加载一个 Tile，避免一次性生成大量网格卡住主线程。

纹理全程序生成

所有材质贴图通过 Canvas 2D API 绘制，包括噪声点、渐变、随机色斑来模拟真实纹理，最终转为 Three.js 的 CanvasTexture。这是整个项目"零外部资源"的技术基础。

昼夜系统和云

天空和光照

太阳和月亮沿弧线轨迹运动，天空颜色根据时间插值变化（正午蓝天、黄昏橙红、深夜深蓝）。夜间星星随机散布。场景使用 HemisphereLight 模拟环境光，并根据太阳高度动态调整强度，产生黄昏时分的暖光效果。

云层生成

云的形状用 2D 细胞生长算法生成：从若干随机种子点出发，向周围扩散并合并，最终形成有机的不规则团状。相比直接用噪声生成云，这种方式产生的轮廓更蓬松，更接近真实云朵。

参数配置

侧边栏提供超过 40 个滑块，可以实时调整：

• 地图尺寸（16 到 1024 个 Chunk）
• 噪声类型切换和所有 FBM 参数
• 各条高度分界线的位置
• 每种树的生成概率
• 云层高度、密度、运动速度
• 当前时间（控制太阳位置和光照）

调整参数后点击重新生成，地形会流式更新，不会一次性卡顿。

写在最后

MinecraftWorldGenerator 的有趣之处不在于它能替代真正的 Minecraft，而在于它把一套完整的程序化世界生成技术打包进了一个可以直接在浏览器里打开的 HTML 文件：噪声算法、地形分层、植被分布、体素渲染、昼夜系统、程序化纹理，每一块都有可以直接参考的实现。

对于想学习 Three.js 或程序化生成技术的开发者，这个项目的代码量适中（主要逻辑在一个 app.js 里），结构清晰，是一个值得拆解阅读的案例。

GitHub 项目地址：https://github.com/Canepaper/MinecraftWorldGenerator (opens in a new tab)