Qgis2threejs Plugin Document

Release 2.7

Minoru Akagi

Sep 30, 2022

 Contents

1 Examples 3

2 Tutorial 5

3 Exporter 11

4 Object Types 27

5 Web Viewer Templates 39

6 Export Scenes using Processing Algorithm 41

7 Export Scenes Programmatically using Python 45

8 Development 47

Index 49

i
ii
 Qgis2threejs Plugin Document, Release 2.7

Qgis2threejs plugin is a QGIS plugin, which visualizes DEM data and vector data in 3D on a web view. You can build
various kinds of 3D objects and generate files for web publishing in simple procedure. In addition, you can save the
3D model in glTF format for 3DCG or 3D printing.
Table Of Contents:

Contents 1
Qgis2threejs Plugin Document, Release 2.7

2 Contents
 CHAPTER 1

Examples

• Kibi-ji Cycling: Animation and narrative box

Sources: Geospatial Information Authority of Japan. GSI Tiles (dem, ort, relief)
• Mt. Fuji: Shaded relief map made with SRTM3 data

3
Qgis2threejs Plugin Document, Release 2.7

Source: U.S. NASA and NGA. SRTM elevation data (SRTM V2.1. Filled small voids using gdal_fillnodata.py)
• Forest Basins: Slope map

Sources: Geospatial Information Authority of Japan. 5m DEM of Fundamental Geospatial Data and GSI Tiles
(ort)

4 Chapter 1. Examples
 CHAPTER 2

Tutorial

Let’s start using Qgis2threejs plugin!

2.1 Install the plugin

Open the Plugin Manager (Plugins > Manage and Install Plugins...) and install Qgis2threejs plugin.

Hint: Need help? See the 9.1. Installing and Managing Plugins section of the QGIS training manual.

2.2 Obtain elevation data

If you already have raster DEM data, you can skip this step.
NASA published elevation data generated from NASA’s Shuttle Radar Topography Mission digital topographic data.
We can use the data freely. SRTM elevation data can be downloaded from the EarthExplorer (User registration re-
quired).

2.3 Load DEM data

2.4 CRS setting

Horizontal unit of SRTM data is degree, whereas vertical unit is meter. For appropriate visualization, you need to
transform the DEM data to a projected CRS. QGIS can perform the CRS transformation on the fly.
So, let’s change the current project CRS to a projected CRS.

5
Qgis2threejs Plugin Document, Release 2.7

Click the CRS status icon in the bottom-right corner of the window to open the project properties dialog, and then
select a suitable CRS for the DEM extent. If you don’t know which CRS is best suited, select the Spherical Mercator
projection (EPSG:3857), which is adopted by many web maps.

Note: In the Spherical Mercator projection, every feature size is horizontally larger than actual size except those of
features on the equator. At latitude 40 degrees it is enlarged 1.3 times, at 60 degrees enlarged twice.

2.5 Layer styling

Open the Layer Properties dialog for the DEM layer and colorize the DEM layer richly.
An example (Singleband pseudocolor render type and inverted BrBG color map):

2.6 Open the Exporter

Zoom to a part of the DEM layer extent as the map canvas is filled by the colorized DEM layer, and then click the

plugin icon in the web toolbar to open the Qgis2threejs exporter.

There is Layers panel and Animation panel on the left side of the window.
The Layers panel shows the map layers in the current QGIS project that can be added to the 3D scene. Layer items
are grouped by type. DEM layer group has 1-band raster layers in current QGIS project and a Flat Plane (a flat plane
at an altitude). Multi-band raster layers and raster layers loaded using a provider other than GDAL provider are not
available. Additional flat planes can be added from Scene - Add Layer menu.

6 Chapter 2. Tutorial
 Qgis2threejs Plugin Document, Release 2.7

There is a preview on the right side. The scene doesn’t contain any 3D objects now.
Let’s add the DEM layer into the scene. Just click the checkbox on the left of the DEM layer under the DEM layer
group.

A 3D terrain object with map canvas image draped on it shows up in the preview.

2.7 Add another texture to DEM

