three.js导入外部json文件生成世界地图

//定义外部文件加载器
var loader=new THREE.FileLoader();
loader.setResponseType('json');
//生成一个组，能让所有的国家模型添加进去
var mapGroup=new THREE.Group();
scene.add(mapGroup);
//异步加载包含世界各个国家的坐标文件
loader.load('../../../public/world.json',function(data){
    //访问所有国家边界坐标数据
    data.features.forEach(area => {
        //type的值为Polygon表示国家只有一个轮廓
        if(area.geometry.type=='Polygon'){
            //声明一个空数组用于存放顶点坐标数据
            var pointArr=[];
            //因为只有一个轮廓所以下标是0
            area.geometry.coordinates[0].forEach(elem=>{
                //把坐标拆开分别写成一个三维向量z是0，作为顶点坐标数据
                pointArr.push(elem[0],elem[1],0);
            });
            //调用函数生成模型添加到模型组里面
            mapGroup.add(makeMesh(pointArr))
        }else if (area.geometry.type === "MultiPolygon") {
          // 解析所有封闭轮廓边界坐标area.geometry.coordinates
          area.geometry.coordinates.forEach(polygon => {
            var pointArr = [];//边界线顶点坐标
            polygon[0].forEach(elem => {
              pointArr.push(elem[0], elem[1], 0);
            });
            mapGroup.add(makeMesh(pointArr));//国家边界轮廓插入组对象mapGroup
          });
        }
        ;
      
        
    });
});
function makeMesh(pointArr){
    //创建一个Buffer类型几何体对象
    var geometry=new THREE.BufferGeometry();
    //类型数组创建顶点数据
    var vertices=new Float32Array(pointArr);
    // 创建属性缓冲区对象
    var attribute=new THREE.BufferAttribute(vertices,3);//3个为一组，表示一个顶点的xyz坐标
    // 设置几何体attributes属性的位置属性    
    geometry.attributes.position=attribute;
    //用线模型首尾相连渲染
    var material=new THREE.LineBasicMaterial({
        color:0x00ffff
    })
    //关联模型和材质
    var line=new THREE.LineLoop(geometry,material);
    //返回完整的模型
    return line
}

这块内容其实主要只有两步

第一步，处理数据把数据转成three可以转换的坐标数组（一个国家一个数组能够完成连线）；

第二步，封装一个根据坐标数组生成类型数组再通过线模型进行连线

效果图：

世界地图json文件