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:

• StartAngle - the angle to start the cross section, typically 0
• EndAngle - the angle to end the cross section, typically 360
• NumSteps - the number of steps around the cross section. 4 would make a 4-side box around the path. 16 would make the tubes appear cylindrical
• Radius- the size of the cross section and thus the size of the tubes

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:

• CrossSectionAngle - the angle of the cross section can be rotated about the path but setting this to something other than 0 degrees
• RadiusOfRotation - this is the limit of the radius of the curves that the path is following. In other words, if the radius is 0, the extrusion can have large corners appear on tight curves. This parameter allows the corners to be curved in the same way a road is curved. This parameter should always be larger than the radius of the cross section to create smooth curves.
• DegreesPerSegment - the maximum degrees per tube segment at each corner. The smaller this number the rounder the curves will appear but also the higher the number of faces that will be created.
• Smoothed - true will make the sides of the tubes smooth as with a pipe while false will make them appear more box-like with sharp edges.

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.