2.8 Export the scene to Web

Click on the File - Export to Web... menu entry to open this dialog.

2.7. Add another texture to DEM 7

Qgis2threejs Plugin Document, Release 2.7

Select a directory to export the scene, check Enable the Viewer to Run Locally option and press
Export button.

Note: Most web browsers do not allow loading data files on local file system via Ajax. With Enable the Viewer
to Run Locally option the plugin outputs geometry and image data into a js file.

8 Chapter 2. Tutorial
 Qgis2threejs Plugin Document, Release 2.7

Open the .html file with a web browser. You can see exported scene in web browser.

2.8. Export the scene to Web 9

Qgis2threejs Plugin Document, Release 2.7

You can publish the exported 3D viewer application and data just by uploading the output folder to a web hosting
service such as Netlify and GitHub Pages.

Note: Please do not forget to ensure that you comply with the Terms and use for the data before publishing the data
to the web.

2.9 Animation and narratives

2.10 In conclusion

Tutorial is over. Now you know 3D visualization with QGIS is very easy. If you can use high-quality data, you can
create beautiful 3D scenes!

Tip: Next, how about adding a background map layer to the map canvas. You can do it easily with QuickMapServices
plugin. Also, how about adding vector data to the scene. Object Types page has images of various object types. See
Exporter for the detail.

10 Chapter 2. Tutorial
 CHAPTER 3

Exporter

Contents

• Window
• Scene Settings
• Camera Settings
• Controls Settings
• Widgets
• DEM Layer Settings
• Vector Layer Settings
• Point Cloud Layer Settings
• Animation
• Export to Web Dialog
• Exporter Settings

3.1 Window

Qgis2threejs exporter window has Layers panel and Animation panel on the left side, and preview on the right side.

11
Qgis2threejs Plugin Document, Release 2.7

In this plugin, the word “export settings” means all configuration settings for a 3D scene and its viewer application,
which consist of settings for scene, camera, every layer to export, animation, widgets on web page and so on. You can
configure them via Scene menu, Layers panel, Animation panel, View menu and Export to Web dialog.
In the Layers panel, each layer item has a checkbox on its left. Check the checkbox to add the layer to current
scene. To open layer properties dialog and configure settings for the layer, double-click on the layer item or click on
Properties. . . from context menu (right click menu).
Export settings are automatically saved to a .qto3settings file alongside the current QGIS project file if you are
working with a QGIS project file. When you open the exporter later, the export settings of the project will be restored.
If you don’t want to use preview, uncheck Preview checkbox in the lower right corner of the window. You might want
to uncheck it to avoid waiting for updating 3D objects in the scene for each export settings update.

3.1.1 Menu

• File
– Export to Web. . . Exports files for publishing current scene to web. See Export to Web Dialog section.
– Save Scene As

* Image (.png). . . Saves rendered scene image to a PNG file.

* glTF (.gltf,.glb). . . Saves 3D model of current scene in glTF format.
– Export Settings

* Load. . .
* Save. . .

12 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

* Clear. . . Clears current export settings.

– Exporter Settings. . . Opens Exporter Settings dialog. See Exporter Settings Dialog
– Close Closes Qgis2threejs Exporter.
• Scene
– Scene Settings. . . Opens Scene settings dialog. See Scene Settings section.
– Add Layer

* Add Flat Plane

* Add Point Cloud Layer. . .
– Reload (F5) Reloads current scene.
• View
– Camera Changes the camera. See Camera Settings section.
– Widgets Configures widgets to be place on web page, such as Navigation widget, North arrow and footer
label. See Widgets section.
– Reset Camera Position (Shift+R) Returns to the initial camera position and resets its focal point to the
initial point.
• Window
– Panels

* Layers Toggles Layers panel visibility.

