threejs实例（五）

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

}

// 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);