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 ...

Get Python Geospatial Analysis Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.