threejs的日常(二)

最近在做一个演示项目，感觉自己的数学要撑不住了......
今天展示一个简单的3d渲染geojson的例子

geojson.png

这里geojson的数据是从 dataV geo 这里下载的，之前尝试使用echarts提供的geojson，但文件里coordinate数据是加密的放弃了。

使用geojson数据画地图的原理是，遍历数据，获取coordinates，然后勾勒出shape，再通过ExtrudeGeometry对shape进行加厚，加边缘等。示例中，每个地市都需要都hover事件，所以是构建了多个shape来获取raycaster的事件。

for(var i = 0 ; i < geos.length ; i++){
    for(var j = 0 ; j < geos[i].geometry.coordinates[0].length ; j++){
         var coord = geos[i].geometry.coordinates[0][j];

         if(coord[0] instanceof Array){
              for(var k = 0; k < coord.length ; k++){
                  shapes[i].push(coordToVector(coord[k]));
              }
         }else{
              shapes[i].push(coordToVector(coord));
         }
     }

var shapeGeometry = new THREE.Shape(shapes[i]);

var mapGeometry = new THREE.ExtrudeGeometry(shapeGeometry,setting);
...
}

需要说明的是，geojson数据渲染出来并不在原点，需要计算一下geometry的中点然后整体移动，group移动或者camera移动，我觉得group移动会比较好，不会影响到其他模型的位置。

示例代码下载

有误欢迎指正~