如果你正在寻找一种能够生成地形网格的工具，那么 heightmap-mesher 可能是你需要的。本文将介绍如何使用这个 npm 包来创建一个基于高度图的 3D 地形。
安装
首先，在你的项目中安装 heightmap-mesher：
npm install heightmap-mesher --save
此外，你还需要安装以下依赖项：
three：用于渲染 3D 场景的 JavaScript 库。canvas：用于在 HTML5<canvas>元素上绘制 2D 图形的 API。lodash：一个实用工具库，提供了各种常用函数。
可以通过以下命令进行安装：
npm install three canvas lodash --save
创建高度图
接下来，我们需要创建一个高度图，在这个例子中我们将使用一个简单的黑白图片作为高度图。从 https://pixabay.com/ 下载一个名为 heightmap.png 的图片，并把它放在项目的根目录下。
初始化场景
现在，让我们开始创建 3D 场景。在你的 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------- ---------------
-------
---- -
------- --
-------- --
-
------ -
------ -----
------- -----
-
--------
-------
------
------- ------------------------
-------
-------上述代码将创建一个全屏的 <canvas> 元素。接下来，我们需要在 JavaScript 文件中初始化场景：
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - -- - ---- --------- ------ - ---- --------- ------ -- ---- ------------------- ----- ------ - --- -------------- ------ ----- ------- - ------------------------ ----- --- - --- -------- ---------- - -- -- - ------------ - ---------- ------------- - ----------- ---------------------- -- -- ---------- ------------ -- ------- - ------------------ ----- ----- - --- -------------- ----- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- -- ----------------- - -- ----- -------- - --- ---------------------- ----------------------------------- -------------------- -----------------------------------------------
上述代码包含了以下内容：
- 创建一个
canvas元素和一个context对象，用于绘制高度图。 - 加载高度图并将其绘制到
canvas上。 - 初始化
three.js场景，并创建一个透视相机 (PerspectiveCamera) 和 WebGL 渲染器 (WebGLRenderer)。
创建地形网格
现在，我们可以使用 heightmap-mesher 包来创建地形网格：
-- -------------------- ---- ------- ----- ------- - - -------- --- ---------------------- ------ --- ----------- ---- -- ----- -------- - --------------------------- ----- -------- - --- ------------------------- ---- --------------- --- ----- ------- - --- -------------------- ---------- ------------------ - -------- - -- -------------------
上述代码包含了以下内容：
- 创建一个
options对象，用于配置地形网格的相关参数。这里我们将使用前面创建的canvas元素作为纹理 (texture)。 - 使用
heightmap-mesher的createGeometry方法创建三角形网格 (geometry)。 - 创建一个基本材料 (MeshBasicMaterial)，并将其作为地形网格的材质 (material)。
- 创建一个
terrain网格对象，并将其添加到场景中。
渲染场景
最后，让我们渲染场景
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48279