CanvasMap
Getting Started Tutorials 3D Reference

Extruding Polylines

Extruding most objects is realively straight forward but since polylines are a series of line segments that we want to extrude, they are a bit more complicated. The Extrusion Example shows a number of different ways to extrude polylines and polygons. By default, polylines are drawn as 1-pixel wide lines. This saves on rendering time but is not very interesting. CanvasMap 3D provides a number of methods for extruding polylines but all require additional rendering time.

The THREE.js documentation uses the term Path to refer to what in GIS would be a Polyline or MultiLineSegment (e.g. rivers, roads, railroads). THREE.js also documents how to extrude along the length of a path. Here we will be discussing how to extrude polylines vertically in a spatial context. Here we use polyline and path interchangeably and we use tube to refer to the sections of the extrusion that are created for each line segement in the path.

Extrusion Examples

The Extrusion Example shows a series of different approaches for extruding polylines. If you take a look at the code, you will see where a shapefile is loaded and then extruded a number of times in a loop. Each time through the loop produces a different extrusion approach. They are ordered from the left to the right. The one on the left is the default where polylines are rendered as a simple line feature. All you can do in this case is to set the color of the line. The other examples are explained below.

Cross Sectional Arrays

The following examples all use a cross section. The cross section is specied with an array of x and y coordinate values. The cross section describes the locations of the outside of the extrusion tube in a plane that is perpendicular to the path and has 0,0 at the points on the path. You can create your own cross sections are arrays of x,y coordinates or call the function GetArcArrayInDegrees(). This function has the following parameters:

Extruding with THREE.js and a Cross Sectional Array

The second examples uses the THREE.js extrusion method with a cross section. This is a relatively each approach and the only parameter provided is Closed which is true to close the path back on itself. The issue with the standard THREE.js extrusions is that they do not maintain the angle of the cross sections as the path is extruded. This means if you used this for a road or canal, it could tilt along the terrain.

See thereference section and ExtrudeGeometry in the THREE.js documentation for some addtional details.

Extruding with Other Methods

The rest of the examples set the Type parameter to Flat to indicate the angle of the cross section should be kept flat with the x-y plane. This introduces additional parameters:

See the last example for now to create your own custom cross section of any shape. You can also combine multiple layers with different cross-sections but be careful of the rendering time and number of faces that can be generated.