* Animation Toggles Animation panel visibility.
* Console Toggles Console panel visibility. Console panel displays information for debugging, mainly
JavaScript side information. Python side debug information is logged to log messages panel in
QGIS window. You can enter JavaScript statements and execute them.
– Always on Top Brings the exporter window to front of all other application windows.
• Help
– Usage of 3D Viewer
– Help Contents Opens the plugin document in default browser. Internet connection is required.
– Plugin Homepage Opens the plugin homepage in default browser. Internet connection is required.
– Send Feedback Opens the plugin issue tracking system in default browser. Internet connection is required.
– About Qgis2threejs Plugin. . . Displays the plugin version you are using.

3.2 Scene Settings

Scene settings dialog controls some basic configuration settings for current scene. Click on Scene - Scene
Settings... menu entry to open the dialog.

3.2. Scene Settings 13

Qgis2threejs Plugin Document, Release 2.7

• World Coordinates
– Origin of xy-plane
Center of base extent Origin of map coordinate system
– Z exaggeration
Vertical exaggeration factor. This value affects terrain shape and z positions of all vector 3D
objects. This also affects 3D object height of some object types with volume. Shape types to be
affected:
Point : Cylinder, Cube, Cone
Polygon : Extruded
The following shape types have volume, but their heights aren’t affected by this factor:
Point : Sphere
Line : Pipe, Cone, Box
The default value is 1.0.
• Base Extent
– Use map canvas extent
– Fixed extent
– Fix aspect ratio to 1:1 Checked by default since version 2.7.
• Background
Select either sky-like gradient or a solid color for the scene background. Default is Sky.
• Display of coordinates
If the Latitude and longitude (WGS84) option is selected, coordinates of clicked position
on a 3D object are displayed in longitude and latitude (WGS84). If Proj4js doesn’t support current
map CRS, this option is disabled.

14 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

• Light Directional light from the lower left of the 2D map Point light above
the camera
• Fog Color and density.
• Material & Effect
– Basic material type
Material type applied to most 3D objects, except for Point, Billboard, Model File and Line type
objects. Select a material type from Lambert material, Phong material and Toon material. Default
is Lambert material.
– Enable outline effect

3.3 Camera Settings

• Perspective Camera
Renders closer objects as bigger and farther objects as smaller.
• Orthographic Camera
Rendered object size doesn’t depend on the distance from the camera.

3.3. Camera Settings 15

Qgis2threejs Plugin Document, Release 2.7

Perspective camera Orthographic camera

3.4 Controls Settings

OrbitControls is available.

Ctrl Mouse / Keys Touch

Orbit Left mouse One-finger move
Zoom Middle mouse, or mousewheel Two-finger spread or squish
Pan Right mouse, or left mouse + ctrl/metaKey, or arrow keys Two-finger move

3.5 Widgets

• Navigation widget
• North arrow
Adds an arrow that indicates the direction of grid North at the lower-left corner of the web page.
• Header/Footer label
Adds a header label to top-left corner of the web page and/or a footer label to lower-left corner. Label
text can contain valid HTML tags for styling.

16 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

3.6 DEM Layer Settings

3.6.1 Geometry

• Resampling level
Select a DEM resolution from several levels. This resolution is used to resample the DEM, but is not
for texture.
• Clip DEM with polygon layer
Clips the DEM with a polygon layer. If you have a polygon layer that represents the area that elevation
data exist or represents drainage basins, you might want to use this option.

3.6.2 Material

The material list has one item map (canvas) by default. You can add a material to the list by clicking + button,
selecting one of Select layer(s), Image file, Solid color and Map canvas layers.
• Map canvas layers
Render a texture image with the current map settings for each DEM block.
• Layer image(s)
Render a texture image with the selected layer(s) for each DEM block.
• Image file
Textures the main DEM block with existing image file such as PNG file and JPEG file. TIFF is not
supported by some browser. See Image format support for details.
• Solid color
To select a color, press the button on the right side.
• Image width (px)
Select width of image draped on each DEM block. Default value is 1024.

3.6. DEM Layer Settings 17

Qgis2threejs Plugin Document, Release 2.7

• Opaciy
Sets opacity of DEM object. 100 is opaque, and 0 is transparent.
• Transparent background
When map canvas image or layer image is chosen
Makes image background transparent.
• Enable shading
Adds a shading effect to DEM surface. Checked by default.

