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

通过加载高程数据（dem），显示地形高低起伏，达到良好的立体展示效果；Three.js能够通过设置一系列坐标点的高度，构建成面的形式，显示高程数据。
使用Three.js的PlaneGeometry进行实现，PlaneGeometry是一个平面几何的效果，设置长度和宽度值，形成一个方形的范围，按照API的定义，通过设置平面上的多个位置的高度信息，达到高低起伏的效果。

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
widthSegments和heightSegments是非必填项，默认为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
效果如下图：