In 2D maps, drawing tools are used to draw points, polylines, and polygons in a “John Madden” fashion. In 3D, drawing tools are generally used in the same manner - to annotate the globe’s surface.
With Cesium’s Scene.pick and Scene.pickPosition functions, we can reenvision drawing tools for 3D to allow users to draw on terrain, draw on any 3D surface including glTF models, and annotate precisely where a user selects in 3D.
In this short article, we explore building a 3D drawing tool with Cesium. In the screenshot below, notice how the polylines drawn on the models are in 3D space even when the model is hidden.
The full code example is shown below and can be copy and pasted into Sandcastle. To draw a polyline, left click, drag the mouse around, and then left click again. Right click to add an annotation with the height, in meters, of a particular point.
For polylines, the general approach is to use a LEFT_CLICK handler to track the drawing state (are we drawing a polyline or not?), and a MOUSE_MOVE handler to update a polyline when the state is drawing. Each time the polyline is updated, Scene.pick is called to identify the object that is being drawn on (because each object gets a different color polyline) and Scene.pickPosition is called to compute the 3D position for a new point in the polyline based on the 2D position of the mouse cursor.
To minimize depth buffer artifacts such as the polyline going slightly above or below the surface, a wide polyline is drawn. Since Scene.pickPosition requires a WebGL extension, we check Scene.pickPositionSupported to verify the system supports it.
Height annotations are implemented by calling Scene.pickPosition inside the RIGHT_CLICK handler, converting the returned Cartesian3 to Cartographic, and then adding a Entity with a label containing the height. To help avoid clutter, the label is offset and a polyline connects the label to the actual point clicked.
This example can be expanded into a full fledged 3D drawing tool with a UI for selecting color and line width, erasing, etc. This could allow users to annotate areas of interest on 3D buildings and vehicles. Let us know what you build!