javascript - WebGL Globe - 来自一个顶点的多个数据点

Question

我已经能够遵循源代码并让我的 WebGL 地球像示例一样工作。我正在尝试定制这个地球仪。我需要在全球范围内展示不止一个指标。例如，我不想只显示地球上的全部人口，而是想从同一个顶点显示女性人口和男性人口。我一直在阅读Globe.js中的每一行，但仍然对如何实现这一点感到困惑。有人可以指出我正确的方向吗？

Answer 1

嗯，这个演示的很好的扩展。我想到的方法是更改​​ addData() 中的 for 循环...

function addData(data, opts) {
  var lat, lng, size, color, i, step, colorFnWrapper;
  // NEW:
  var pointsAtPosition = {};
  var offsetAtPosition = {};
  var pointPosition = '';
  var offset = 0;

  ...

的构造this._baseGeometry似乎设置了颜色，所以这里有一些繁重的重写。为什么我要使用对象处理位置索引并将我的纬度/经度字符串化？我首先尝试了嵌套对象，这是一场性能灾难！但也许还有更聪明的东西？

  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);
    }
  }

...在第二次设置位置时循环...我们通过添加一个偏移量来改进原始代码，该偏移量与相同纬度/经度的每个条目相加。

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);
}

现在剩下的就是调整 addPoint() 使其offset作为参数。

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);

  ...

更改数据 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]]
]