Three.js开发：高程数据加载

通过加载高程数据（dem），显示地形高低起伏，达到良好的立体展示效果；Three.js能够通过设置一系列坐标点的高度，构建成面的形式，显示高程数据。

实现方式：

使用Three.js的PlaneGeometry进行实现，PlaneGeometry是一个平面几何的效果，设置长度和宽度值，形成一个方形的范围，按照API的定义，通过设置平面上的多个位置的高度信息，达到高低起伏的效果。

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

widthSegments和heightSegments是非必填项，默认为1。

1、通过随机数，简单的设置高程的效果

       const geometry = new THREE.PlaneGeometry(512, 512, 511, 511);  

       const vertices = geometry.attributes.position.array;

       for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {

           vertices[j + 1] = Math.random() * 20;

        }

//添加一个简单的贴图const threetextureinfo =new THREE.TextureLoader().load('images/rasterimg.png'); let mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({               

    map: threetextureinfo,                   

side: THREE.DoubleSide               

  })); scene.add(mesh)；

效果如图：

2、使用地形数据进行设置，这里用了mapbox-gl的一个高程数据切片，如下图：

使用canvas进行图片加载

  const canvas = document.createElement('canvas');

  canvas.width = 512;

  canvas.height = 512;

  let ctx = canvas.getContext('2d');

  ctx.drawImage(_img, 0, 0)

  const imagedata = ctx.getImageData(0, 0, 512, 512).data;

 根据图片的颜色数值进行高度计算，按照以上方式进行设置，具体参见分享https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485688&idx=1&sn=490be64d201a8a58358bb1c7da9bc0cf&chksm=fc8ba8cacbfc21dcdb1bb0577d6aef4b9ba3692184006a3accd19799b38dd754f3d7c3bf7c72&scene=21#wechat_redirect

效果如下图：

参考内容：https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_terrain_raycast.html

https://github.com/IceCreamYou/THREE.Terrain