Visualizing DEM data with Three.js

You have a great 3D Digital Elevation Model (DEM) that you may want to view on a web page, so your choices are limited only to your imagination and programming skills. In this little example based on the great work of Bjorn Sandvik, we will explore the methods needed to manipulate a DEM to load a Three.js HTML-based web page.

Tip

A great plugin that I would highly recommend for QGIS is the qgis2threejs plugin, written by Minoru Akagi. The Python plugin code is available on GitHub at https://github.com/minorua/Qgis2threejs where you can find a nice gdal2threejs.py converter.

The resulting 3D DEM mesh can be viewed in your browser:

Getting ready

We need Jinja2 as our template engine (installed in the first section of this chapter) to create our HTML. The remaining requirements include JavaScript and our 3D DEM data. Our DEM data is from Chapter 7, Raster Analysis, and is located in the /ch07/geodata/dem_3857.dem folder, so if you have not already downloaded all...