Three.js開發(fā)：高程數(shù)據(jù)加載
通過加載高程數(shù)據(jù)（dem），顯示地形高低起伏，達(dá)到良好的立體展示效果；Three.js能夠通過設(shè)置一系列坐標(biāo)點(diǎn)的高度，構(gòu)建成面的形式，顯示高程數(shù)據(jù)。
實(shí)現(xiàn)方式：
使用Three.js的PlaneGeometry進(jìn)行實(shí)現(xiàn)，PlaneGeometry是一個(gè)平面幾何的效果，設(shè)置長(zhǎng)度和寬度值，形成一個(gè)方形的范圍，按照API的定義，通過設(shè)置平面上的多個(gè)位置的高度信息，達(dá)到高低起伏的效果。
PlaneGeometry(width :?Float, height :?Float, widthSegments :?Integer, heightSegments :?Integer)
widthSegments和heightSegments是非必填項(xiàng)，默認(rèn)為1。
1、通過隨機(jī)數(shù)，簡(jiǎn)單的設(shè)置高程的效果
? ? ???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;
? ? ? ??}
//添加一個(gè)簡(jiǎn)單的貼圖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、使用地形數(shù)據(jù)進(jìn)行設(shè)置，這里用了mapbox-gl的一個(gè)高程數(shù)據(jù)切片，如下圖：
使用canvas進(jìn)行圖片加載
? 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;
?根據(jù)圖片的顏色數(shù)值進(jìn)行高度計(jì)算，按照以上方式進(jìn)行設(shè)置，具體參見分享https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485688&idx=1&sn=490be64d201a8a58358bb1c7da9bc0cf&chksm=fc8ba8cacbfc21dcdb1bb0577d6aef4b9ba3692184006a3accd19799b38dd754f3d7c3bf7c72&scene=21#wechat_redirect
效果如下圖：
參考內(nèi)容：https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_terrain_raycast.html
https://github.com/IceCreamYou/THREE.Terrain
