如何使用GeoJSON数据在地球上创建网格物体？

Question

我想从这里跟随Marcs的回答： How can I draw geoJSON in three.js as a mesh and not a line, and fill with color?

我需要从GeoJSON创建一个网格，但我无法正确创建面

我在这里使用threeGeoJSON.js： https://github.com/jdomingu/ThreeGeoJSON/blob/master/lib/threeGeoJSON.js

和USA.geo.json来自： https://github.com/johan/world.geo.json/blob/master/countries/USA.geo.json

我尝试了3种方法，但都失败了..

1 - 与Marcs回答

相同

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2,values_axis3) {
    for (var i = 0; i < values_axis1.length; i++) {
        var v = new THREE.Vector3(
        values_axis1[i],
        values_axis2[i], 
        values_axis3[i]
        );
    object_geometry.vertices.push(v);
    if (i>=values_axis1.length-1) continue;
    object_geometry.faces.push(new THREE.Face3(0, i + 1, i));
    }
}   

结果：

2 - 使用THREE.ShapeUtils.triangulateShape

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2,values_axis3) {
    for (var i = 0; i < values_axis1.length; i++) {
        var v = new THREE.Vector3(
        values_axis1[i],
        values_axis2[i], 
        values_axis3[i]
        );
    object_geometry.vertices.push(v);
    }
    var holes = [];
    var triangles = THREE.ShapeUtils.triangulateShape ( object_geometry.vertices, holes );
    for( var i = 0; i < triangles.length; i++ ){
        object_geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
    }
}   

结果：

3 - 使用Earcut

https://github.com/mapbox/earcut

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2,values_axis3) {
    for (var i = 0; i < values_axis1.length; i++) {
        var v = new THREE.Vector3(
        values_axis1[i],
        values_axis2[i], 
        values_axis3[i]
        );
    object_geometry.vertices.push(v);
    }
    var data = [];
    for(var i=0;i<object_geometry.vertices.length;i++) {
        data.push(object_geometry.vertices[i].x);
        data.push(object_geometry.vertices[i].y);
        data.push(object_geometry.vertices[i].z);
    }
    var triangles = earcut(data, null, 3);
    for( var i = 0; i < triangles.length; i+=3 ){
        object_geometry.faces.push( new THREE.Face3( triangles[i], triangles[i+1], triangles[i+2] ));
    }
}

结果：

黄线是美国的轮廓 - 它们是正确的

红色是需要填充黄线的面孔......

我该如何解决这个问题？