通过加载高程数据(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
效果如下图: