如何在 Three.js 中将 geoJSON 绘制为网格而不是线条，并填充颜色？

Question

我正在使用 Three.js 制作一个地球仪，并将添加一些数据层。所有图层都将从 geoJSON 创建。我已将其设置为使地球仪（第一个数据文件，包含国家/地区）显示为线条。这使用ThreeGeoJSON。

然而，我想要的不仅仅是轮廓。我想让这些国家充满色彩。

我当前的项目可以在这里看到： http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5

代码在这里： https: //gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5

我尝试创建一个新函数，将多边形和多边形渲染为网格而不是线。该函数如下：

    function drawShape(x_values, y_values, z_values, options) {
        var shape_geom = new THREE.BoxGeometry();
        createVertexForEachPoint(shape_geom, x_values, y_values, z_values);

        var shape_material = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
        var shape = new THREE.Mesh(shape_geom, shape_material);
        scene.add(shape);

        clearArrays();
    }

不幸的是，当我使用它时，什么也没有出现。控制台中没有错误可以帮助我理解原因。

谁能解释一下我如何设置这些国家才能填补这些国家？任何建议或指示将非常感激。

Answer 1

正如 @mlkn 所说，你必须使用三角形来填充网格。

我稍微搞了一下：

function drawLine(x_values, y_values, z_values, options) {
  // container
  var obj = new THREE.Object3D();

  // lines
  var line_geom = new THREE.Geometry();
  createVertexForEachPoint(line_geom, x_values, y_values, z_values);
  var line_material = new THREE.LineBasicMaterial({
    color: 'yellow'
  });

  var line = new THREE.Line(line_geom, line_material);

  obj.add(line);

  // mesh
  var mesh_geom = new THREE.Geometry();
  createVertexForEachPoint(mesh_geom, x_values, y_values, z_values);
  var mesh_material = new THREE.MeshBasicMaterial({
    color: 'blue',
    side: THREE.DoubleSide
  });
  var mesh = new THREE.Mesh(mesh_geom, mesh_material);

  obj.add(mesh);

  scene.add(obj);

  clearArrays();
}

它Object3D obj包裹着线条和网格。

面（三角形）在这里创建：

function createVertexForEachPoint(object_geometry, values_axis1, values_axis2, values_axis3) {
    for (var i = 0; i < values_axis1.length; i++) {
        object_geometry.vertices.push(new THREE.Vector3(values_axis1[i],
            values_axis2[i], values_axis3[i]));

        object_geometry.faces.push(new THREE.Face3(0, i + 1, i)); // <- add faces
    }
}

结果有点混乱，我不知道是因为数据还是顶点顺序/生成。

演示：

• https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
• http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7

在我看来， ThreeGeoJSON 写得很差，没有结构，例如，您只需将名称更改为var scene = ...to var myscene = ...，整个库就会停止工作，这是糟糕的设计。

此外，CPU 使用率很高，可能是绘制调用过多。