WebGL Globe - mehrere Datenpunkte von einem Vertex

Question

Ich konnte die source code folgen und meine WebGL-Globus wie the example funktionieren. Ich versuche diesen Globe anzupassen. Ich habe mehr als eine Metrik, die ich auf dem Globus zeigen muss. z.B. Anstatt nur die gesamte Bevölkerung auf dem Globus zu zeigen, möchte ich sowohl die weibliche Bevölkerung als auch die männliche Bevölkerung vom selben Eckpunkt aus zeigen. Ich habe jede Zeile in Globe.js gelesen, bin aber immer noch verwirrt darüber, wie ich das erreichen kann. Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Mh, schöne Erweiterung dieser Demo. Der Ansatz meiner Meinung nach die for-Schleifen in addData ändern würde (zu) ...

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

    ... 

Der Bau von this._baseGeometry scheint die Farbe zu setzen, so gibt es einige schwere Umschreiben hier. Warum verarbeite ich die Indizierung von Orten mit einem Objekt und stringiere mein lat/long? Ich habe zuerst verschachtelte Objekte ausprobiert und es war ein Performance-Desaster! Aber vielleicht ist da etwas noch schlauer?

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

... das zweite Mal Looping wir die Positionen gesetzt ... verbessern wir auf den ursprünglichen Code durch Hinzufügen eines Offsets, die für den gleichen lat/lng mit jedem Eintrag addiert.

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

Jetzt alles, was übrig ist addPoint() so einzustellen, dass es offset als Argument.

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

    ... 

Durch das Ändern der Daten-JSON-Datei können wir jetzt mehrere Einträge pro Standort anzeigen!

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