2

I'm playing with the WebGL Globe (http://globe.chromeexperiments.com/) and would like to be able to "refresh" it with new data and then animate it to the new state. The examples provided in the library don't help because they load data series at once when the page loads, but I'd like to load in new data dynamically (say, every 30 seconds)

Repeatedly executing the following with new data only updates the globe's data additively, so the bars "stack up" on the globe when new data comes in:

globe.addData(data, {format: 'magnitude'});
globe.createPoints();
globe.animate();

There doesn't seem to be an obvious way to subtract / clear / reset the globe's data using the built in API (and then animate to a new state of data). Is this easily doable?

gman
  • 100,619
  • 31
  • 269
  • 393
CraexIt
  • 179
  • 3
  • 11
  • Isn't this exactly what they do on the page linked by you on line 144? Loading the data via ajax and tweening the bars to the new data. – LJᛃ Feb 08 '15 at 03:37
  • Not exactly.. that example loads a data file "population909500.json" via ajax, but this data file has 3 datasets (one for each year) within it. Loading a new set of data and re-executing the call to globe.addData would cause the new data to stack on top of the old data – CraexIt Feb 08 '15 at 22:38
  • It looks like after globe.createPoints() is called, no more Tweens can be made. This is a problem because I want to addData dynamically (I don't know what the new data is going to be). – CraexIt Feb 08 '15 at 23:56

2 Answers2

6

I figured it out. In your globe.js add the following lines:

function createPoints() {
    ...
    this.points.name = "lines"; // Add this line
    scene.add(this.points);
    }
}

// Create this function
function removeAllPoints() {
    scene.remove(scene.getObjectByName("lines"));
}

// Near the bottom of the code
this.addData = addData;
this.removeAllPoints = removeAllPoints; // Add this line
this.createPoints = createPoints;
this.renderer = renderer;
this.scene = scene;

Now you can simply do something like:

TWEEN.start();
globe.removeAllPoints();
globe.addData(data, {format: 'magnitude', name: 'results', animated: false});
globe.createPoints();
hobbes3
  • 28,078
  • 24
  • 87
  • 116
  • 1
    You are correct, but I thought I would mention that I had to add [this](http://stackoverflow.com/questions/33152132/three-js-collada-whats-the-proper-way-to-dispose-and-release-memory-garbag/33199591#33199591) to removeAllPoints() to prevent memory leaks. – bob2 Aug 29 '16 at 17:56
4

The answer given by hobbes3 really helped. But just one small change.

You need not call globe.animate().

I had used it in a project in which i update data every 5 seconds and calling globe.animate() over and over again brought rendering to a crawl. Comment that out and you are gold.

Bartłomiej Semańczyk
  • 59,234
  • 49
  • 233
  • 358
Anand Varma
  • 150
  • 1
  • 2