Three.js 程序生成山脉等地形效果

Question

通过 Three.js 编写程序方式程实现山脉等地形效果，对于这种自然界的效果模仿，肯定是需要噪声算法来来实现，通过 Three.js 实现山脉等地形效果本质就是随机生地面高度数据，就是随机生成几何体 Geometry 顶点数据。

地形高度数据生成

参考官方案例：webgl_geometry_terrain_raycast.html

下面的代码是通过 ImprovedNoise.js 库封装的构造函数 ImprovedNoise 来实现地形高度数据的随机生成。

借助 ImprovedNoise 封装一个地形高度数据生成函数 funZ，函数两个参数 width，heigh 分别表示行列两个方向顶点数据量。

// 总的顶点数据量width * height
function funZ(width, height) {
  var size = width * height;
  var data = new Uint8Array(size);
  var perlin = new ImprovedNoise();
  // 控制地面显示效果  可以尝试0.01  0.1  1等不值
  // 0.1凹凸不平的地面效果  1山脉地形效果
  var quality = 1;
  // z值不同每次执行随机出来的地形效果不同
  var z = Math.random() * 100;
  for (var j = 0; j < 4; j++) {
    for (var i = 0; i < size; i++) {
      // x的值0 1 2 3 4 5 6...
      var x = i % width;
      // ~表示按位取反 两个~就是按位取反后再取反
      // ~~相当于Math.floor(),效率高一点
      // y重复若干个值
      var y = ~~(i / width);
      // 通过噪声生成数据
      data[i] += Math.abs(perlin.noise(x / quality, y / quality, z) * quality * 1.75);
      console.log(y);
    }
    // 循环执行的时候，quality累乘  乘的系数是1  显示效果平面
    quality *= 5;
  }
  return data;
}

创建一个地形几何体

下面借助 Threejs 的矩形平面几何体类PlaneBufferGeometry创建一个矩形几何体，行列两个方向的顶点数据量分别为width, height，与地形高度数据生成函数funZ的参数一一对应。

生成地形效果的具体思路就是通过

// width，height两个变量用控制平面几何体顶点数量
// 行列两个方向顶点数量不同  显示效果不同   分别为100和250显示不同的效果
var width = 250, height = 250;
// 生成地形顶点高度数据
var data = funZ(width, height);
//创建一个平面地形，行列两个方向顶点数据分别为width，height
var geometry = new THREE.PlaneBufferGeometry(450, 450, width - 1, height - 1);
geometry.rotateX(-Math.PI / 2);
// 访问几何体的顶点位置坐标数据
var vertices = geometry.attributes.position.array;
// 改变顶点高度值
for (var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
  vertices[j + 1] = data[i] * 0.8;
}
// 不执行computeVertexNormals，没有顶点法向量数据
geometry.computeVertexNormals();
var material = new THREE.MeshLambertMaterial({
  color: 0xCAA066,
  side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);