Mount Beerwah is the tallest of the Glass House Mountains in South East Queensland, the highest point being 556 metres above sea level. Using elevation data from Geoscience Australia's 5-metre DEM and a screenshot from Google Maps, I've represented the mountain as a surface below.

Manipulating the plot will often cause Chrome on my Galaxy S3 to crash – there are about 200,000 triangles in the surface (256 × 203 grid nodes), and perhaps that's too many. Please let me know (email dw.barry@gmail.com or tweet @pappubahry) if you get a crash on a different device. Still it looks great on my laptop.

The x- and y-axes are UTM easting and northing; click/tap somewhere on the surface to see the co-ordinates below the plot. The highest point in the data is at 550.4 metres.

Fun exercise: If you rotate the mountain so that it's upside-down and appears a crater, then you might be able to still see it as a hill, and make a hollow face illusion as you make small rotations.

Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom. Click/tap on the cube icons to snap to a side-on view.

Imagery ©2016 Google.

Clicked point: x =  ; y =  ; z =  .

You can see how the plot is constructed in the HTML source:

• The hard part of this example is getting the data, particularly the imagery. At least for now, three_d.js doesn't allow using an image as a texture over a surface; instead each grid node needs to be assigned a colour. The elevation data from Geoscience Australia fixes the grid node locations; there's then a bit of work matching up pixel locations in a Google Maps screenshot to UTM co-ordinates, and interpolating the pixel colours. The details are in this zip file (13.2 MB).
• Once there are CSV files for elevations and colours, it's not much effort to copy-paste them into the code and put brackets at the start and end of each line. The only trick is that the spreadsheet will have x varying horizontally, whereas x varies vertically when params.z and params.color are written explicitly as an array of arrays. So there's a transpose-copy-paste in the spreadsheet first before the copy-paste into the JavaScript.
• Other properties in the params object are mostly cosmetic, for example using params.formats to shave a character off the tick values.

Posted 2016-12-22.