Skip to content

Mapptastic/threejs-dem-visualizer

 
 

Repository files navigation

threejs-dem-visualizer

A GIF file showing a preview of the starter project

⚠️ If you encounter a validateschema error when running yarn dev, try downgrading webpack-cli to 2.0.0. It seems a bug that affects only webpack-dev-server. ⚠️

Blog Post:

https://medium.com/@zubazor/visualizing-a-mountain-using-three-js-landsat-and-srtm-26275c920e34

Features :

  • DEM(Digital Elevation Model) and satellite image data is downloaded from USGS
  • ASTER and LANDSAT satellite's data is used.
  • Geotiff files generated using QGIS QGIS

Installation

git clone git@github.com:zhunor/threejs-geotiff-visualizer.git
cd threejs-geotiff-visualizer

yarn install

Usage

Generate all js/css bundles

yarn build

Run webpack-dev-server (all bundles will be served from memory)

yarn dev

Go to localhost:8080 to see your project live!

Credits

Skeleton of the code is built on https://github.com/jackdbd/threejs-es6-webpack-starter project. I add some css for loading since reading geotiff files take time. If you have problems on build better to follow original instructions.

Demo of jonathanlurie and [mapmasters] (http://blog.mastermaps.com/2013/10/terrain-building-with-threejs.html) were realy helpfull to understand the logic of DEM to three.js convertion

About

Visualizing ASTER and LANDSAT satellite data using THREE.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.1%
  • CSS 6.9%
  • HTML 5.0%