3.6.3 Tiles

• Tiles
This option enlarges output DEM by placing DEM blocks around the main block of the map canvas
extent. Size can be selected from odd numbers in the range of 3 to 9. If you select 3, total 9 (=3x3)
blocks (a center block and 8 surrounding blocks) are output. Roughness can be selected from powers
of 2 in the range of 1 to 64. If you select 2, grid point spacing of each surrounding block is doubled.
It means that the number of grid points in the same area becomes 1/4.

3.6.4 Other Options

• Build sides
This option adds sides and bottom to each DEM block. The z position of bottom in the 3D world is
fixed. You can adjust the height of sides by changing the value of vertical shift option in the World
panel. If you want to change color, edit the output JS file directly.
• Add edge lines
This option adds frame to the DEM. If you want to change color, edit the output JS file directly.
• Add quad wireframe
• Name
• Visible on Load

18 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

Whether the layer is visible on page load or not.

• Clickable

3.7 Vector Layer Settings

Vector layers are grouped into three types: Point, Line and Polygon. Common settings for all types:
• Type
Select a shape type.
• Z coordinate
– Altitude Mode

* Absolute
Altitude is distance above zero-level.

* Relative to (a DEM layer)

Altitude is distance above surface of selected DEM.
– Altitude
You can use an expression to define altitude of objects above zero-level or surface of selected
DEM layer. This means that object altitude can be defined using field values. The unit is that of
the map CRS.

* Expression
A numeric value, field or more complex expression (QGIS expressions).

* Z value / M value
Uses z coordinate or m value of each vertex. the evaluated value is added to it.
These options can be chosen when the layer geometries have z coordinates or m values.
Cannot be chosen when the object type is Extruded or Overlay.
• Geometry and Material

3.7. Vector Layer Settings 19

Qgis2threejs Plugin Document, Release 2.7

Usually, there are options to set object color and transparency. Refer to the links below for each
object type specific settings. The unit of value for object size is that of the map CRS.
• Feature
Select the features to be exported.
– All features
All features of the layer are exported.
– Features that intersect with map canvas extent
Features on the map canvas are exported.

* Clip geometries
This option is available with Line/Polygon layer. If checked, geometries are
clipped by the extent of map canvas.
• Attributes
If the export attributes option is checked, attributes are exported with feature geometries. Attributes
are displayed when you click an object on web browser.

• Labels
This combo box is not available when layer type is line.
– Show labels a label is displayed above each object.
– Position
– Text
– Fill background
– Connector

20 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

• Others
– Name
– Visible on Load
Whether the layer is visible on page load or not.
– Clickable

3.7.1 Point

Point layers in the project are listed as the child items. The following shape types are available:
Sphere, Cylinder, Cone, Box, Disk, Plane, Model File
See Point Layer section in Object Types page for each object type specific settings.

3.7.2 Line

Line layers in the project are listed as the child items. The following shape types are available:
Line, Pipe, Cone, Box, Wall
See Line Layer section in Object Types page for each object type specific settings.

3.7.3 Polygon

Polygon layers in the project are listed as the child items. The following shape types are available:
Polygon, Extruded, Overlay
See Polygon Layer section in Object Types page for each object type specific settings.

3.7. Vector Layer Settings 21

Qgis2threejs Plugin Document, Release 2.7

3.8 Point Cloud Layer Settings

• Information
• Material
– Color type
– Opacity
• Other options * Name * Show bounding boxes * Visible on load * Clickable

3.9 Animation

3.9.1 Animation panel

• Camera Motion
Group and keyframe item.
• Layer
– Texture change
– Growing line
– Change opacity
• Tween

22 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

3.9.2 Keyframe dialog

3.9. Animation 23
Qgis2threejs Plugin Document, Release 2.7

3.10 Export to Web Dialog

• Output directory and HTML Filename

