By
2014-03-15
QGIS, Visualization
41 Comments

3D viz with QGIS & three.js

If you are looking for a tool to easily create 3D visualizations of your geodata, look no further! Qgis2threejs is a plugin by Minoru Akagi which exports terrain data combined with the map canvas image and optional vector data to an html file which can be viewed in 3D in any web browser which supports WebGL. To do that, this plugin uses the Three.js library.

This is the result of my first experiments with Qgis2threejs. In the following sections, I will show the steps to reproduce it.

Türkenschanzpark, Vienna

click for the interactive version (requires WebGL-capable browser)

1. The data

The building blocks of this visualization are:

  • elevation data and the hillshade derived from this data
  • a base map (WMTS from basemap.at in my case)
  • OSM building data provided by Geofabrik and
  • tree data from the city of Vienna

Load all datasets into QGIS.

2. Preparing the map

Qgis2threejs will overlay the map (as rendered in the QGIS map area) on top of the elevation model. You can combine any number of layers to create your map. I just loaded a basemap.at WMTS and a hillshade layer. To add a nice tree shadow effect, I also added the tree layer (dark grey, 50% transparency, multiply blending).

tuerkenschanzpark_map

3. Preparing the vector features

The vector features in the visualization are buildings and trees. The buildings are based on an OSM building layer. The trees are create from two point layers: one point layer to create the tree trunks (cylinder shape) and a duplicate of this point layer to create the tree crowns (sphere shape).

Load the data and choose the desired fill colors.

4. Using Qgis2threejs

Now we can start Qgis2threejs. The first tab is used to configure the terrain. Just pick the correct elevation data layer. I didn’t modify any of the other default settings.

qgis2threejs_dem

The second tab provides the settings for the vector data. As mentioned in the previous section, the trees are created from two point layers and the buildings are based on a polygon layer. The tree crowns are spheres with a radius size 3 and a z value of 5 above the surface. The tree trunks are cylinders. Finally, the buildings have a height of 10.

qgis2threejs_vector

That’s it! Just press “run” and wait. When the export is finished, your default browser (or a different one, if you specify another one in the plugin settings) will open automatically and display the results.
The visualization is interactive. You can tilt the visualization using the left mouse button, pan using the right mouse button, and zoom using the mouse wheel. I found that Firefox used around 1.6 GB of RAM to render this example.

5. Share your visualization

In the browser window, you will see where Qgis2threejs stored the html and associated Javascript files. To share your visualization, you just need to copy these files onto a webserver.

I would love to see what you come up with. Please share a link in the comments.

