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

Question

我已经能够遵循 source code and get my WebGL globe to work like the example. I am trying to customize this Globe. I have more than one metric that I need to show on the globe. e.g. Instead of showing just the whole population on the globe, I want to show female population as well as male population from the same vertex point. I have been reading through every line in 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的构造好像设置了颜色，所以这里重写了一些。为什么我要用一个对象处理位置索引并将我的 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);
    }
  }

...第二次循环我们设置位置...我们通过添加一个偏移量来改进原始代码，该偏移量与相同 lat/lng.

的每个条目相加

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]]
]

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

WebGL Globe - multiple datapoints from one vertex

javascript

webgl-globe