三角形中的多边形没有完全填充颜色

Question

我正在尝试绘制许多代表国家一部分的复杂多边形（图像波纹管）。 每个多边形都有独特的颜色。

正确绘制多边形的边界（它们代表市政当局的边界）。但是，如下图所示，多边形未正确填充。

以下是我目前用于绘制边框的代码：

// Converts a GeoJSON MultiLineString in spherical coordinates to a THREE.LineSegments.
  function wireframe(multilinestring, material) {
    var geometry = new THREE.Geometry;
    multilinestring.coordinates.forEach(function (line) {

      d3.pairs(line.map(vertex), function (a, b) {
          geometry.vertices.push(a, b);
      });
    });
    return new THREE.LineSegments(geometry, material);
  }

这是我用于绘制填充多边形的代码：

  function fillShape(multilinestring) {
      var points = [];

      multilinestring.coordinates.forEach(function (line) {
          d3.pairs(line.map(vertex), function (a, b) {
              points.push(a, b)
          });
      });

      var geometry = new THREE.ConvexGeometry(points);
      var material = new THREE.MeshBasicMaterial({color: (0xffffff * Math.random() )});

      return new THREE.Mesh(geometry, material);

  }

multilinestring变量包含表示边框的点。 相同的值用于绘制边框和填充的多边形。 为什么多边形没有正确填充，有没有办法正确填充它们？

修改

根据囚犯849在评论中提供的示例，我将代码更新为以下内容：

multilinestring.coordinates.forEach(function (line) {
d3.pairs(line.map(vertex), function (a, b) {
vertices.push(new THREE.Vector3(a.x, a.y, a.z),new THREE.Vector3(b.x, b.y,b.z));
});
});


var shape =new THREE.Shape(vertices)
var geometry = new THREE.ShapeBufferGeometry(shape);
var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({color:(0xffffff * Math.random() ), side: THREE.DoubleSide}));

现在正确填充了多边形，但它们放错位置（绘制在与以前不同的位置）。我使用的是前一个例子中使用的相同顶点坐标，所以我不确定是什么改变了多边形的位置。