Select output HTML file path. Usually, a js file with the same file title that contains whole data of
geometries and images is output into the same directory, and some JavaScript library files are copied
into the directory. Leave this empty to output into temporary directory. Temporary files are removed
when you close the QGIS application.
• Page title
• Preserve the Current Viewpoint
If checked, the current viewpoint of the preview is used as initial viewpoint.
• Enable the Viewer to Run Locally
If checked, export all scene data to a .js file to avoid web browser’s same origin policy security restrictions. You
can view the exported scene without uploading it to a web server, although the total file size will increase and it
will take longer to load.
• Template
Select a template from available templates:
– 3DViewer
This template is a 3D viewer without any additional UI library.
– 3DViewer(dat-gui)
This template has a dat-gui panel, which makes it possible to toggle layer visibility,
adjust layer opacity and add a horizontal plane movable in the vertical direction.
– Mobile
This is a template for mobile devices, which has mobile friendly GUI, device orientation
controls and AR feature. In order to use the AR feature (Camera and GPS), you need to
upload exported files to a web server that supports SSL.

24 Chapter 3. Exporter
 Qgis2threejs Plugin Document, Release 2.7

* Magnetic North Direction Magnetic North direction clockwise from the upper di-
rection of the map, in degrees. This value will be set to 0 if map canvas is rotated
so that magnetic North direction is same as the map upper direction. Otherwise,
the value should be determined taking account of grid magnetic angle (angle be-
tween grid North and magnetic North) and map rotation. Used to determine device
camera direction.
• Animation and Narrative
– Start animation once the scene has been loaded
• Export button
Exporting starts when you press the Export button. When the exporting has been done and Open
exported page in web browser option is checked, the exported page is opened in default web browser
(or a web browser specified in Exporter Settings).

3.11 Exporter Settings

• Web browser path

If you want to run the exported viewer with a web browser other than the default browser, enter path
to the web browser in this input box. See Browser Support wiki page.
• Optional Features
See Plugins wiki page.

3.11. Exporter Settings 25

Qgis2threejs Plugin Document, Release 2.7

26 Chapter 3. Exporter
 CHAPTER 4

Object Types

• Point Layer
• Line Layer
• Polygon Layer

4.1 Point Layer

Sphere | Cylinder | Cone | Box | Disk | Plane | Point | Billboard | Model File

4.1.1 Sphere

Sphere with specified radius, color and opacity

27
Qgis2threejs Plugin Document, Release 2.7

Specific settings :
• Radius Numerical value.
Origin :
center of sphere
three.js geometry class:
SphereBufferGeoemtry

4.1.2 Cylinder

Cylinder with specified radius, height, color and opacity

Specific settings :
• Radius Numerical value.
• Height Numerical value.
Origin :

28 Chapter 4. Object Types

 Qgis2threejs Plugin Document, Release 2.7

center of bottom (if height > 0)

three.js geometry class:
CylinderBufferGeometry

4.1.3 Cone

Cone with specified radius, height, color and opacity

Specific settings :
• Radius Numerical value.
• Height Numerical value.
Origin :
center of bottom (if height > 0)
three.js geometry class:
CylinderBufferGeometry

4.1.4 Box

Box with specified width, depth, height, color and opacity

4.1. Point Layer 29

Qgis2threejs Plugin Document, Release 2.7

Specific settings :
• Width Numerical value.
• Depth Numerical value.
• Height Numerical value.
Origin :
center of bottom (if height > 0)
three.js geometry class:
BoxBufferGeometry

4.1.5 Disk

Disk with specified radius, orientation, color and opacity

Specific settings :
• Radius Numerical value.

30 Chapter 4. Object Types

 Qgis2threejs Plugin Document, Release 2.7

• Dip Numerical value in degrees. See Strike and dip - Wikipedia.

• Dip direction Numerical value in degrees.
Origin :
center of disk
three.js geometry class:
CircleBufferGeometry

4.1.6 Plane

Plane with specified length, width, orientation, color and opacity

Specific settings :
• Width Numerical value.
• Length Numerical value.
• Dip Numerical value in degrees. See Strike and dip - Wikipedia.
• Dip direction Numerical value in degrees.
Origin :
center of plane
three.js geometry class:
PlaneBufferGeometry

4.1. Point Layer 31

