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.

• The key parameter is photosphere_image (URL or base-64-encoded string), which is assumed to be in equirectangular form: width twice the height (I use 4096×2048 in this example), the width covering longitude, the height latitude. There does not need to be any metadata associated with the image to be used on the photosphere (as is the case on Facebook, for example).
• By default, the camera moves across the surface of a sphere of radius 5 (the sphere moving as the user pans). For a photosphere, the camera should stay at the centre of the sphere, so camera_r is set to zero.
• When zoomed in on the surface of a photosphere, you don't want a click-drag to rotate the camera as much as when zoomed out. (Perhaps surprisingly, it's fine to do this with a camera on the outside looking in on a graph.) The parameter rotate_less_with_zoom is set to true.
• More obviously, the direction of rotation needs to be flipped compared to the outside-looking-in case, so reverse_rotation is set to true.
• There is no need for the grid lines etc., so various parameters are set to false: show_toggles, show_grid, show_box, show_axis_titles, show_ticks.
• You still have to pass some data to plot.

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.