D3 map with threejs points overlay

[kritb]

Wanted to use an SVG map with the power of Three.js, so I combined them. Simple example with 500 satellites moving in real time. Zoom and pan seem to work well together. d3 also provides other map projections, so to mess around you could swap out d3.geoNaturalEarth1() for something else

Also, sorry for the hardcoded large dataset of 500 satellites in the JS. My local version sends the satellite data from the backend and it handles 30,000+ satellites just fine at max FPS.

Happy New Year All!

link

[kritb]

Realized I could make up the data. These are now not real satellites, tho they do sample from real country IDs. The orbits are a little unrealistic, but I think this better shows off the Three.js animation speeds over the D3 map.