Qgis2threejs Plugin Document, Release 2.7

4.1.7 Point

Specific settings :
• Radius Numerical value.
Origin :
center of sprite
three.js geometry class:
SphereBufferGeoemtry

4.1.8 Billboard

Image which always faces towards the camera. When an image file on local file system is specified, the image file is
copied to the export destination. When an image file on a web server is specified, the model file is not copied.

Specific settings :
• Image file File path or URL.

32 Chapter 4. Object Types

 Qgis2threejs Plugin Document, Release 2.7

• Scale Numerical value.

Origin :
center of sprite
three.js object class:
Sprite

4.1.9 Model File

Load 3D model from supported format model file. COLLADA (*.dae) and glTF (*.gltf, *.glb) are sup-
ported. When a model file on local file system is specified, the model file is copied to the export destination. You need
to copy the relevant files such as texture image after export. When a model file URL is specified, the model file is not
copied.

Specific settings :
• Model file File path or URL.
• Scale Numerical value.
• Rotation (x) Numerical value in degrees.
• Rotation (y) Numerical value in degrees.
• Rotation (z) Numerical value in degrees.
• Rotation Order The options are XYZ, YZX, ZXY, XZY, YXZ and ZYX. See Euler - three.js docs.
Origin :
origin of model

4.2 Line Layer

Line | Pipe | Cone | Box | Wall

4.2. Line Layer 33

Qgis2threejs Plugin Document, Release 2.7

4.2.1 Line

Specific settings :
no specific settings
three.js object class:
Line
Image was created with GSI Tiles (ort, dem).

4.2.2 Pipe

Places a cylinder to each line segment and a sphere to each vertex.

Specific settings :
• Radius Numerical value.
three.js geometry classes:
CylinderBufferGeometry and SphereBufferGeoemtry

34 Chapter 4. Object Types

 Qgis2threejs Plugin Document, Release 2.7

Image was created with GSI Tiles (airphoto, dem).

4.2.3 Cone

Places a cone to each line segment. Heading of cone is forward direction.

Specific settings :
• Radius Numerical value.
three.js geometry class:
CylinderBufferGeometry
Image was created with GSI Tiles (ort, dem) and National Land Numerical Information (Rivers. MILT of Japan).

4.2.4 Box

Places a box to each line segment.

Specific settings :

4.2. Line Layer 35

Qgis2threejs Plugin Document, Release 2.7

• Width Numerical value.

• Height Numerical value.
three.js geometry class:
BoxGeometry
Image was created with GSI Tiles (airphoto, dem).

4.2.5 Wall

Makes a vertical wall under each line segment.

Specific settings :
• Other side Z Z coordinate of the other side edge.
Image was created with SRTM3 elevation data.

4.3 Polygon Layer

Polygon | Extruded | Overlay

36 Chapter 4. Object Types

 Qgis2threejs Plugin Document, Release 2.7

4.3.1 Polygon

Specific settings :

4.3.2 Extruded

Extruded polygon with specified height, color and opacity

Specific settings :
• Height Numerical value.
Image was created with GSI Tiles (ort, dem) and OpenStreetMap (© OpenStreetMap contributors, License).

4.3.3 Overlay

Overlay polygon draped on the main DEM with specified color, border color and opacity. When the altitude mode
is Relative to DEM layer, each polygon is located at the relative height from the DEM surface. Otherwise,
creates a flat polygon at specified altitude.

4.3. Polygon Layer 37

Qgis2threejs Plugin Document, Release 2.7

Specific settings :
• Border No border, feature style, random color or expression.
Image was created with GSI Tiles (ort, dem) and National Land Numerical Information (Sediment Disaster Hazard
Area. Provided by Okayama prefecture, Japan).

38 Chapter 4. Object Types

 CHAPTER 5

Web Viewer Templates

In Export to Web dialog, you can choose one from following available web viewer templates:
• 3D Viewer Template
• 3D Viewer(dat-gui) Template
• Mobile Template

5.1 Common Functions

There is a list of mouse/keyboard controls in about box. Press I key to show the box.

