Javascript WebGL地球仪-来自一个顶点的多个数据点

我已经能够跟踪并让我的WebGL地球仪像这样工作。我正在尝试定制这个地球仪。我需要在地球上显示不止一个指标。e、 g.我不想只显示地球上的全部人口，我想显示同一顶点的女性人口和男性人口。我一直在阅读中的每一行，但我仍然对如何实现这一点感到困惑。有人能给我指一下正确的方向吗

Mh，这个演示的扩展很好。我想到的方法是更改addData（）中的for循环

this.\u baseGeometry

的构造似乎设置了颜色，因此这里有一些重重写。为什么我要处理对象的位置索引和字符串化我的lat/long？我首先尝试了嵌套对象，结果导致性能灾难！但也许还有更聪明的东西

  if (this._baseGeometry === undefined) {
    this._baseGeometry = new THREE.Geometry();

    for (i = 0; i < data.length; i += step) {
      lat = data[i];
      lng = data[i + 1];
      size = 0;
      offset = 0;

    pointPosition = '' + lat + '/' + lng;

    if (!pointsAtPosition[pointPosition]) {
        pointsAtPosition[pointPosition] = 1;
        color = {r: 255, g: 0, b: 0};
    } else {
        pointsAtPosition[pointPosition] += 1;
        // set color according to point count
        switch (pointsAtPosition[pointPosition]) {
        default:
            color = {r: 0, g: 0, b: 0};
            break;
        case 2:
            color = {r: 0, g: 255, b: 0};
            break;
        case 3:
            color = {r: 0, g: 0, b: 255};
            break;
        }
    }

      addPoint(lat, lng, size, offset, color, this._baseGeometry);
    }
  }

更改数据JSON文件后，我们现在可以在每个位置显示多个条目

[
 ["1990",[6,9,0.1,6,9,0.2,6,9,0.2]],
 ["1995",[-35,-64,0.001,21,76,0.001,6,9,0.2]],
 ["2000",[6,159,0.001,21,76,0.001,6,9,0.2]]
]

---

非常感谢Jonas发布这篇文章。我懂了。看来还有很多工作要做。我会尝试你的建议，并在这里发布一个更新我的进展。只是回来了，并使它的工作。希望你没有花时间在我的初稿上=D谢谢你指着这个演示，“太有趣了！哇！我没想到会有如此迅速和详细的答复。我花了一段时间才明白这一点。我做了很多console.log（）。。。为每个度量指定一个位置，然后根据其位置在同一顶点上偏移它们。非常聪明。再次感谢分享这个。将此标记为已解决。反复阅读此帖子。这就像读一首诗。写得很漂亮。再次感谢！因为我将数据存储在本地文件中，所以我可能会稍微调整JSON和代码，以减少数据大小并获得更好的性能。类似于[“1990”]、[6,9,0.1,0.2,0.3,6,10,0.1,0.2,0.3]……很高兴听到你用它来记录（）你的过程！：）调整JSON是一个很好的方法。。。绝对是个好主意！谢谢你的好话，祝你玩得开心！

for (i = 0; i < data.length; i += step) {
    lat = data[i];
    lng = data[i + 1];

    size = data[i + 2];
    size = size * 200;

    color = 0;

    pointPosition = '' + lat + '/' + lng;

    if (offsetAtPosition[pointPosition] === undefined) {
        offsetAtPosition[pointPosition] = 0;
    }

    offset = offsetAtPosition[pointPosition];
    offsetAtPosition[pointPosition] += size;

    addPoint(lat, lng, size, offset, color, subgeo);
}

function addPoint(lat, lng, size, offset, color, subgeo) {
  var phi = (90 - lat) * Math.PI / 180;
  var theta = (180 - lng) * Math.PI / 180;

  point.position.x = (200 + offset) * Math.sin(phi) * Math.cos(theta);
  point.position.y = (200 + offset) * Math.cos(phi);
  point.position.z = (200 + offset) * Math.sin(phi) * Math.sin(theta);

  ...

[
 ["1990",[6,9,0.1,6,9,0.2,6,9,0.2]],
 ["1995",[-35,-64,0.001,21,76,0.001,6,9,0.2]],
 ["2000",[6,159,0.001,21,76,0.001,6,9,0.2]]
]