Home > three_d.js > Examples


I have been occasionally frustrated by photospheres as they're implemented on Facebook, because (at the time of writing) you can't rotate past the poles, and the equations governing the rotations become singular there, leading to rapid spinning. I thought it'd be interesting to add a photosphere option to three_d.js, since I have the rotations working as I want them here. It's a bit of a kludge – photospheres don't really belong in amongst graphs, and there are a few new parameters I wrote specifically for this use case – but I like the results.

It may take a second or two to load the image, which on this page comes from one of NASA's pictures of Earth, compiled from observations by MODIS. Since the camera is at the centre, it shows the Earth as if it were concave.

Mouse controls: Left-click and drag to rotate; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; pinch to zoom. I have disabled panning so that the camera stays at the centre of the sphere.

You can see how the "plot" is constructed in the HTML source.

While not used here, there is also an available parameter photosphere_inverted to make it a normal, outward-facing sphere, and photosphere_origin to locate it somewhere else. So you could have the Earth just floating off to the side of a regular scatter plot, if you wanted.

Posted 2018-07-06.

Home > three_d.js > Examples