CanvasMap
Getting Started Tutorials 3D Reference

Coordinates (positions), Directions (rotations), and Scaling

The CanvasMap 3D environment is similar to the 2D envrionment in that we work in geographic coordinates. Coordinates contain an X,Y, and a Z value. The X and Y values are the same as in 2D and can present Longitudes and Latitudes or Eastings and Northings. The Z value is for elevation, typically the distance from the mean sea level on earth. The Z values are tyipcally in a linear unit (meters or feet) while X and Y can be in spherical (Lat/Lon) or projected (Easting/Northing).

The way that the coordinates of objects are positioned in a 3D envrionment is a little different from what we are used to in GIS and the terminology is different. OpenGL refers to "positioning" geometric objects while GIS software tends to just position spatial data based on it's coordinates. CanvasMap automates the process of displaying 3D spatial data while providing a great deal of flexbility in how the data is displayed. We can also add more traditional 3D "objects" such as boxes, cylinders, and spheres. We can also take a "Geo" (a set of layers) and move it around in CanvasMap as a 3D object. Then, there are lights and views which we can move around. All of this requires us to be comfortable moving things around in a 3D envrionment.

Note: If you checkout the online documentation for THREE.js, you'll see some of the terminology is the same and some is new. CanvasMap uses termniology from the GIS world when appropriate and then uses terminology from THREE.js (really OpenGL) when needed.

Geographic Coordinates

Coordinates in 3D space are made up of X, Y, and Z. At this point, open the "Minimumal 3D" demo and add an "Origin" from the 3D Items layer's popup menu. Turn off the other layers. You should see three axis labeled X, Y, and Z in the middle of the view. Spend a little time moving around with the mouse to see how the 3D envrionment is oriented. Notice that you can't currently o below the XY plane (aka equator or the horizon). This is a setting in the "Orbit" control that can be changed if you like.

Next, turn on the countries layer and notice that the Y axis points north, the X axis points to the east, and the Z axis points up. This is what we expect in GIS software but this is not the default for all 3D software. CanvasMap has rotated the scene so we can work with the axis we expect.

Projected Coordinates

When we work with geographic coordinates, the numbers have a familiar range of -180/180 and -90/90. The data is also centered nicely at 0,0. However, we won't use geographic data very often in 3D unless we are working in a spherical projection (more on this later). Projected coordinates contain much lager values and our maps are typically not centered at 0,0. This makes working with projected data a bit more challenging and it is easy to lose our data and end up literatlly wondering around in 3D space trying to find it.

Positioning Items

If your geospatial data contains propery georefered data, you don't have to worry about properly placing the data in space, CanvasMap will do it for you. However, when you place lights and other items into a 3D scene, you'll need to specify the coordinates for the items. In addition, you may need to rotate and scale the items. The approach I recommend is to:

  1. Find the center of the data you are displaying in your scene. This is best done in the GIS application that you use to prepare the data.
  2. Add the center of the scene to your JavaScript code as something like "XCenter, YCenter".
  3. Place itemes and text at the center of your data with a z value of 0.
  4. If you don't see the item, try changing the scale of the item. Note that for projected systems, you may have to increase the size by a factor of 1000 or even more.
  5. If the item is not in the orientation you need, rotate the item in increments of Math.PI/2 (1/2 PI) until it is oreiented the way you want.
  6. Then, position the item by adding or subtracting values in a position call until the item appears where you want.

Items in CanvasMap have the following functions:

Rotation

3D objects can also have a rotation. While you have been moving around in 3D space you were actually moving the View (aka Camera). The view has a position that you can set and it has a rotation. As you move around a scene, the orbit control is constanly changing the viewing angles to have you look at the origin of the scene. When you use the right mouse button to move around, you change the position of the origin that the view is looking at.

There are three ways we can rotate anything in a 3D scene: around the x, y, or z axis. If we rotate something about the x-axis, it will "pitch" forward or backward. Rotating about the z-axis makes the item turn left and right (also known as yaw). When we rotate about the y-axis, we will roll the item from the left to the right.

In CanvasMap you can rotate items when you add them to a scene but you want to be careful in how you do it. The issue is that once you rotate something about one axis, the next rotation is done from the frame of reference of the item you just rotate. This means if you roll to the left 45 degrees (y-axis rotation) and then pitch down 45 degrees (x-axis rotation), you will be looking down and to your right. This can become confusing very quickly.

Scale

We can also scale items in the 3D world. Tyically you'll only do this with data that is not georeferenced.