Three.js实现高程数据加载

Posted 2023-03-04

通过加载高程数据（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开发：高程数据加载​​