WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

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

通过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);
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com