Three.js 程序生成山脉等地形效果 - 文章教程

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

发布于 2021-10-09 字数 2655 浏览 1086 评论 0

通过 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);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

偏爱自由

这个人比较懒,什么都没有填写!

17 文章
2 评论
20937 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0