Continuously push new arc data

[ian-whitestone]

Preface: First off, huge fan of all your work, thanks so much for all the effort you've put in and making these open source. I'll also caveat that I'm a threeJS noob so feel free to school me or tell me to go read the docs more 😄

Feature request / question: I'm wondering if it's possible within three-globe to continually update the arcs data in this example. I want to build something similar to the Github globe (go to github.com when you are not logged in to see it in action), where I have a real time feed of data (coming from a websocket or something) that I want to visualize on the globe.

From the example you have, I tried updating the arcs data in the animation loop but as you could guess this didn't work (no arcs ever even completed their path since it would get instantly reset each time animate was called).

    (function animate() { // IIFE
      // define newArcsData
     Globe.arcsData(newArcsData)

      tbControls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    })();

Please let me know if this is possible with three-globe, or if I'll need to do it directly in three-js. Thanks in advance!

[vasturiano]

@ian-whitestone thanks for reaching out!

Yes, this is totally possible. You can manage the addition and removal of arcs simply by manipulating the content of arcsData. On removal you should do it on a timer after the arc has had the time to run its course.

In the globe.gl repo there's an example that emits arcs on click. This uses a very similar logic to what you are seeking, it adds and removes arcs on demand. You'd just need to switch the trigger from a globe click to an event in your input data. The relevant part of the code example is here:

// add and remove arc after 1 cycle
const arc = { startLat, startLng, endLat, endLng };
globe.arcsData([...globe.arcsData(), arc]);
setTimeout(() => globe.arcsData(globe.arcsData().filter(d => d !== arc)), FLIGHT_TIME * 2);

https://github.com/vasturiano/globe.gl/blob/e7bfcc1408b97713d263838b6e8895d0514f64b5/example/emit-arcs-on-click/index.html#L38-L41

[ian-whitestone]

Thank you!