41 comments
  1. vivek kanwar said:

    Can you provide me the link of datasets used in this exercise or send these data layers on my email kanwar_1987@yahoo.co.in , so that i can try it on my system.

    • All available datasets are linked under “1. The data”.

  2. Antonina said:

    How can I install this plugin? Thank you

    • Like any other plugin: just install in the plugin manager.

  4. Everything is cool until the error messages start coming up. I’ll do some more exploration and post my take on the subject. Thanks Anita, this could be a great tool.

    • Please report issues to the plugin author so they can be fixed. I also noticed some errors but couldn’t reproduce them a second time.

  5. Pretty cool stuff, I like it !

  7. If QGIS is closed, HTML file will not display content in browsers. Is it possible to display 3D content in html file without QGIS software???

    • I cannot confirm this problem. If you click on the link to the interactive version in the post, the 3D content is display independent of whether you have QGIS running or not.

      • Hi, Thankyou for reply. You are true., but my html file content is not displaying if i close QGIS. Is there any post processing is required to display the contents of html without QGIS?

  8. Gideon said:

    Great hint! This plugin is just awesome. Especially the latest update made it even more interesting.
    I tried to use the plugin to visualize the relation between a non-DEM raster set and vector data. This is my outcome:
    http://kartenmaler.blogspot.com/2014/04/liquid-wealth.html
    I am still a little bit concerned whether I made any major mistakes in my assumptions.

    • Hi Gideon,
      I really like your approach to this topic! Concerning the final visualization: For me, it feels like the elevation is a bit too exaggerated. It looks very jagged now. Also, when first looking at it, the visualization of the areas with little rain actually looked like rain clouds to me. So my initial interpretation – without reading the text – would have been exactly reversed.

      • Gideon said:

        Thank you for the feedback! Now that you are mentioning it, I can only agree! I’ll put more attention about the reader’s interpretation in my next projects! Go on with your inspiring blog!

  9. Olivier R. said:

    great plugin! it is so eay to handle it and generate a model. Thanks for the hint

    • Olivier R. said:

      I download a raster from srtm http://srtm.csi.cgiar.org/ but how I can render the raster in 3D without the elevation data (not provided from this website)? I reprojected the raster to the google projection (epsg:900913) and I created a raster hillshade from this reprojected raster.

  10. olivier said:

    I finally did it with an orthophoto from the IGN (NAtional geographic french agency): http://img42.com/rcYuj
    the location is in the Alpes Area.

  11. Cécile Nov said:

    Wow, this is great! Thanks a lot for sharing this!

  12. Leah said:

    hi there — how did you create such nice edges on your model? mine looks very “tall”. i tried to adjust the vertical exaggeration but still couldn’t get rid of the tall “sides”. any ideas how to fix this? The “sides and frame options for the DEM don’t seem to do anything. i’m running QGIS Valmiera. http://neoninc.org/leah_test/3d/SJER_DSM_3d.html

    • Leah said:

      ok – i figured it out! it had to do with the map canvas size!! what a great plugin :)

    • My first guess would be that the raster CRS is in degrees while your elevation values are in meters/miles. That would create jagged results if you use a z-factor of 1.

  15. daniel said:

    Excuse my ignorance Anita, but specifically which “associated Javascript files” (to share the visualization copy these files onto a webserver.) The numeric titled .html and numeric .js OR CustomPlane.js etc?
    Thanks from daniel

    • For the example above, I uploaded a TrackballControls.js, three.min.js, and a js file with a name which looks like a timestamp.

  16. daniel said:

    Thanks Anita!
    -d

  17. Ferran Ferrer said:

    Hi, Anita.
    I’m trying to replicate the ArcScene behaviour with this pluggin and trying to overlay another raster surface (flow accumulation) over the dem. Arcscene layers can adjust all to a common dem using same ‘Base Heights’ parameter. But seems that you can’t use the same raster elevation for different dems.
    Do you have an idea of how to?
    For grass, where I did Flow accumulation with r.watershed didn’t efiind the Nviz complement.

    Thanks, Ferran

    • Can you provide an example? Do you want to drape the second raster over the DEM or do you want to add them up?

      • Ferran Ferrer said:

        Thanks for answering so fast.
        Here is an example:

        Exactly the dem is a roof and the raster draped over the dem is flow accumulation.
        This is done using arcscene, I’m trying to replicate in Qgis.

  18. Ferran Ferrer said:

    Other sample,

    • To me, that looks exactly like the use case I presented in Publishing interactive web maps using QGIS: DEM + aerial image on top. So you want to put the flow accumulation raster instead of an aerial image? Just prepare the map of the flow accumulation layer, then configure the DEM in QGIS2threejs. Make sure that the display type “map canvas overlay” is enabled in the DEM settings.

      Make sure that you are using the latest version of the plugin.

  19. Ferran Ferrer said:

    You are right,

    How can the settings reinitiate?
    When I open again they shows the same layers and can’t delete it.
    I can control through map display.

    Thanks for the help!

    • I don’t know about that. Maybe best to ask the plugin author.

  20. Ferran Ferrer said:

    Before I do just thinking a little, not much, I found that is controled by QGis map canvas, if you eliminate a layer this disappear when you update, close and open again the pluggin in a Qgis map project.
    Thanks again

  21. I have used ArcScene in the past, so I am also keen to recreate the behaviour I am familiar with. I can get a 3D image of raster overlaying a DEM [Landsat 7 on top of 1-arsecond SRTM for the UK] and it looks very nice. When I try to overlay a vector layer [such as rivers [lines] or World Heritage Sites (points)], I get ‘writing DEM’ and then ‘writing vector layer’, and the progress bar stays at 30% until it finally crashes. This happens even with simple shapefiles.

    • Overlaying vector layers works fine for me. Please get in touch with the plugin developer. The best approach usually is to open a ticket on the plugin bug tracker and include some test data to reproduce the issue.

  22. Boycey said:

    Hi, great post as always, thanks for helping access the great opportunities this plug in presents.

    What has managed to elude me is point 5. I’ve put my output files on my server and pointed an iframe at the html and just get a blank frame.

    Any chance of getting some more detailed advice on how to display the output on a blog?

    • I haven’t tried embedding the visualization in an iframe. You could ask on the QGIS user mailing list or on a web development forum.