5.1.1 Identifying Features

When you click on a 3D object, layer name that the object belongs to and the clicked coordinates (in order of x, y,
z) are displayed. If Latitude and longitude (WGS84) option in World Settings is selected, longitude and
latitude are in DMS format (degrees, minutes and seconds). If Export attributes option of each vector layer is
selected, attribute values of the clicked feature follows them.

5.1.2 Rotate Animation (Orbiting)

Pressing R key starts/stops rotate animation. Camera rotates around the camera target clockwise.

5.1.3 Save Image

Press Shift + S to show save image dialog, then enter image size and click the OK button. In addition, with some
web browsers, you need to click a link to save image. The image file format is PNG. To change label color and/or
adjust label size, edit Qgis2threejs.css (print-label class).

39
Qgis2threejs Plugin Document, Release 2.7

Note: A known issue: Wrong image output if the size is too large (issue #42)

5.1.4 URL Parameters

You can get current view URL in the about box, and later restore the view by entering the URL in the URL box of web
browser.
Parameters used in view URL:
• cx, cy, cz: camera position
• tx, ty, tz: camera target
For example, file:///D:/example.html#cx=-64.8428840144039&cy=-40.75234765087484&cz=24.603200058346065
Other parameters:
• width: canvas width (pixels)
• height: canvas height (pixels)
• popup: pop up another window with specified width and height

5.2 3D Viewer Template

This template is a simple 3D viewer. Ragardless of “Visible on load” layer setting, all exported layers are displayed
on page load.

5.3 3D Viewer(dat-gui) Template

This template has a dat-gui panel, which allows changing layer visibility and opacity, and adding a horizontal plane.

5.3.1 Controls Box

The controls box has:

• layer sub menus
Each sub menu has:
– a check box to toggle layer visibility
– a slider to change layer opacity
• sub menu to control a vertically movable plane
• help button to show the about box

5.4 Mobile Template

This is a template for mobile devices, which has mobile friendly GUI and experimental AR feature. In order to use
the AR feature (Camera and GPS), you need to upload exported files to a web server supporting SSL.

40 Chapter 5. Web Viewer Templates

 CHAPTER 6

Export Scenes using Processing Algorithm

Do you want to export many scenes as web pages, image files or 3D model files? You can do them using Qgis2threejs
algorithms in Processing tool box. Qgis2threejs provides three algorithms - “Export as Web Page”, “Export as Image”
and “Export as 3D Model”.

6.1 Step 1

Add a DEM layer that covers the whole area you are going to export, a vector layer to point out area of interest for
each scene and any other layers to project. The vector layer is called as coverage layer and should have title field that
contains string used as title of file to export.

6.2 Step 2

Open Qgis2threejs exporter and set up a scene.

6.3 Step 3

1. Open one of the Qgis2threejs algorithms from Processing toolbox.

2. Select the coverage layer and the title field, and configure other parameters. Coverage layer must be visible in
QGIS project when “Current Feature Filter” option is checked.
3. Click on Run button.
|processing_export_web_dialog|

41
Qgis2threejs Plugin Document, Release 2.7

6.4 Algorithm Parameters

6.4.1 Common Parameters

• Coverage Layer
A vector layer. Creates and exports scenes focused on each feature of this layer.
• Title Field
A field that contains string used as title of file to export.
• Current Feature Filter
Hides coverage layer features other than currently focused feature from texture image to be rendered.
• Output Directory
Path to output directory.
Advanced Parameters
• Scale Mode
– Fit to Geometry
Zoom to current feature geometry.
– Fixed scale (based on map canvas)
Use current map canvas scale.
• Buffer (%)
Default value is 10.
• Texture base width (px)
Default value is 1024.
• Texture base height (px)
In “Fit to Geometry” scale mode, leave this zero to respect aspect ratio of buffered geometry bounding
box. In “Fixed scale” scale mode, aspect ratio of map canvas size is respected when this is set to zero.
Default value is 0.
• Header Label
An expression which represents header label in HTML.
• Footer Label
An expression which represents footer label in HTML.
• Export Settings File (.qto3settings)
Optional. Path to export settings file. Leave this empty to use current export settings.

6.4.2 Export as Web Page

• Template
Select one of web page templates. See Export to Web Dialog in Exporter page and Web Viewer
Templates.

42 Chapter 6. Export Scenes using Processing Algorithm

 Qgis2threejs Plugin Document, Release 2.7

6.4.3 Export as Image

• Image width
Output image width in pixel. Default value is 2480.
• Image height
Output image height in pixel. Default value is 1748.

6.4.4 Export as 3D Model

No specific settings.

6.4. Algorithm Parameters 43

Qgis2threejs Plugin Document, Release 2.7

44 Chapter 6. Export Scenes using Processing Algorithm

 CHAPTER 7

Export Scenes Programmatically using Python

You can also export many scenes programmatically using Python!

7.1 Step 1

You need to prepare an export settings file. The export settings contains various settings, so you might want to create
the settings file using the Qgis2threejs exporter.
1. Open a QGIS project and click the Qgis2threejs icon in the web tool bar to open the Qgis2threejs exporter.
2. Add layers to scene, configure their settings, scene settings and decorations.
3. Click on the File - Export Settings - Save... menu entry, and then select a filename to save the
export settings (file extension is .qto3settings).

7.2 Step 2

You are ready to play with Python. Let’s open the QGIS Python console.
from PyQt5.QtCore import QSize
from Qgis2threejs.export import ThreeJSExporter, ImageExporter # or ModelExporter
from Qgis2threejs.mapextent import MapExtent

# texture base size

TEX_WIDTH, TEX_HEIGHT = (1024, 1024)

path_to_settings = None # path to .qto3settings file

# get map settings from current map canvas

mapSettings = iface.mapCanvas().mapSettings()

# extent to export
(continues on next page)

45
Qgis2threejs Plugin Document, Release 2.7

(continued from previous page)

center = mapSettings.extent().center()
width = mapSettings.extent().width()
height = width * TEX_HEIGHT / TEX_WIDTH
rotation = 0

# apply the above extent to map settings

MapExtent(center, width, height, rotation).toMapSettings(mapSettings)

# texture base size

mapSettings.setOutputSize(QSize(TEX_WIDTH, TEX_HEIGHT))

#
# 1. export scene as web page
#

filename = "D:/export/html_filename.html"

exporter = ThreeJSExporter()
exporter.loadSettings(path_to_settings) # export settings (for scene, layers,
˓→decorations and so on)

