CODEWITHSUNDEEP
javascriptwebgl-globe
CraexIt
CraexIt

Reputation: 179

Removing data (refreshing) WebGL Globe

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?

Upvotes: 2

Views: 1253

Answers (2)

hobbes3
hobbes3

Reputation: 30218

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

Upvotes: 6

Anand Varma
Anand Varma

Reputation: 150

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.

Upvotes: 4

Related Questions