Creating an Interactive 3D Model of Mt.Fuji in Three.js

The first step is to find a source of Terrain data. I used the NASA SRTM 30m dataset.

The data is provided in a HGT file format and split into 1 degree x 1 degree tiles. QGIS handles this format natively and I used it to merge the tiles into a single raster image. After clipping it to an area of interest, it was exported to a GeoTiff to use in Blender via the BlenderGIS plugin.

For the satelite imagery there was a few different options, I decided to use Landsat-8.

Landsat 8 RGB bands are 30m in resolution, but a grayscale/panchromatic band at a higher 15m resolution is also available. The panchromatic band measures the combined light intensity of the RGB bands and by performing some image processing, you can combine these layers together to get a color image of 15m resolution. At this stage you can also color correct the image.

To make the later steps easier, I used QGIS to clip the satelite imagery to the same size as the terrain.

After importing the terrain into Blender, I applied the decimate modifier to optimize it from the default inefficent grid structure. This preserved the main details while reducing the polygon count significantly.

The terrain was then split into 4 tiles to avoid making the satelite image texture overly large.

It's important the satelite imagery and tiles are the same spatial extent, so after splitting they will still align correctly.

Although the models were initially exported as OBJ's, I ran them through the Google Draco model optimiser. A 1.6MB Obj terrain tile was significantly reduced to a 43KB draco file. In a similiar manner, I converted the JPG textures to WebP for a faster download.

The WebGL scene was simple as I used Three.js. The scene didn't require any lighting as it's already "baked in" to the image textures. The default OrbitControls was used to make the scene interactive.