Customizing Qgis2threejs Code

I have received a few e-mails about customizing the output from the cool Qgis2threejs plugin, created by Minoru Akagi.  The QGIS plugin allows for the creation of a 3D map that can be placed in a website or run off your computer's web browser, without having to install any additional software.

The plugin has been improved and enhanced since my original post on Manhattan and follow-up post.  The best part is that the code is well annotated and easy to follow, so you do not need to be a coding expert to make some neat and fun changes!

In this post, I open up a few of the different file types, edit a few values, and show the results.  I will also briefly talk about some of the plugins newer options, including labels!  What mapper does not love to be able to add labels...and labels for 3D!  Neat stuff!!

Saving the Plugin's Output

At the bottom of the plugin, you will see a white box that allows you to browse to a location to store the output.  Selecting a location, several files will be output instead of being stored in a temporary folder.

Results are easy to export to a folder destination of your choosing.

Starting view: Before changing the code

Starting view from the plugin (before any changes to code)

HTML File:  Camera and Controls

First, I will edit the starting position of the camera.  The three values for the camera.position.set are X,Y, and Z values.

Original:

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  camera.position.set(0, -100, 100);

Changed to:

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  camera.position.set(0, 0, 75);

Result from changing the camera position - now overhead view and close-up.

Qgis2threejs.css: Changing the starting background gradient

Many websites will tell you the color codes to build a new color gradient.  Here, I changed the nice default blue gradient to a burnt orange sky.

Original:

#webgl { background: linear-gradient(to bottom, #98c8f6 0%,#cbebff 40%,#f0f9ff 100%); }

Changed to:

#webgl { background: linear-gradient(to bottom, #FF350D 0%,#FF8B3D 40%,#EFBBAE 100%); }

Changing the starting background color is easy to do too!

Within QGIS and the plugin, there are a few basic background options as well, such as making it a solid color.

Additional new features

A number of improvements have been made to the plugin, which is also easier to use.  You can add multiple types of GIS files.  You can also label attributes on your 3D map, although there is a cost to performance.  Labeling lots of features will grind your map to a halt.

Labels can be added now, in this case roof heights