Three.js（5）：基于geotiff.js与DEM生成三维地形场景

1、DEM数据准备

---

2、引入geotiff库

npm i geotiff

---

3、使用geotiff库读取DEM数据

import * as GeoTIFF from "geotiff";

const tif = await GeoTIFF.fromUrl("hjq/feature/dem/dem1_108_100_84_clip2.tif");
const tifImage = await tif.getImage();
const image = {
    width: tifImage.getWidth(),
    height: tifImage.getHeight()
    };
const data = await tifImage.readRasters({
    interleave: true
});

---

4、创建于DEM相同分辨率的平面格网并设置对应的高度值

  const geometry = new THREE.PlaneGeometry(
        bound.width, bound.height,
        image.width - 1, image.height - 1
    );

    const posAttr = geometry.attributes.position;
    //遍历顺序：从左至右，从上至下
    for (let i = 0; i < posAttr.count; i++) {
        posAttr.array[3 * i + 2] = (data[i] / 50);
    }

---

5、添加纹理