通过加载高程数据（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;
根据图片的颜色数值进行高度计算，按照以上方式进行设置，具体参见 分享开源mapbox-gl地形生成代码
参考内容： https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_terrain_raycast.html
https://github.com/IceCreamYou/THREE.Terrain
原文链接：Three.js开发：高程数据加载