WEBGl之THREEJS导入shp文件,生成三维模型

如果threejs可以导入shp文件,就可以呈现效果那是多么完美的事情啊!当然这是肯定的,那是我在经历的痛苦期,现在来分享我的甜品。

ps.我的其中一篇是关于json格式的,知道我为啥这么了解吗,就是最先的思路是将shp文件转成json 的格式,然后用threejs 读取。然后就没有然后了。

有个偶然,一个QQ群的人,告诉我有个大神写了shp.js,可以读取线坐标,这才是我豁然开朗。(附上:https://www.bram.us/2012/07/30/shp-js-javascript-shapefile-parser/)

这只是一个开始。。。。。。正如大家看到的,这个怎么是圆的,我的内心是崩溃的。。
WEBGl之THREEJS导入shp文件,生成三维模型

之后,我就开始潜心,通读代码,已经修改代码之旅了。。。。(大家也可以下载上面的那个网址的示例,附有代码的,可以改着玩)

首先是,shp.js看到这个js,我直接放弃了,这不是真的放弃,指的是根本不用修改其中的代码,目的很明确就是将shp格式的文件读取出来(点、线、面)。

shp_three.js(要说shp.js是核心,那这是核心中的核心)

思路:第一步要做的就是怎么把圆的变成平的

在shp_three.js中有spherize

是不是很开心,没错,就是这个才让整体效果变成圆形的,因此,不多说,直接将这段代码注释。如下

/* if (spherize)
 {
   //判断是球形状吗,是的话,
   var a = -x/180*Math.PI;
   var t = y/180*Math.PI;
   y = Math.sin(t) * 90;
   x = Math.cos(a) * 90 * Math.cos(t);
   var z = Math.sin(a) * 90 * Math.cos(t);
   poly.push(new THREE.Vector3(x, y, z));
 }
 else
 {
   poly.push(new THREE.Vector3(x, y, 0));
 }*/

知道不是只有这么一处

/* if (spherize) {
    var k;
     //方案一、平面
    var verts = [];
    var vs = geo.vertices;
    for (k=0; k<geo.faces.length; k++) {
    var f = geo.faces[k];
    verts.push(vs[f.a], vs[f.b], vs[f.c]);
    }
    geo = new THREE.Geometry();
    geo.vertices = verts;
    for (k=0; k<verts.length; k+=3) {
    geo.faces.push(new THREE.Face3(k, k+1, k+2));
    }
     //方案二、曲面
    /!*for (k=0; k<geo.vertices.length; k++) {
      var v = geo.vertices[k];
      var a = -v.x/180*Math.PI;
      var t = v.y/180*Math.PI;
      v.y = Math.sin(t);
      v.x = Math.cos(a) * Math.cos(t);
      v.z = Math.sin(a) * Math.cos(t);
      }
      for (k=0; k<geo.vertices.length; k++) {
      geo.vertices[k].setLength(90);
      }*!/
 }*/

我自己随便在本地找了一个shp,效果:

WEBGl之THREEJS导入shp文件,生成三维模型

这样就差不多能把它变成平的了,但是我们的目的是要显示三维呀,平的没用!

然后,就要进行拉伸处理

原先,它的代码,就是lines.push(geo)。

if (false && r.type == SHP.POLYGON)
{
  console.log(‘new polygon‘, poly.length, points.length/2);
  poly.pop();
  polys.push(new THREE.ExtrudeGeometry(new THREE.Shape(poly), {amount: 0}));
}
else
{
  console.log(‘new polyline‘, poly.length, points.length/2);
  var geo = new THREE.Geometry();
  geo.vertices = poly;
    lines.push(geo);

我们要把它改成

if (false && r.type == SHP.POLYGON)
{
  console.log(‘new polygon‘, poly.length, points.length/2);
  poly.pop();
  polys.push(new THREE.ExtrudeGeometry(new THREE.Shape(poly), {amount: 0}));
}
else
{
  console.log(‘new polyline‘, poly.length, points.length/2);

    var geo=new THREE.ExtrudeGeometry(new THREE.Shape(poly), {
        amount:10,
        bevelThickness: 2,
        bevelSize: 0.5,
        bevelEnabled: false,
        curveSegments: 12});
    lines.push(geo);

到此,差不多效果就出来了,咱们加上光照,材质等

效果

WEBGl之THREEJS导入shp文件,生成三维模型

目前只是修改到这里,只是实现了三维的效果,关于材质、光照以及更美好的展现,还有待进一步的研究。

相关推荐