exporter.setMapSettings(mapSettings) # extent, texture size, layers to be

˓→rendered and so on

exporter.export(filename)

#
# 2. export scene as image
#

filename = "D:/export/image_filename.png"

# camera position and camera target in world coordinate system (z-up)

CAMERA = {"pos": {"x": -50, "y": 50, "z": 30}, # above left front of DEM block
"lookAt": {"x": 0, "y": 0, "z": 0}}

exporter = ImageExporter()
exporter.loadSettings(path_to_settings)
exporter.setMapSettings(mapSettings)

exporter.initWebPage(1024, 768) # output image size

exporter.export(filename, cameraState=CAMERA)

46 Chapter 7. Export Scenes Programmatically using Python

 CHAPTER 8

Development

This plugin is now being developed personally by Minoru Akagi, and received many contributions.
Many thanks to all the contributors! Thanks also to bug reporters and everyone who gave me constructive suggestions!
Source Code: https://github.com/minorua/Qgis2threejs/
Issue Tracker: https://github.com/minorua/Qgis2threejs/issues

47
Qgis2threejs Plugin Document, Release 2.7

48 Chapter 8. Development
 Index

B
Billboard, 32
Box (Line Layer), 35
Box (Point Layer), 29

C
Cone (Line Layer), 35
Cone (Point Layer), 29
Cylinder, 28

D
Disk, 30

E
Extruded, 37

L
Line, 33

M
Model-File, 33

O
Overlay, 37

P
Pipe, 34
Plane, 31
Point, 31
Polygon, 36

S
Sphere, 27

W
Wall, 36

49