@xeokit/xeokit-sdk 2.6.16 → 2.6.19

package/dist/xeokit-sdk.es.js

@@ -1118,8 +1118,8 @@ class PointerLens {
         );
 
         const centerLensCanvas = [
-            (lensRect.left + lensRect.right) / 2,
-            (lensRect.top + lensRect.bottom) / 2
+            (lensRect.left + lensRect.right) / 2 - canvasRect.left,
+            (lensRect.top + lensRect.bottom) / 2 - canvasRect.top
         ];
 
         if (this._snappedCanvasPos) {
@@ -10635,6 +10635,9 @@ class Marker extends Component {
             return;
         }
         this._occludable = occludable;
+        if (this._occludable) {
+            this._renderer.markerWorldPosUpdated(this);
+        }
     }
 
     /**
@@ -10756,7 +10759,7 @@ class Marker extends Component {
         this.scene.camera.off(this._onCameraProjMatrix);
         if (this._entity) {
             if (this._onEntityDestroyed !== null) {
-                this._entity.off(this._onEntityDestroyed);
+                this._entity.model.off(this._onEntityDestroyed);
             }
             if (this._onEntityModelDestroyed !== null) {
                 this._entity.model.off(this._onEntityModelDestroyed);
@@ -11156,7 +11159,25 @@ class Dot {
             }
             
         }
-        
+
+        if (cfg.onTouchstart) {
+            dotClickable.addEventListener('touchstart', (event) => {
+                cfg.onTouchstart(event, this);
+            });
+        }
+
+        if (cfg.onTouchmove) {
+            dotClickable.addEventListener('touchmove', (event) => {
+                cfg.onTouchmove(event, this);
+            });
+        }
+
+        if (cfg.onTouchend) {
+            dotClickable.addEventListener('touchend', (event) => {
+                cfg.onTouchend(event, this);
+            });
+        }
+
         this.setPos(cfg.x || 0, cfg.y || 0);
         this.setFillColor(cfg.fillColor);
         this.setBorderColor(cfg.borderColor);
@@ -14424,6 +14445,7 @@ class Annotation extends Marker {
         if (this._marker) {
             if (!this._markerExternal) {
                 this._marker.parentNode.removeChild(this._marker);
+                this._marker = null;
             } else {
                 this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
                 this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
@@ -17052,7 +17074,7 @@ class OcclusionLayer {
     _buildVBOs() {
         if (this.positionsBuf) {
             if (this.lenPositionsBuf === this.positions.length) { // Just updating buffer elements, don't need to reallocate
-                this.positionsBuf.setData(this.positions); // Indices don't need updating
+                this.positionsBuf.setData(new Float32Array(this.positions)); // Indices don't need updating
                 return;
             }
             this.positionsBuf.destroy();
@@ -17141,7 +17163,6 @@ class OcclusionLayer {
 
 const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
 const POINT_SIZE = 20;
-const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
 
 const tempVec3a$J = math.vec3();
 
@@ -17208,7 +17229,6 @@ class OcclusionTester {
     markerWorldPosUpdated(marker) {
         const occlusionLayer = this._markersToOcclusionLayersMap[marker.id];
         if (!occlusionLayer) {
-            marker.error("Marker has not been added to OcclusionTester");
             return;
         }
         const originHash = marker.origin.join();
@@ -17223,7 +17243,7 @@ class OcclusionTester {
             let newOcclusionLayer = this._occlusionLayers[originHash];
             if (!newOcclusionLayer) {
                 newOcclusionLayer = new OcclusionLayer(this._scene, marker.origin);
-                this._occlusionLayers[originHash] = occlusionLayer;
+                this._occlusionLayers[originHash] = newOcclusionLayer;
                 this._occlusionLayersListDirty = true;
             }
             newOcclusionLayer.addMarker(marker);
@@ -17353,7 +17373,9 @@ class OcclusionTester {
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         } else {
-            src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
+            if (scene.markerZOffset < 0.000) {
+                src.push("clipPos.z += " + scene.markerZOffset + ";");
+            }
         }
         src.push("   gl_Position = clipPos;");
         src.push("}");
@@ -17467,7 +17489,10 @@ class OcclusionTester {
                 continue;
             }
 
-            const origin = occlusionLayer.origin;
+            // The `origin` has been changed from `occlusionLayer.origin` to `[ 0, 0, 0 ]`
+            // because OcclusionLayer markers' transformation is being applied through the
+            // OcclusionLayer::positions array. See XEOK-33
+            const origin = [ 0, 0, 0 ];
 
             gl.uniformMatrix4fv(this._uViewMatrix, false, createRTCViewMat(camera.viewMatrix, origin));
 
@@ -18706,6 +18731,9 @@ const Renderer$1 = function (scene, options) {
     let drawableTypeInfo = {};
     let drawables = {};
 
+    let postSortDrawableList = [];
+    let postCullDrawableList = [];
+
     let drawableListDirty = true;
     let stateSortDirty = true;
     let imageDirty = true;
@@ -18931,28 +18959,38 @@ const Renderer$1 = function (scene, options) {
                 const drawableInfo = drawableTypeInfo[type];
                 if (drawableInfo.isStateSortable) {
                     drawableInfo.drawableListPreCull.sort(drawableInfo.stateSortCompare);
+
+                    drawableInfo.drawableList = drawableInfo.drawableListPreCull;
                 }
             }
         }
-    }
-
-    function cullDrawableList() {
+        let lenDrawableList = 0;
         for (let type in drawableTypeInfo) {
             if (drawableTypeInfo.hasOwnProperty(type)) {
                 const drawableInfo = drawableTypeInfo[type];
                 const drawableListPreCull = drawableInfo.drawableListPreCull;
-                const drawableList = drawableInfo.drawableList;
-                let lenDrawableList = 0;
                 for (let i = 0, len = drawableListPreCull.length; i < len; i++) {
                     const drawable = drawableListPreCull[i];
-                    drawable.rebuildRenderFlags();
-                    if (!drawable.renderFlags.culled) {
-                        drawableList[lenDrawableList++] = drawable;
-                    }
+                    postSortDrawableList[lenDrawableList++] = drawable;
                 }
-                drawableList.length = lenDrawableList;
             }
         }
+        postSortDrawableList.length = lenDrawableList;
+        postSortDrawableList.sort((a, b) => {
+            return a.renderOrder - b.renderOrder;
+        });
+    }
+
+    function cullDrawableList() {
+        let lenDrawableList = 0;
+        for (let i = 0, len = postSortDrawableList.length; i < len; i++) {
+            const drawable = postSortDrawableList[i];
+            drawable.rebuildRenderFlags();
+            if (!drawable.renderFlags.culled) {
+                postCullDrawableList[lenDrawableList++] = drawable;
+            }
+        }
+        postCullDrawableList.length = lenDrawableList;
     }
 
     function draw(params) {
@@ -19185,7 +19223,6 @@ const Renderer$1 = function (scene, options) {
         }
 
         let i;
-        let len;
         let drawable;
 
         const startTime = Date.now();
@@ -19218,93 +19255,85 @@ const Renderer$1 = function (scene, options) {
         // Render normal opaque solids, defer others to bins to render after
         //------------------------------------------------------------------------------------------------------
 
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-
-                const drawableInfo = drawableTypeInfo[type];
-                const drawableList = drawableInfo.drawableList;
-
-                for (i = 0, len = drawableList.length; i < len; i++) {
+        for (let i = 0, len = postCullDrawableList.length; i < len; i++) {
 
-                    drawable = drawableList[i];
+            drawable = postCullDrawableList[i];
 
-                    if (drawable.culled === true || drawable.visible === false) {
-                        continue;
-                    }
+            if (drawable.culled === true || drawable.visible === false) {
+                continue;
+            }
 
-                    const renderFlags = drawable.renderFlags;
+            const renderFlags = drawable.renderFlags;
 
-                    if (renderFlags.colorOpaque) {
-                        if (saoEnabled && saoPossible && drawable.saoEnabled) {
-                            normalDrawSAOBin[normalDrawSAOBinLen++] = drawable;
-                        } else {
-                            drawable.drawColorOpaque(frameCtx);
-                        }
-                    }
+            if (renderFlags.colorOpaque) {
+                if (saoEnabled && saoPossible && drawable.saoEnabled) {
+                    normalDrawSAOBin[normalDrawSAOBinLen++] = drawable;
+                } else {
+                    drawable.drawColorOpaque(frameCtx);
+                }
+            }
 
-                    if (transparentEnabled) {
-                        if (renderFlags.colorTransparent) {
-                            normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
-                        }
-                    }
+            if (transparentEnabled) {
+                if (renderFlags.colorTransparent) {
+                    normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
+                }
+            }
 
-                    if (renderFlags.xrayedSilhouetteTransparent) {
-                        xrayedFillTransparentBin[xrayedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.xrayedSilhouetteTransparent) {
+                xrayedFillTransparentBin[xrayedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.xrayedSilhouetteOpaque) {
-                        xrayedFillOpaqueBin[xrayedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.xrayedSilhouetteOpaque) {
+                xrayedFillOpaqueBin[xrayedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (renderFlags.highlightedSilhouetteTransparent) {
-                        highlightedFillTransparentBin[highlightedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.highlightedSilhouetteTransparent) {
+                highlightedFillTransparentBin[highlightedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.highlightedSilhouetteOpaque) {
-                        highlightedFillOpaqueBin[highlightedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.highlightedSilhouetteOpaque) {
+                highlightedFillOpaqueBin[highlightedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (renderFlags.selectedSilhouetteTransparent) {
-                        selectedFillTransparentBin[selectedFillTransparentBinLen++] = drawable;
-                    }
+            if (renderFlags.selectedSilhouetteTransparent) {
+                selectedFillTransparentBin[selectedFillTransparentBinLen++] = drawable;
+            }
 
-                    if (renderFlags.selectedSilhouetteOpaque) {
-                        selectedFillOpaqueBin[selectedFillOpaqueBinLen++] = drawable;
-                    }
+            if (renderFlags.selectedSilhouetteOpaque) {
+                selectedFillOpaqueBin[selectedFillOpaqueBinLen++] = drawable;
+            }
 
-                    if (drawable.edges && edgesEnabled) {
-                        if (renderFlags.edgesOpaque) {
-                            normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
-                        }
+            if (drawable.edges && edgesEnabled) {
+                if (renderFlags.edgesOpaque) {
+                    normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.edgesTransparent) {
-                            normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.edgesTransparent) {
+                    normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.selectedEdgesTransparent) {
-                            selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.selectedEdgesTransparent) {
+                    selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.selectedEdgesOpaque) {
-                            selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
-                        }
+                if (renderFlags.selectedEdgesOpaque) {
+                    selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.xrayedEdgesTransparent) {
-                            xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.xrayedEdgesTransparent) {
+                    xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.xrayedEdgesOpaque) {
-                            xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
-                        }
+                if (renderFlags.xrayedEdgesOpaque) {
+                    xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
+                }
 
-                        if (renderFlags.highlightedEdgesTransparent) {
-                            highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
-                        }
+                if (renderFlags.highlightedEdgesTransparent) {
+                    highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
+                }
 
-                        if (renderFlags.highlightedEdgesOpaque) {
-                            highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
-                        }
-                    }
+                if (renderFlags.highlightedEdgesOpaque) {
+                    highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
                 }
             }
         }
@@ -19617,7 +19646,7 @@ const Renderer$1 = function (scene, options) {
                     math.cross3Vec3(worldRayDir, randomVec3, up);
 
                     pickViewMatrix = math.lookAtMat4v(worldRayOrigin, look, up, tempMat4b);
-                //    pickProjMatrix = scene.camera.projMatrix;
+                    //    pickProjMatrix = scene.camera.projMatrix;
                     pickProjMatrix = scene.camera.ortho.matrix;
 
                     pickResult.origin = worldRayOrigin;
@@ -21604,6 +21633,14 @@ class Input extends Component {
             }
         });
 
+        this.element.addEventListener("contextmenu", this._contextmenuListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            this._getMouseCanvasPos(e);
+            this.fire("contextmenu", this.mouseCanvasPos, true);
+        });
+
         const tickifiedMouseWheelFn = this.scene.tickify(
             (delta) => { this.fire("mousewheel", delta, true); }
         );
@@ -21637,6 +21674,24 @@ class Input extends Component {
             });
         }
 
+        this.element.addEventListener("touchstart", this._touchstartListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            [...e.changedTouches].forEach(e => {
+                this.fire("touchstart", [ e.identifier, this._getTouchCanvasPos(e) ], true);
+            });
+        });
+
+        this.element.addEventListener("touchend", this._touchendListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            [...e.changedTouches].forEach(e => {
+                this.fire("touchend", [ e.identifier, this._getTouchCanvasPos(e) ], true);
+            });
+        });
+
         this._eventsBound = true;
     }
 
@@ -21653,7 +21708,10 @@ class Input extends Component {
         document.removeEventListener("click", this._clickListener);
         document.removeEventListener("dblclick", this._dblClickListener);
         this.element.removeEventListener("mousemove", this._mouseMoveListener);
+        this.element.removeEventListener("contextmenu", this._contextmenuListener);
         this.element.removeEventListener("wheel", this._mouseWheelListener);
+        this.element.removeEventListener("touchstart", this._touchstartListener);
+        this.element.removeEventListener("touchend", this._touchendListener);
         if (window.OrientationChangeEvent) {
             window.removeEventListener('orientationchange', this._orientationchangedListener);
         }
@@ -21666,6 +21724,18 @@ class Input extends Component {
         this._eventsBound = false;
     }
 
+    _getTouchCanvasPos(event) {
+        let element = event.target;
+        let totalOffsetLeft = 0;
+        let totalOffsetTop = 0;
+        while (element.offsetParent) {
+            totalOffsetLeft += element.offsetLeft;
+            totalOffsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
+        return [ event.pageX - totalOffsetLeft, event.pageY - totalOffsetTop ];
+    }
+
     _getMouseCanvasPos(event) {
         if (!event) {
             event = window.event;
@@ -30150,6 +30220,7 @@ class Scene extends Component {
         this._pbrEnabled = !!cfg.pbrEnabled;
         this._colorTextureEnabled = (cfg.colorTextureEnabled !== false);
         this._dtxEnabled = !!cfg.dtxEnabled;
+        this._markerZOffset = cfg.markerZOffset;
 
         // Register Scene on xeokit
         // Do this BEFORE we add components below
@@ -30670,6 +30741,22 @@ class Scene extends Component {
         return this._colorTextureEnabled;
     }
 
+    /**
+     * Gets the Z value of offset for Marker's OcclusionTester.
+     * The closest the value is to 0.000 the more precise OcclusionTester will be, but at the same time the less
+     * precise it will behave for Markers that are located exactly on the Surface.
+     *
+     * Default is ````-0.001````.
+     *
+     * @returns {Number} Z offset for Marker
+     */
+    get markerZOffset() {
+        if (this._markerZOffset == null) {
+            return -0.001;
+        }
+        return this._markerZOffset;
+    }
+
     /**
      * Performs an occlusion test on all {@link Marker}s in this {@link Scene}.
      *
@@ -31514,9 +31601,9 @@ class Scene extends Component {
      * @param {Number[]} [params.matrix] 4x4 transformation matrix to define the World-space ray origin and direction, as an alternative to ````origin```` and ````direction````.
      * @param {String[]} [params.includeEntities] IDs of {@link Entity}s to restrict picking to. When given, ignores {@link Entity}s whose IDs are not in this list.
      * @param {String[]} [params.excludeEntities] IDs of {@link Entity}s to ignore. When given, will pick *through* these {@link Entity}s, as if they were not there.
-     * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
-     * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
-     * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
+     * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels.
+     * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex. Only works when `canvasPos` given.
+     * @param {boolean} [params.snapToEdge=true] Whether to snap to edge. Only works when `canvasPos` given.
      * @param {PickResult} [pickResult] Holds the results of the pick attempt. Will use the Scene's singleton PickResult if you don't supply your own.
      * @returns {PickResult} Holds results of the pick attempt, returned when an {@link Entity} is picked, else null. See method comments for description.
      */
@@ -31527,6 +31614,11 @@ class Scene extends Component {
             return null;
         }
 
+        if ((params.snapToVertex || params.snapToEdge) && !params.canvasPos) {
+            this.error("Scene.snapPick() `canvasPos` parameter expected for `snapToVertex:true` or `snapToEdge:true`");
+            return;
+        }
+
         params = params || {};
 
         params.pickSurface = params.pickSurface || params.rayPick; // Backwards compatibility
@@ -31574,7 +31666,7 @@ class Scene extends Component {
 
     /**
      * @param {Object} params Picking parameters.
-     * @param {Number[]} [params.canvasPos] Canvas-space coordinates. When ray-picking, this will override the **origin** and ** direction** parameters and will cause the ray to be fired through the canvas at this position, directly along the negative View-space Z-axis.
+     * @param {Number[]} params.canvasPos Canvas-space coordinates.
      * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
      * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
      * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
@@ -31585,6 +31677,10 @@ class Scene extends Component {
             this._warnSnapPickDeprecated = true;
             this.warn("Scene.snapPick() is deprecated since v2.4.2 - use Scene.pick() instead");
         }
+        if (!params.canvasPos) {
+            this.error("Scene.snapPick() canvasPos parameter expected");
+            return;
+        }
         return this._renderer.snapPick(
             params.canvasPos,
             params.snapRadius || 30,
@@ -37647,11 +37743,16 @@ class Mesh extends Component {
      * @param {EmphasisMaterial} [cfg.highlightMaterial] {@link EmphasisMaterial} to define the xrayed appearance for this Mesh. Inherits {@link Scene#highlightMaterial} by default.
      * @param {EmphasisMaterial} [cfg.selectedMaterial] {@link EmphasisMaterial} to define the selected appearance for this Mesh. Inherits {@link Scene#selectedMaterial} by default.
      * @param {EmphasisMaterial} [cfg.edgeMaterial] {@link EdgeMaterial} to define the appearance of enhanced edges for this Mesh. Inherits {@link Scene#edgeMaterial} by default.
+     * @param {Number} [cfg.renderOrder=0] Specifies the rendering order for this mESH. This is used to control the order in which
+     * mESHES are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      */
     constructor(owner, cfg = {}) {
 
         super(owner, cfg);
 
+        this.renderOrder = cfg.renderOrder || 0;
+
         /**
          * ID of the corresponding object within the originating system, if any.
          *
@@ -42176,6 +42277,7 @@ class SectionPlane extends Component {
         this._state.active = value !== false;
         this.glRedraw();
         this.fire("active", this._state.active);
+        this.scene.fire("sectionPlaneUpdated", this);
     }
 
     /**
@@ -42256,13 +42358,8 @@ class SectionPlane extends Component {
      * Inverts the direction of {@link SectionPlane#dir}.
      */
     flipDir() {
-        const dir = this._state.dir;
-        dir[0] *= -1.0;
-        dir[1] *= -1.0;
-        dir[2] *= -1.0;
-        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
-        this.fire("dir", this._state.dir);
-        this.glRedraw();
+        math.mulVec3Scalar(this._state.dir, -1.0, this._state.dir);
+        this.dir = this._state.dir;
     }
 
     /**
@@ -82244,11 +82341,16 @@ class SceneModel extends Component {
      * represent the returned model. Set false to always use vertex buffer objects (VBOs). Note that DTX is only applicable
      * to non-textured triangle meshes, and that VBOs are always used for meshes that have textures, line segments, or point
      * primitives. Only works while {@link DTX#enabled} is also ````true````.
+     * @param {Number} [cfg.renderOrder=0] Specifies the rendering order for this SceneModel. This is used to control the order in which
+     * SceneModels are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      */
     constructor(owner, cfg = {}) {
 
         super(owner, cfg);
 
+        this.renderOrder = cfg.renderOrder || 0;
+
         this._dtxEnabled = this.scene.dtxEnabled && (cfg.dtxEnabled !== false);
 
         this._enableVertexWelding = false; // Not needed for most objects, and very expensive, so disabled
@@ -84315,6 +84417,7 @@ class SceneModel extends Component {
     _getVBOBatchingLayer(cfg) {
         const model = this;
         const origin = cfg.origin;
+        cfg.renderLayer || 0;
         const positionsDecodeHash = cfg.positionsDecodeMatrix || cfg.positionsDecodeBoundary ?
             this._createHashStringFromMatrix(cfg.positionsDecodeMatrix || cfg.positionsDecodeBoundary)
             : "-";
@@ -84801,7 +84904,7 @@ class SceneModel extends Component {
     // -------------- RENDERING ---------------------------------------------------------------------------------------
 
     /** @private */
-    drawColorOpaque(frameCtx) {
+    drawColorOpaque(frameCtx, layerList) {
         const renderFlags = this.renderFlags;
         for (let i = 0, len = renderFlags.visibleLayers.length; i < len; i++) {
             const layerIndex = renderFlags.visibleLayers[i];
@@ -86595,7 +86698,7 @@ class DistanceMeasurement extends Component {
 
         if (this._wpDirty) {
 
-            this._measurementOrientation = determineMeasurementOrientation(this._originWorld, this._targetWorld, 1);
+            this._measurementOrientation = determineMeasurementOrientation(this._originWorld, this._targetWorld, 0);
             if(this._measurementOrientation === 'Vertical' && this.useRotationAdjustment){
                 this._wp[0] = this._originWorld[0];
                 this._wp[1] = this._originWorld[1];
@@ -89722,7 +89825,20 @@ class FastNavPlugin extends Plugin {
  */
 class GLTFDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -89733,7 +89849,7 @@ class GLTFDefaultDataSource {
      * @param {Function} error Fired on error while loading the metamodel JSON asset.
      */
     getMetaModel(metaModelSrc, ok, error) {
-        utils.loadJSON(metaModelSrc,
+        utils.loadJSON(this._cacheBusterURL(metaModelSrc),
             (json) => {
                 ok(json);
             },
@@ -89750,7 +89866,7 @@ class GLTFDefaultDataSource {
      * @param {Function} error Fired on error while loading the glTF JSON asset.
      */
     getGLTF(glTFSrc, ok, error) {
-        utils.loadArraybuffer(glTFSrc,
+        utils.loadArraybuffer(this._cacheBusterURL(glTFSrc),
             (gltf) => {
                 ok(gltf);
             },
@@ -89767,7 +89883,7 @@ class GLTFDefaultDataSource {
      * @param {Function} error Fired on error while loading the .glb asset.
      */
     getGLB(glbSrc, ok, error) {
-        utils.loadArraybuffer(glbSrc,
+        utils.loadArraybuffer(this._cacheBusterURL(glbSrc),
             (arraybuffer) => {
                 ok(arraybuffer);
             },
@@ -89788,7 +89904,7 @@ class GLTFDefaultDataSource {
      * @param {Function} error Fired on error while loading the glTF binary asset.
      */
     getArrayBuffer(glTFSrc, binarySrc, ok, error) {
-        loadArraybuffer(glTFSrc, binarySrc,
+        loadArraybuffer(this._cacheBusterURL(glTFSrc), binarySrc,
             (arrayBuffer) => {
                 ok(arrayBuffer);
             },
@@ -96104,6 +96220,15 @@ class MousePickHandler {
                     return;
                 }
 
+                if (cameraControl.hasSubs("rayMove"))
+                {
+                    const origin = math.vec3();
+                    const direction = math.vec3();
+                    // The origin from math.canvasPosToWorldRay is incorrect for a perspective camera, should be the same as scene.camera.eye
+                    math.canvasPosToWorldRay(scene.canvas.canvas, scene.camera.viewMatrix, scene.camera.projMatrix, states.pointerCanvasPos, origin, direction);
+                    cameraControl.fire("rayMove", { canvasPos: states.pointerCanvasPos, ray: { origin: origin, direction: direction, canvasPos: states.pointerCanvasPos } }, true);
+                }
+
                 const hoverSubs = cameraControl.hasSubs("hover");
                 const hoverEnterSubs = cameraControl.hasSubs("hoverEnter");
                 const hoverOutSubs = cameraControl.hasSubs("hoverOut");
@@ -108196,6 +108321,7 @@ class Viewer {
      * store geometry on the GPU for triangle meshes that don't have textures. This gives a much lower memory footprint for these types of model element. This mode may not perform well on low-end GPUs that are optimized
      * to use textures to hold geometry data. Works great on most medium/high-end GPUs found in desktop computers, including the nVIDIA and Intel HD chipsets. Set this false to use the default vertex buffer object (VBO)
      * mode for storing geometry, which is the standard technique used in most graphics engines, and will work adequately on most low-end GPUs.
+     * @param {Number} [cfg.markerZOffset=-0.001] The Z value of offset for Marker's OcclusionTester. The closest the value is to 0.000 the more precise OcclusionTester will be, but at the same time the less precise it will behave for Markers that are located exactly on the Surface.
      * @param {number} [cfg.numCachedSectionPlanes=0] Enhances the efficiency of SectionPlane creation by proactively allocating Viewer resources for a specified quantity
      * of SectionPlanes. Introducing this parameter streamlines the initial creation speed of SectionPlanes, particularly up to the designated quantity. This parameter internally
      * configures renderer logic for the specified number of SectionPlanes, eliminating the need for setting up logic with each SectionPlane creation and thereby enhancing
@@ -108259,6 +108385,7 @@ class Viewer {
             pbrEnabled: (!!cfg.pbrEnabled),
             colorTextureEnabled: (cfg.colorTextureEnabled !== false),
             dtxEnabled: (!!cfg.dtxEnabled),
+            markerZOffset: cfg.markerZOffset,
             numCachedSectionPlanes: cfg.numCachedSectionPlanes
         });
 
@@ -123703,6 +123830,22 @@ class SkyboxesPlugin extends Plugin {
  */
 class STLDefaultDataSource {
 
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
+    }
+
     /**
      * Gets STL data.
      *
@@ -123711,6 +123854,7 @@ class STLDefaultDataSource {
      * @param {Function} error Fired on error while loading the STL file.
      */
     getSTL(src, ok, error) {
+        src = this._cacheBusterURL(src);
         const request = new XMLHttpRequest();
         request.overrideMimeType("application/json");
         request.open('GET', src, true);
@@ -126333,7 +126477,20 @@ class ViewCullPlugin extends Plugin {
  */
 class XKTDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -126344,7 +126501,7 @@ class XKTDefaultDataSource {
      * @param {Function} error Fired on error while loading the manifest JSON asset.
      */
     getManifest(manifestSrc, ok, error) {
-        utils.loadJSON(manifestSrc,
+        utils.loadJSON(this._cacheBusterURL(manifestSrc),
             (json) => {
                 ok(json);
             },
@@ -126361,7 +126518,7 @@ class XKTDefaultDataSource {
      * @param {Function} error Fired on error while loading the metamodel JSON asset.
      */
     getMetaModel(metaModelSrc, ok, error) {
-        utils.loadJSON(metaModelSrc,
+        utils.loadJSON(this._cacheBusterURL(metaModelSrc),
             (json) => {
                 ok(json);
             },
@@ -126403,7 +126560,7 @@ class XKTDefaultDataSource {
             }
         } else {
             const request = new XMLHttpRequest();
-            request.open('GET', src, true);
+            request.open('GET', this._cacheBusterURL(src), true);
             request.responseType = 'arraybuffer';
             request.onreadystatechange = function () {
                 if (request.readyState === 4) {
@@ -133804,7 +133961,20 @@ class XML3DLoaderPlugin extends Plugin {
  */
 class WebIFCDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -133815,6 +133985,8 @@ class WebIFCDefaultDataSource {
      * @param {Function} error Callback fired on error.
      */
     getIFC(src, ok, error) {
+        src = this._cacheBusterURL(src);
+
         var defaultCallback = () => {
         };
         ok = ok || defaultCallback;
@@ -134812,7 +134984,20 @@ class WebIFCLoaderPlugin extends Plugin {
  */
 class LASDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -134823,6 +135008,7 @@ class LASDefaultDataSource {
      * @param {Function} error Callback fired on error.
      */
     getLAS(src, ok, error) {
+        src = this._cacheBusterURL(src);
         var defaultCallback = () => {
         };
         ok = ok || defaultCallback;
@@ -135677,7 +135863,20 @@ function chunkArray(array, chunkSize) {
  */
 class CityJSONDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -135688,7 +135887,7 @@ class CityJSONDefaultDataSource {
      * @param {Function} error Callback fired on error.
      */
     getCityJSON(src, ok, error) {
-        utils.loadJSON(src,
+        utils.loadJSON(this._cacheBusterURL(src),
             (json) => {
                 ok(json);
             },
@@ -137120,7 +137319,20 @@ class CityJSONLoaderPlugin extends Plugin {
  */
 class DotBIMDefaultDataSource {
 
-    constructor() {
+    constructor(cfg = {}) {
+        this.cacheBuster = (cfg.cacheBuster !== false);
+    }
+
+    _cacheBusterURL(url) {
+        if (!this.cacheBuster) {
+            return url;
+        }
+        const timestamp = new Date().getTime();
+        if (url.indexOf('?') > -1) {
+            return url + '&_=' + timestamp;
+        } else {
+            return url + '?_=' + timestamp;
+        }
     }
 
     /**
@@ -137131,7 +137343,7 @@ class DotBIMDefaultDataSource {
      * @param {Function} error Fired on error while loading the .BIM JSON asset.
      */
     getDotBIM(dotBIMSrc, ok, error) {
-        utils.loadJSON(dotBIMSrc,
+        utils.loadJSON(this._cacheBusterURL(dotBIMSrc),
             (json) => {
                 ok(json);
             },
@@ -137693,4 +137905,2011 @@ class DotBIMLoaderPlugin extends Plugin {
     }
 }
 
-export { AlphaFormat, AmbientLight, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };
+const hex2rgb = function(color) {
+    const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
+    return [ rgb(0), rgb(2), rgb(4) ];
+};
+
+const transformToNode = function(from, to, vec) {
+    const fromRec = from.getBoundingClientRect();
+    const toRec = to.getBoundingClientRect();
+    vec[0] += fromRec.left - toRec.left;
+    vec[1] += fromRec.top  - toRec.top;
+};
+
+const triangulateEarClipping = function(planeCoords) {
+
+    const polygonVertices = [ ];
+    for (let i = 0; i < planeCoords.length; ++i)
+        polygonVertices.push(i);
+
+    const isCCW = (function() {
+        const ba = math.vec2();
+        const bc = math.vec2();
+
+        let anglesSum = 0;
+
+        for (let i = 0; i < polygonVertices.length; ++i)
+        {
+            const a = planeCoords[polygonVertices[i]];
+            const b = planeCoords[polygonVertices[(i + 1) % polygonVertices.length]];
+            const c = planeCoords[polygonVertices[(i + 2) % polygonVertices.length]];
+
+            math.subVec2(a, b, ba);
+            math.subVec2(c, b, bc);
+
+            const theta = math.dotVec2(ba, bc) / Math.sqrt(math.sqLenVec2(ba) * math.sqLenVec2(bc));
+            const angle = Math.acos(Math.max(-1, Math.min(theta, 1)));
+            const convex = (ba[0] * bc[1] - ba[1] * bc[0]) >= 0;
+            anglesSum += convex ? angle : (2 * Math.PI - angle);
+        }
+
+        return anglesSum < (polygonVertices.length * Math.PI);
+    })();
+
+    const pointInTriangle = (function() {
+        const sign = (p1, p2, p3) => {
+            return (p1[0] - p3[0]) * (p2[1] - p3[1]) - (p2[0] - p3[0]) * (p1[1] - p3[1]);
+        };
+
+        return (pt, v1, v2, v3) => {
+            const d1 = sign(pt, v1, v2);
+            const d2 = sign(pt, v2, v3);
+            const d3 = sign(pt, v3, v1);
+
+            const has_neg = (d1 < 0) || (d2 < 0) || (d3 < 0);
+            const has_pos = (d1 > 0) || (d2 > 0) || (d3 > 0);
+
+            return !(has_neg && has_pos);
+        };
+    })();
+
+    const baseTriangles = [ ];
+
+    const vertices = (isCCW ? polygonVertices : polygonVertices.slice(0).reverse()).map(i => ({ idx: i }));
+    vertices.forEach((v, i) => {
+        v.prev = vertices[(i - 1 + vertices.length) % vertices.length];
+        v.next = vertices[(i + 1)                   % vertices.length];
+    });
+
+    const ba = math.vec2();
+    const bc = math.vec2();
+
+    while (vertices.length > 2) {
+        let earIdx = 0;
+        while (true) {
+            if (earIdx >= vertices.length)
+            {
+                throw `isCCW = ${isCCW}; earIdx = ${earIdx}; len = ${vertices.length}`;
+            }
+            const v = vertices[earIdx];
+
+            const a = planeCoords[v.prev.idx];
+            const b = planeCoords[v.idx];
+            const c = planeCoords[v.next.idx];
+
+            math.subVec2(a, b, ba);
+            math.subVec2(c, b, bc);
+
+            if (((ba[0] * bc[1] - ba[1] * bc[0]) >= 0) // a convex vertex
+                &&
+                vertices.every( // no other vertices inside
+                    vv => ((vv === v)
+                           ||
+                           (vv === v.prev)
+                           ||
+                           (vv === v.next)
+                           ||
+                           !pointInTriangle(planeCoords[vv.idx], a, b, c))))
+                break;
+            ++earIdx;
+        }
+
+        const ear = vertices[earIdx];
+        vertices.splice(earIdx, 1);
+
+        baseTriangles.push([ ear.idx, ear.next.idx, ear.prev.idx ]);
+
+        const prev = ear.prev;
+        prev.next = ear.next;
+        const next = ear.next;
+        next.prev = ear.prev;
+    }
+
+    return [ planeCoords, baseTriangles ];
+};
+
+const draggableDot3D = function(handleMouseEvents, handleTouchEvents, viewer, worldPos, color, ray2WorldPos, onStart, onMove, onEnd) {
+    const scene = viewer.scene;
+    const canvas = scene.canvas.canvas;
+
+    const marker = new Marker(scene, {});
+
+    const pickWorldPos = canvasPos => {
+        const origin = math.vec3();
+        const direction = math.vec3();
+        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+        return ray2WorldPos(origin, direction);
+    };
+
+    const onChange = event => {
+        const canvasPos = math.vec2([ event.clientX, event.clientY ]);
+        transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
+
+        const worldPos = pickWorldPos(canvasPos);
+        marker.worldPos = worldPos;
+        updateDotPos();
+        onMove(canvasPos, worldPos);
+    };
+
+    let currentDrag = null;
+
+    const onDragMove = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            onChange(e);
+        }
+    };
+
+    const onDragEnd = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            dot.setOpacity(idleOpacity);
+            currentDrag.cleanup();
+            onChange(e);
+            onEnd();
+        }
+    };
+
+    const startDrag = function(matchesEvent, cleanupHandlers) {
+        if (currentDrag) {
+            currentDrag.cleanup();
+        }
+
+        dot.setOpacity(1.0);
+        dot.setClickable(false);
+        viewer.cameraControl.active = false;
+
+        currentDrag = {
+            matchesEvent: matchesEvent,
+            cleanup: function() {
+                currentDrag = null;
+                dot.setClickable(true);
+                viewer.cameraControl.active = true;
+                cleanupHandlers();
+            }
+        };
+
+        onStart();
+    };
+
+    const dotCfg = { fillColor: color };
+
+    if (handleMouseEvents)
+    {
+        dotCfg.onMouseOver  = () => (! currentDrag) && dot.setOpacity(1.0);
+        dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
+        dotCfg.onMouseDown  = event => {
+            if (event.which === 1)
+            {
+                canvas.addEventListener("mousemove", onDragMove);
+                canvas.addEventListener("mouseup",   onDragEnd);
+                startDrag(
+                    event => (event.which === 1) && event,
+                    () => {
+                        canvas.removeEventListener("mousemove", onDragMove);
+                        canvas.removeEventListener("mouseup",   onDragEnd);
+                    });
+            }
+        };
+    }
+
+    if (handleTouchEvents)
+    {
+        let touchStartId;
+        dotCfg.onTouchstart  = event => {
+            event.preventDefault();
+            if (event.touches.length === 1)
+            {
+                touchStartId = event.touches[0].identifier;
+                startDrag(
+                    event => [...event.changedTouches].find(e => e.identifier === touchStartId),
+                    () => { touchStartId = null; });
+            }
+        };
+        dotCfg.onTouchmove = event => {
+            event.preventDefault();
+            onDragMove(event);
+        };
+        dotCfg.onTouchend  = event => {
+            event.preventDefault();
+            onDragEnd(event);
+        };
+    }
+
+    const dotParent = canvas.ownerDocument.body;
+    const dot = new Dot(dotParent, dotCfg);
+
+    const idleOpacity = 0.5;
+    dot.setOpacity(idleOpacity);
+
+    const updateDotPos = function() {
+        const pos = marker.canvasPos.slice();
+        transformToNode(canvas, dotParent, pos);
+        dot.setPos(pos[0], pos[1]);
+    };
+
+    marker.worldPos = worldPos;
+    updateDotPos();
+
+    const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
+    const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
+
+    return {
+        setActive: value => dot.setClickable(value),
+        getWorldPos: () => marker.worldPos,
+        setWorldPos: pos => { marker.worldPos = pos; updateDotPos(); },
+        destroy: function() {
+            currentDrag && currentDrag.cleanup();
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            marker.destroy();
+            dot.destroy();
+        }
+    };
+};
+
+const marker3D = function(scene, color) {
+    const canvas = scene.canvas.canvas;
+
+    const markerParent = canvas.parentNode;
+    const markerDiv = document.createElement("div");
+    markerParent.insertBefore(markerDiv, canvas);
+
+    let size = 5;
+    markerDiv.style.background = color;
+    markerDiv.style.border = "2px solid white";
+    markerDiv.style.margin = "0 0";
+    markerDiv.style.zIndex = "100";
+    markerDiv.style.position = "absolute";
+    markerDiv.style.pointerEvents = "none";
+    markerDiv.style.display = "none";
+
+    const marker = new Marker(scene, {});
+
+    const px = x => x + "px";
+    const update = function() {
+        const pos = marker.canvasPos.slice();
+        transformToNode(canvas, markerParent, pos);
+        markerDiv.style.left = px(pos[0] - 3 - size / 2);
+        markerDiv.style.top  = px(pos[1] - 3 - size / 2);
+        markerDiv.style.borderRadius = px(size * 2);
+        markerDiv.style.width  = px(size);
+        markerDiv.style.height = px(size);
+    };
+    const onViewMatrix = scene.camera.on("viewMatrix", update);
+    const onProjMatrix = scene.camera.on("projMatrix", update);
+
+    return {
+        update: function(worldPos) {
+            if (worldPos)
+            {
+                marker.worldPos = worldPos;
+                update();
+            }
+            markerDiv.style.display = worldPos ? "" : "none";
+        },
+
+        setHighlighted: function(h) {
+            size = h ? 10 : 5;
+            update();
+        },
+
+        getCanvasPos: () => marker.canvasPos,
+
+        getWorldPos: () => marker.worldPos,
+
+        destroy: function() {
+            markerDiv.parentNode.removeChild(markerDiv);
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            marker.destroy();
+        }
+    };
+};
+
+const wire3D = function(scene, color, startWorldPos) {
+    const canvas = scene.canvas.canvas;
+
+    const startMarker = new Marker(scene, {});
+    startMarker.worldPos = startWorldPos;
+    const endMarker = new Marker(scene, {});
+    const wireParent = canvas.ownerDocument.body;
+    const wire = new Wire(wireParent, {
+        color: color,
+        thickness: 1,
+        thicknessClickable: 6
+    });
+    wire.setVisible(false);
+
+    const updatePos = function() {
+        const p0 = startMarker.canvasPos.slice();
+        const p1 = endMarker.canvasPos.slice();
+        transformToNode(canvas, wireParent, p0);
+        transformToNode(canvas, wireParent, p1);
+        wire.setStartAndEnd(p0[0], p0[1], p1[0], p1[1]);
+    };
+    const onViewMatrix = scene.camera.on("viewMatrix", updatePos);
+    const onProjMatrix = scene.camera.on("projMatrix", updatePos);
+
+    return {
+        update: function(endWorldPos) {
+            if (endWorldPos)
+            {
+                endMarker.worldPos = endWorldPos;
+                updatePos();
+            }
+            wire.setVisible(!!endWorldPos);
+        },
+
+        destroy: function() {
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            startMarker.destroy();
+            endMarker.destroy();
+            wire.destroy();
+        }
+    };
+};
+
+const basePolygon3D = function(scene, color, alpha) {
+    let mesh = null;
+
+    const updateBase = points => {
+        if (points)
+        {
+            if (mesh)
+            {
+                mesh.destroy();
+            }
+
+            try {
+                const [ baseVertices, baseTriangles ] = triangulateEarClipping(points.map(p => [ p[0], p[2] ]));
+
+                const positions = [ ].concat(...baseVertices.map(p => [p[0], points[0][1], p[1]])); // To convert from Float64Array into an Array
+                const ind = [ ].concat(...baseTriangles);
+                mesh = new Mesh(scene, {
+                    pickable: false, // otherwise there's a WebGL error inside PickMeshRenderer.prototype.drawMesh
+                    geometry: new ReadableGeometry(
+                        scene,
+                        {
+                            positions: positions,
+                            indices:   ind,
+                            normals:   math.buildNormals(positions, ind)
+                        }),
+                    material: new PhongMaterial(scene, {
+                        alpha: (alpha !== undefined) ? alpha : 0.5,
+                        backfaces: true,
+                        diffuse: hex2rgb(color)
+                    })
+                });
+            } catch (e) {
+                mesh = null;
+            }
+        }
+
+        if (mesh)
+        {
+            mesh.visible = !!points;
+        }
+    };
+    updateBase(null);
+
+    return {
+        updateBase: updateBase,
+        destroy: () => mesh && mesh.destroy()
+    };
+};
+
+const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
+    const marker1 = marker3D(scene, zoneColor);
+    const marker2 = marker3D(scene, zoneColor);
+    const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                   }
+                               }
+                               : () => { });
+
+    let deactivatePointSelection = select3dPoint(
+        () => {
+            updatePointerLens(null);
+            marker1.update(null);
+        },
+        (canvasPos, worldPos) => {
+            updatePointerLens(canvasPos);
+            marker1.update(worldPos);
+        },
+        function(point1CanvasPos, point1WorldPos) {
+            marker1.update(point1WorldPos);
+
+            deactivatePointSelection = select3dPoint(
+                function() {
+                    updatePointerLens(null);
+                    marker2.update(null);
+                    basePolygon.updateBase(null);
+                },
+                function(canvasPos, point2WorldPos) {
+                    updatePointerLens(canvasPos);
+                    marker2.update(point2WorldPos);
+
+                    if (math.distVec3(point1WorldPos, point2WorldPos) > 0.01)
+                    {
+                        const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
+                        const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
+
+                        const xmin = min(0);
+                        const ymin = min(1);
+                        const zmin = min(2);
+                        const xmax = max(0);
+                        max(1);
+                        const zmax = max(2);
+
+                        basePolygon.updateBase([ [ xmin, ymin, zmax ], [ xmax, ymin, zmax ],
+                                                 [ xmax, ymin, zmin ], [ xmin, ymin, zmin ] ]);
+                    }
+                    else
+                        basePolygon.updateBase(null);
+                },
+                function(point2CanvasPos, point2WorldPos) {
+                    // `marker2.update' makes sure marker's position has been updated from its default [0,0,0]
+                    // This works around an unidentified bug somewhere around OcclusionLayer, that causes error
+                    // [.WebGL-0x13400c47e00] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call
+                    marker2.update(point2WorldPos);
+
+                    marker1.destroy();
+                    marker2.destroy();
+                    basePolygon.destroy();
+                    updatePointerLens(null);
+
+                    const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
+                    const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
+
+                    const xmin = min(0);
+                    const zmin = min(2);
+                    const xmax = max(0);
+                    const zmax = max(2);
+
+                    const zone = zonesPlugin.createZone(
+                        {
+                            id: math.createUUID(),
+                            geometry: {
+                                planeCoordinates: [
+                                    [ xmin, zmax ],
+                                    [ xmax, zmax ],
+                                    [ xmax, zmin ],
+                                    [ xmin, zmin ]
+                                ],
+                                altitude: zoneAltitude,
+                                height: zoneHeight
+                            },
+                            alpha: zoneAlpha,
+                            color: zoneColor
+                        });
+
+                    onZoneCreated(zone);
+                });
+        });
+
+    return {
+        deactivate: function() {
+            deactivatePointSelection();
+            marker1.destroy();
+            marker2.destroy();
+            basePolygon.destroy();
+            updatePointerLens(null);
+        }
+    };
+};
+
+const mousePointSelector = function(viewer, ray2WorldPos) {
+    return function(onCancel, onChange, onCommit) {
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
+        const moveTolerance = 20;
+
+        const copyCanvasPos = (event, vec2) => {
+            vec2[0] = event.clientX;
+            vec2[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.body, canvas, vec2);
+            return vec2;
+        };
+
+        const pickWorldPos = canvasPos => {
+            const origin = math.vec3();
+            const direction = math.vec3();
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            return ray2WorldPos(origin, direction);
+        };
+
+        let buttonDown = false;
+        const resetAction = function() {
+            buttonDown = false;
+        };
+
+        const cleanup = function() {
+            resetAction();
+            canvas.removeEventListener("mousedown", onMouseDown);
+            canvas.removeEventListener("mousemove", onMouseMove);
+            viewer.cameraControl.off(onCameraControlRayMove);
+            canvas.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const startCanvasPos = math.vec2();
+        const onMouseDown = function(event) {
+            if (event.which === 1)
+            {
+                copyCanvasPos(event, startCanvasPos);
+                buttonDown = true;
+            }
+        };
+        canvas.addEventListener("mousedown", onMouseDown);
+
+        const onMouseMove = function(event) {
+            const canvasPos = copyCanvasPos(event, math.vec2());
+            if (buttonDown && math.distVec2(startCanvasPos, canvasPos) > moveTolerance)
+            {
+                resetAction();
+                onCancel();
+            }
+        };
+        canvas.addEventListener("mousemove", onMouseMove);
+
+        const onCameraControlRayMove = viewer.cameraControl.on(
+            "rayMove",
+            event => {
+                const canvasPos = event.canvasPos;
+                onChange(canvasPos, pickWorldPos(canvasPos));
+            });
+
+        const onMouseUp = function(event) {
+            if ((event.which === 1) && buttonDown)
+            {
+                cleanup();
+                const canvasPos = copyCanvasPos(event, math.vec2());
+                onCommit(canvasPos, pickWorldPos(canvasPos));
+            }
+        };
+        canvas.addEventListener("mouseup", onMouseUp);
+
+        return cleanup;
+    };
+};
+
+const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
+    return function(onCancel, onChange, onCommit) {
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
+        const longTouchTimeoutMs = 300;
+        const moveTolerance = 20;
+
+        const copyCanvasPos = (event, vec2) => {
+            vec2[0] = event.clientX;
+            vec2[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.body, canvas, vec2);
+            return vec2;
+        };
+
+        const pickWorldPos = canvasPos => {
+            const origin = math.vec3();
+            const direction = math.vec3();
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            return ray2WorldPos(origin, direction);
+        };
+
+        let longTouchTimeout = null;
+        const nop = () => { };
+        let onSingleTouchMove = nop;
+        let startTouchIdentifier;
+
+        const resetAction = function() {
+            pointerCircle.stop();
+            clearTimeout(longTouchTimeout);
+            viewer.cameraControl.active = true;
+            onSingleTouchMove = nop;
+            startTouchIdentifier = null;
+        };
+
+        const cleanup = function() {
+            resetAction();
+            canvas.removeEventListener("touchstart", onCanvasTouchStart);
+            canvas.removeEventListener("touchmove",  onCanvasTouchMove);
+            canvas.removeEventListener("touchend",   onCanvasTouchEnd);
+        };
+
+        const onCanvasTouchStart = function(event) {
+            const touches = event.touches;
+
+            if (touches.length !== 1)
+            {
+                resetAction();
+                onCancel();
+            }
+            else
+            {
+                const startTouch = touches[0];
+                const startCanvasPos = copyCanvasPos(startTouch, math.vec2());
+
+                const startWorldPos = pickWorldPos(startCanvasPos);
+                if (startWorldPos)
+                {
+                    startTouchIdentifier = startTouch.identifier;
+
+                    onSingleTouchMove = canvasPos => {
+                        if (math.distVec2(startCanvasPos, canvasPos) > moveTolerance)
+                        {
+                            resetAction();
+                        }
+                    };
+
+                    longTouchTimeout = setTimeout(
+                        function() {
+                            pointerCircle.start(startCanvasPos);
+
+                            longTouchTimeout = setTimeout(
+                                function() {
+                                    pointerCircle.stop();
+
+                                    viewer.cameraControl.active = false;
+
+                                    onSingleTouchMove = canvasPos => {
+                                        onChange(canvasPos, pickWorldPos(canvasPos));
+                                    };
+
+                                    onSingleTouchMove(startCanvasPos);
+                                },
+                                longTouchTimeoutMs);
+                        },
+                        250);
+                }
+            }
+        };
+        canvas.addEventListener("touchstart", onCanvasTouchStart, {passive: true});
+
+        // canvas.addEventListener("touchcancel", e => console.log("touchcancel", e), {passive: true});
+
+        const onCanvasTouchMove = function(event) {
+            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+            if (touch)
+            {
+                onSingleTouchMove(copyCanvasPos(touch, math.vec2()));
+            }
+        };
+        canvas.addEventListener("touchmove", onCanvasTouchMove, {passive: true});
+
+        const onCanvasTouchEnd = function(event) {
+            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+            if (touch)
+            {
+                cleanup();
+                const canvasPos = copyCanvasPos(touch, math.vec2());
+                onCommit(canvasPos, pickWorldPos(canvasPos));
+            }
+        };
+        canvas.addEventListener("touchend", onCanvasTouchEnd, {passive: true});
+
+        return cleanup;
+    };
+};
+
+const planeIntersect = function(p0, n, origin, direction) {
+    const t = - (math.dotVec3(origin, n) - p0) / math.dotVec3(direction, n);
+    {
+        const worldPos = math.vec3();
+        math.mulVec3Scalar(direction, t, worldPos);
+        math.addVec3(origin, worldPos, worldPos);
+        return worldPos;
+    }
+};
+
+/**
+ * @desc Renders a transparent box between two 3D points.
+ *
+ * See {@link ZonesPlugin} for more info.
+ */
+
+class Zone extends Component {
+
+    /**
+     * @private
+     */
+    constructor(plugin, cfg = {}) {
+
+        super(plugin.viewer.scene, cfg);
+
+        /**
+         * The {@link ZonesPlugin} that owns this Zone.
+         * @type {ZonesPlugin}
+         */
+        this.plugin = plugin;
+
+        this._container = cfg.container;
+        if (!this._container) {
+            throw "config missing: container";
+        }
+
+        this._eventSubs = {};
+
+        this.plugin.viewer.scene;
+
+        this._geometry = cfg.geometry;
+
+        cfg.onMouseOver ? (event) => {
+            cfg.onMouseOver(event, this);
+            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseover', event));
+        } : null;
+
+        cfg.onMouseLeave ? (event) => {
+            cfg.onMouseLeave(event, this);
+            this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mouseleave', event));
+        } : null;
+
+        cfg.onContextMenu ? (event) => {
+            cfg.onContextMenu(event, this);
+        } : null;
+
+        this._alpha = (("alpha" in cfg) && (cfg.alpha !== undefined)) ? cfg.alpha : 0.5;
+        this.color = cfg.color;
+
+        this._visible = true;
+
+        this._rebuildMesh();
+    }
+
+    _rebuildMesh() {
+        const scene       = this.plugin.viewer.scene;
+        const planeCoords = this._geometry.planeCoordinates.slice();
+        const downward    = this._geometry.height < 0;
+        const altitude    = this._geometry.altitude + (downward ? this._geometry.height : 0);
+        const height      = this._geometry.height * (downward ? -1 : 1);
+
+        const [ baseVertices, baseTriangles ] = triangulateEarClipping(planeCoords); // TODO: prevent crossing edges
+
+        const pos = [ ];
+        const ind = [ ];
+
+
+        const addPlane = (isCeiling) => {
+            const baseIdx = pos.length;
+
+            for (let c of baseVertices) {
+                pos.push([ c[0], altitude + (isCeiling ? height : 0), c[1] ]);
+            }
+
+            for (let t of baseTriangles) {
+                ind.push(...(isCeiling ? t : t.slice(0).reverse()).map(i => i + baseIdx));
+            }
+        };
+        addPlane(false);        // floor
+        addPlane(true);         // ceiling
+
+
+        // sides
+        for (let i = 0; i < baseVertices.length; ++i) {
+            const a = baseVertices[i];
+            const b = baseVertices[(i+1) % baseVertices.length];
+            const f = altitude;
+            const c = altitude + height;
+
+            const baseIdx = pos.length;
+
+            pos.push(
+                [ a[0], f, a[1] ],
+                [ b[0], f, b[1] ],
+                [ b[0], c, b[1] ],
+                [ a[0], c, a[1] ]
+            );
+
+            ind.push(...[ 0, 1, 2, 0, 2, 3 ].map(i => i + baseIdx));
+        }
+
+
+        if (this._zoneMesh) {
+            this._zoneMesh.destroy();
+        }
+
+
+        const positions = [].concat(...pos);
+        this._zoneMesh = new Mesh(scene, {
+            edges: this._edges,
+            geometry: new ReadableGeometry(
+                scene,
+                {
+                    positions: positions,
+                    indices:   ind,
+                    normals:   math.buildNormals(positions, ind)
+                }),
+            material: new PhongMaterial(scene, {
+                alpha: this._alpha,
+                backfaces: true,
+                diffuse: hex2rgb(this._color)
+            }),
+            visible: this._visible
+        });
+        this._zoneMesh.highlighted = this._highlighted;
+
+        this._zoneMesh.zone = this;
+
+
+        const min = idx => Math.min(...pos.map(p => p[idx]));
+        const max = idx => Math.max(...pos.map(p => p[idx]));
+
+        const xmin = min(0);
+        const ymin = min(1);
+        const zmin = min(2);
+        const xmax = max(0);
+        const ymax = max(1);
+        const zmax = max(2);
+
+        this._center = math.vec3([ (xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2 ]);
+    }
+
+    sectionedAverage(sectionPlanes) {
+        const planeCoords = this._geometry.planeCoordinates.slice();
+
+        let faces = [ ];
+        {
+            const h = this._geometry.height;
+            const a = this._geometry.altitude;
+            const c = a + Math.max(0, h);
+            const f = a + Math.min(0, h);
+
+            const addPlane = (isCeiling) => {
+                const face = planeCoords.map(p => [ p[0], isCeiling ? c : f, p[1] ]);
+                faces.push(isCeiling ? face : face.slice(0).reverse());
+            };
+            addPlane(true);     // ceiling
+            addPlane(false);    // floor
+
+            // sides
+            const p = (idx, y) => [ planeCoords[idx][0], y, planeCoords[idx][1] ];
+            for (let i = 0; i < planeCoords.length; ++i)
+            {
+                const j = (i + 1) % planeCoords.length;
+                faces.push([ p(i, f), p(j, f), p(j, c), p(i, c) ]);
+            }
+        }
+
+        for (const s of sectionPlanes)
+        {
+            const dir = s.dir;
+            const dist = s.dist;
+            const newFaces = [ ];
+
+            for (const face of faces)
+            {
+                const EPSILON = 1e-5;
+                const COPLANAR = 0;
+                const FRONT = 1;
+                const BACK = 2;
+                const SPANNING = 3;
+
+                // Classify each point as well as the entire polygon into one of the above four classes.
+                let polygonType = 0;
+                const types = [ ];
+                for (let i = 0; i < face.length; i++) {
+                    const t = math.dotVec3(dir, face[i]) + dist;
+                    const type = (t < -EPSILON) ? BACK : (t > EPSILON) ? FRONT : COPLANAR;
+                    polygonType |= type;
+                    types.push(type);
+                }
+
+                // Put the polygon in the correct list, splitting it when necessary.
+                switch (polygonType) {
+                case COPLANAR:
+                    newFaces.push(face);
+                    break;
+                case FRONT:
+                    newFaces.push(face);
+                    break;
+                case BACK:
+                    break;
+                case SPANNING:
+                    const f = [ ];
+                    for (let i = 0; i < face.length; i++)
+                    {
+                        var j = (i + 1) % face.length;
+                        const ti = types[i];
+                        const tj = types[j];
+                        const vi = face[i];
+                        const vj = face[j];
+                        if (ti !== BACK)
+                        {
+                            f.push(vi);
+                        }
+
+                        if ((ti | tj) === SPANNING)
+                        {
+                            const diff = math.vec3();
+                            math.subVec3(vj, vi, diff);
+                            const t = - (dist + math.dotVec3(dir, vi)) / math.dotVec3(dir, diff);
+                            const v = [0,0,0];
+                            math.lerpVec3(t, 0, 1, vi, vj, v);
+                            f.push(v);
+                        }
+                    }
+                    if (f.length >= 3)
+                    {
+                        newFaces.push(f);
+                    }
+                    break;
+                }
+            }
+
+            faces = newFaces;
+        }
+
+        if (faces.length === 0)
+        {
+            return null;
+        }
+        else
+        {
+            const avg = math.vec3([ 0, 0, 0 ]);
+            const unique = new Set();
+
+            for (const f of faces)
+            {
+                for (const p of f)
+                {
+                    const id = p.map(x => x.toFixed(3)).join(":");
+                    if (! (unique.has(id)))
+                    {
+                        unique.add(id);
+                        math.addVec3(avg, p, avg);
+                    }
+                }
+            }
+
+            math.mulVec3Scalar(avg, 1 / unique.size, avg);
+
+            return avg;
+        }
+    }
+
+    get center() {
+        return this._center;
+    }
+
+    get altitude() {
+        return this._geometry.altitude;
+    }
+
+    set altitude(value) {
+        this._geometry.altitude = value;
+        this._rebuildMesh();
+    }
+
+    get height() {
+        return this._geometry.height;
+    }
+
+    set height(value) {
+        this._geometry.height = value;
+        this._rebuildMesh();
+    }
+
+    get highlighted() {
+        return this._highlighted;
+    }
+
+    set highlighted(value)
+    {
+        this._highlighted = value;
+        if (this._zoneMesh) {
+            this._zoneMesh.highlighted = value;
+        }
+    }
+
+    set color(value) {
+        this._color = value;
+        if (this._zoneMesh) {
+            this._zoneMesh.material.diffuse = hex2rgb(this._color);
+        }
+    }
+
+    get color() {
+        return this._color;
+    }
+
+    set alpha(value) {
+        this._alpha = value;
+        if (this._zoneMesh) {
+            this._zoneMesh.material.alpha = this._alpha;
+        }
+    }
+
+    get alpha() {
+        return this._alpha;
+    }
+
+    get edges() {
+        return this._edges;
+    }
+
+    set edges(edges) {
+        this._edges = edges;
+        if (this._zoneMesh) {
+            this._zoneMesh.edges = this._edges;
+        }
+    }
+
+    /**
+     * Sets whether this Zone is visible or not.
+     *
+     * @type {Boolean}
+     */
+    set visible(value) {
+        this._visible = !!value;
+        this._zoneMesh.visible = this._visible;
+        this._needUpdate();
+    }
+
+    /**
+     * Gets whether this Zone is visible or not.
+     *
+     * @type {Boolean}
+     */
+    get visible() {
+        return this._visible;
+    }
+
+    /**
+     * Gets this Zone as JSON.
+     *
+     * @returns {JSON}
+     */
+
+    getJSON() {
+        return {
+            id: this.id,
+            geometry: this._geometry,
+            alpha: this._alpha,
+            color: this._color
+        };
+    }
+
+    duplicate() {
+        return this.plugin.createZone(
+            {
+                id: math.createUUID(),
+                geometry: {
+                    planeCoordinates: this._geometry.planeCoordinates.map(c => c.slice()),
+                    altitude: this._geometry.altitude,
+                    height: this._geometry.height
+                },
+                alpha: this._alpha,
+                color: this._color
+            });
+    }
+
+    /**
+     * @private
+     */
+    destroy() {
+        this._zoneMesh.destroy();
+        super.destroy();
+    }
+}
+
+/**
+ * Creates {@link Zone}s in a {@link ZonesPlugin} from mouse input.
+ *
+ * ## Usage
+ *
+ * [[Run example](/examples/measurement/#distance_createWithMouse_snapping)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, ZonesPlugin, ZonesMouseControl} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ * });
+ *
+ * viewer.camera.eye = [-3.93, 2.85, 27.01];
+ * viewer.camera.look = [4.40, 3.72, 8.89];
+ * viewer.camera.up = [-0.01, 0.99, 0.039];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const sceneModel = xktLoader.load({
+ *     id: "myModel",
+ *     src: "Duplex.xkt"
+ * });
+ *
+ * const zones = new ZonesPlugin(viewer);
+ *
+ * const zonesControl  = new ZonesMouseControl(Zones)
+ * ````
+ */
+class ZonesMouseControl extends Component {
+
+    /**
+     * Creates a ZonesMouseControl bound to the given ZonesPlugin.
+     *
+     * @param {ZonesPlugin} zonesPlugin The ZonesPlugin to control.
+     * @param [cfg] Configuration
+     * @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor when snapping is enabled.
+     */
+    constructor(zonesPlugin, cfg = {}) {
+        super(zonesPlugin.viewer.scene);
+
+        this.zonesPlugin = zonesPlugin;
+        this.pointerLens = cfg.pointerLens;
+        this._deactivate = null;
+    }
+
+    get active() {
+        return !! this._deactivate;
+    }
+
+    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
+
+        if (this._deactivate) {
+            return;
+        }
+
+        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
+            const params = zoneAltitude;
+            const param = (name, defaultValue) => {
+                if (name in params) {
+                    return params[name];
+                } else if (defaultValue !== undefined) {
+                    return defaultValue;
+                } else {
+                    throw "config missing: " + name;
+                }
+            };
+
+            zoneAltitude = param("altitude");
+            zoneHeight   = param("height");
+            zoneColor    = param("color", "#008000");
+            zoneAlpha    = param("alpha", 0.5);
+        }
+
+        const zonesPlugin = this.zonesPlugin;
+        const viewer = zonesPlugin.viewer;
+        const scene = viewer.scene;
+        const self = this;
+
+        const select3dPoint = mousePointSelector(
+            viewer,
+            function(origin, direction) {
+                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
+            });
+
+        (function rec() {
+            self._deactivate = startAAZoneCreateUI(
+                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
+                zone => {
+                    let reactivate = true;
+                    self._deactivate = () => { reactivate = false; };
+                    self.fire("zoneEnd", zone);
+                    if (reactivate)
+                    {
+                        rec();
+                    }
+                }).deactivate;
+        })();
+    }
+
+    deactivate() {
+        if (this._deactivate)
+        {
+            this._deactivate();
+            this._deactivate = null;
+        }
+    }
+
+    /**
+     * Destroys this ZonesMouseControl.
+     *
+     * Destroys any {@link Zone} under construction by this ZonesMouseControl.
+     */
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
+/**
+ * ZonesPlugin documentation to be added, mostly compatible with DistanceMeasurementsPlugin.
+ */
+class ZonesPlugin extends Plugin {
+
+    /**
+     * @constructor
+     * @param {Viewer} viewer The Viewer.
+     * @param {Object} [cfg]  Plugin configuration.
+     * @param {String} [cfg.id="Zones"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
+     * @param {HTMLElement} [cfg.container] Container DOM element for markers and labels. Defaults to ````document.body````.
+     * @param {string} [cfg.defaultColor=#00BBFF] The default color of the length dots, wire and label.
+     * @param {number} [cfg.zIndex] If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels).
+     * @param {PointerCircle} [cfg.pointerLens] A PointerLens to help the user position the pointer. This can be shared with other plugins.
+     */
+    constructor(viewer, cfg = {}) {
+
+        super("Zones", viewer);
+
+        this._pointerLens = cfg.pointerLens;
+
+        this._container = cfg.container || document.body;
+
+        this._zones = [ ];
+
+        this.defaultColor = cfg.defaultColor !== undefined ? cfg.defaultColor : "#00BBFF";
+        this.zIndex = cfg.zIndex || 10000;
+
+        this._onMouseOver = (event, zone) => {
+            this.fire("mouseOver", {
+                plugin: this,
+                zone,
+                event
+            });
+        };
+
+        this._onMouseLeave = (event, zone) => {
+            this.fire("mouseLeave", {
+                plugin: this,
+                zone,
+                event
+            });
+        };
+
+        this._onContextMenu = (event, zone) => {
+            this.fire("contextMenu", {
+                plugin: this,
+                zone,
+                event
+            });
+        };
+    }
+
+    /**
+     * Creates a {@link Zone}.
+     *
+     * The Zone is then registered by {@link Zone#id} in {@link ZonesPlugin#zones}.
+     *
+     * @param {Object} params {@link Zone} configuration.
+     * @param {String} params.id Unique ID to assign to {@link Zone#id}. The Zone will be registered by this in {@link ZonesPlugin#zones} and {@link Scene.components}. Must be unique among all components in the {@link Viewer}.
+     * @param {Number[]} params.origin.worldPos Origin World-space 3D position.
+     * @param {Entity} params.origin.entity Origin Entity.
+     * @param {Number[]} params.target.worldPos Target World-space 3D position.
+     * @param {Entity} params.target.entity Target Entity.
+     * @param {string} [params.color] The color of the length dot, wire and label.
+     * @returns {Zone} The new {@link Zone}.
+     */
+    createZone(params = {}) {
+        if (this.viewer.scene.components[params.id]) {
+            this.error("Viewer scene component with this ID already exists: " + params.id);
+            delete params.id;
+        }
+
+        const zone = new Zone(this, {
+            id: params.id,
+            plugin: this,
+            container: this._container,
+            geometry: params.geometry,
+            alpha: params.alpha,
+            color: params.color,
+            onMouseOver: this._onMouseOver,
+            onMouseLeave: this._onMouseLeave,
+            onContextMenu: this._onContextMenu
+        });
+        this._zones.push(zone);
+        zone.on("destroyed", () => {
+            const idx = this._zones.indexOf(zone);
+            if (idx >= 0) {
+                this._zones.splice(idx, 1);
+            }
+        });
+        this.fire("zoneCreated", zone);
+        return zone;
+    }
+
+    /**
+     * Gets the existing {@link Zone}s, each mapped to its {@link Zone#id}.
+     *
+     * @type {{String:Zone}}
+     */
+    get zones() {
+        return this._zones;
+    }
+
+    /**
+     * Destroys this ZonesPlugin.
+     *
+     * Destroys all {@link Zone}s first.
+     */
+    destroy() {
+        super.destroy();
+    }
+}
+
+class ZonesTouchControl extends Component {
+
+    constructor(zonesPlugin, cfg = {}) {
+        super(zonesPlugin.viewer.scene);
+
+        this.zonesPlugin = zonesPlugin;
+        this.pointerLens = cfg.pointerLens;
+        this.pointerCircle = new PointerCircle(zonesPlugin.viewer);
+        this._deactivate = null;
+    }
+
+    get active() {
+        return !! this._deactivate;
+    }
+
+    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
+
+        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
+            const params = zoneAltitude;
+            const param = (name, defaultValue) => {
+                if (name in params) {
+                    return params[name];
+                } else if (defaultValue !== undefined) {
+                    return defaultValue;
+                } else {
+                    throw "config missing: " + name;
+                }
+            };
+
+            zoneAltitude = param("altitude");
+            zoneHeight   = param("height");
+            zoneColor    = param("color", "#008000");
+            zoneAlpha    = param("alpha", 0.5);
+        }
+
+        if (this._deactivate) {
+            return;
+        }
+
+        const zonesPlugin = this.zonesPlugin;
+        const viewer = zonesPlugin.viewer;
+        const scene = viewer.scene;
+        const self = this;
+
+        const select3dPoint = touchPointSelector(
+            viewer,
+            this.pointerCircle,
+            function(origin, direction) {
+                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
+            });
+
+        (function rec() {
+            self._deactivate = startAAZoneCreateUI(
+                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
+                zone => {
+                    let reactivate = true;
+                    self._deactivate = () => { reactivate = false; };
+                    self.fire("zoneEnd", zone);
+                    if (reactivate)
+                    {
+                        rec();
+                    }
+                }).deactivate;
+        })();
+    }
+
+    deactivate() {
+        if (this._deactivate)
+        {
+            this._deactivate();
+            this._deactivate = null;
+        }
+    }
+
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
+const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                   }
+                               }
+                               : () => { });
+
+    let deactivatePointSelection;
+    const cleanups = [ () => updatePointerLens(null) ];
+
+    const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+    cleanups.push(() => basePolygon.destroy());
+
+    (function selectNextPoint(markers) {
+        const marker = marker3D(scene, zoneColor);
+        const wire = (markers.length > 0) && wire3D(scene, zoneColor, markers[markers.length - 1].getWorldPos());
+
+        cleanups.push(() => {
+            marker.destroy();
+            wire && wire.destroy();
+        });
+
+        const firstMarker = (markers.length > 0) && markers[0];
+        const getSnappedFirst = function(canvasPos) {
+            const firstCanvasPos = firstMarker && firstMarker.getCanvasPos();
+            const snapToFirst = firstCanvasPos && (math.distVec2(firstCanvasPos, canvasPos) < 10);
+            return snapToFirst && { canvasPos: firstCanvasPos, worldPos: firstMarker.getWorldPos() };
+        };
+
+        const lastSegmentIntersects = (function() {
+            const onSegment = (p, q, r) => ((q[0] <= Math.max(p[0], r[0])) &&
+                                            (q[0] >= Math.min(p[0], r[0])) &&
+                                            (q[1] <= Math.max(p[1], r[1])) &&
+                                            (q[1] >= Math.min(p[1], r[1])));
+
+            const orient = (p, q, r) => {
+                const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+                // collinear
+                // clockwise
+                // counterclockwise
+                return ((val === 0) ? 0 : ((val > 0) ? 1 : 2));
+            };
+
+            return function(pos2D, excludeFirstSegment) {
+                const a = pos2D[pos2D.length - 2];
+                const b = pos2D[pos2D.length - 1];
+
+                for (let i = excludeFirstSegment ? 1 : 0; i < pos2D.length - 2 - 1; ++i)
+                {
+                    const c = pos2D[i];
+                    const d = pos2D[i + 1];
+
+                    const o1 = orient(a, b, c);
+                    const o2 = orient(a, b, d);
+                    const o3 = orient(c, d, a);
+                    const o4 = orient(c, d, b);
+
+                    if (((o1 !== o2) && (o3 !== o4))       || // General case
+                        ((o1 === 0) && onSegment(a, c, b)) || // a, b and c are collinear and c lies on segment ab
+                        ((o2 === 0) && onSegment(a, d, b)) || // a, b and d are collinear and d lies on segment ab
+                        ((o3 === 0) && onSegment(c, a, d)) || // c, d and a are collinear and a lies on segment cd
+                        ((o4 === 0) && onSegment(c, b, d)))   // c, d and b are collinear and b lies on segment cd
+                    {
+                        return true;
+                    }
+                }
+
+                return false;
+            };
+        })();
+
+        deactivatePointSelection = select3dPoint(
+            () => {
+                updatePointerLens(null);
+                marker.update(null);
+                wire && wire.update(null);
+                basePolygon.updateBase((markers.length > 2) ? markers.map(m => m.getWorldPos()) : null);
+            },
+            (canvasPos, worldPos) => {
+                const snappedFirst = (markers.length > 2) && getSnappedFirst(canvasPos);
+                firstMarker && firstMarker.setHighlighted(!! snappedFirst);
+                updatePointerLens(snappedFirst ? snappedFirst.canvasPos : canvasPos);
+                marker.update((! snappedFirst) && worldPos);
+                wire && wire.update(snappedFirst ? snappedFirst.worldPos : worldPos);
+                if ((markers.length >= 2))
+                {
+                    const pos = markers.map(m => m.getWorldPos()).concat(snappedFirst ? [] : [worldPos]);
+                    const inter = lastSegmentIntersects(pos.map(p => [ p[0], p[2] ]), snappedFirst);
+                    basePolygon.updateBase(inter ? null : pos);
+                }
+                else
+                    basePolygon.updateBase(null);
+            },
+            function(canvasPos, worldPos) {
+                const snappedFirst = (markers.length > 2) && getSnappedFirst(canvasPos);
+                const pos = markers.map(m => m.getWorldPos()).concat(snappedFirst ? [] : [worldPos]);
+                basePolygon.updateBase(pos);
+                const pos2D = pos.map(p => [ p[0], p[2] ]);
+                if ((markers.length > 2) && lastSegmentIntersects(pos2D, snappedFirst))
+                {
+                    cleanups.pop()();
+                    selectNextPoint(markers);
+                }
+                else if (snappedFirst)
+                {
+                    // `marker2.update' makes sure marker's position has been updated from its default [0,0,0]
+                    // This works around an unidentified bug somewhere around OcclusionLayer, that causes error
+                    // [.WebGL-0x13400c47e00] GL_INVALID_OPERATION: Vertex buffer is not big enough for the draw call
+                    marker.update(worldPos);
+
+                    cleanups.forEach(c => c());
+                    onZoneCreated(
+                        zonesPlugin.createZone(
+                            {
+                                id: math.createUUID(),
+                                geometry: {
+                                    planeCoordinates: pos2D,
+                                    altitude: zoneAltitude,
+                                    height: zoneHeight
+                                },
+                                alpha: zoneAlpha,
+                                color: zoneColor
+                            }));
+                }
+                else
+                {
+                    marker.update(worldPos);
+                    wire && wire.update(worldPos);
+                    selectNextPoint(markers.concat(marker));
+                }
+            });
+    })([ ]);
+
+    return {
+        closeSurface: function() {
+            throw "TODO";
+        },
+        deactivate: function() {
+            deactivatePointSelection();
+            cleanups.forEach(c => c());
+        }
+    };
+};
+
+class ZonesPolysurfaceMouseControl extends Component {
+
+    constructor(zonesPlugin, cfg = {}) {
+        super(zonesPlugin.viewer.scene);
+
+        this.zonesPlugin = zonesPlugin;
+        this.pointerLens = cfg.pointerLens;
+        this._action = null;
+    }
+
+    get active() {
+        return !! this._action;
+    }
+
+    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
+
+        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
+            const params = zoneAltitude;
+            const param = (name, defaultValue) => {
+                if (name in params) {
+                    return params[name];
+                } else if (defaultValue !== undefined) {
+                    return defaultValue;
+                } else {
+                    throw "config missing: " + name;
+                }
+            };
+
+            zoneAltitude = param("altitude");
+            zoneHeight   = param("height");
+            zoneColor    = param("color", "#008000");
+            zoneAlpha    = param("alpha", 0.5);
+        }
+
+        if (this._action) {
+            return;
+        }
+
+        const zonesPlugin = this.zonesPlugin;
+        const viewer = zonesPlugin.viewer;
+        const scene = viewer.scene;
+        const self = this;
+
+        const select3dPoint = mousePointSelector(
+            viewer,
+            function(origin, direction) {
+                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
+            });
+
+        (function rec() {
+            self._action = startPolysurfaceZoneCreateUI(
+                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
+                zone => {
+                    let reactivate = true;
+                    self._action = { deactivate: () => { reactivate = false; } };
+                    self.fire("zoneEnd", zone);
+                    if (reactivate)
+                    {
+                        rec();
+                    }
+                });
+        })();
+    }
+
+    deactivate() {
+        if (this._action)
+        {
+            this._action.deactivate();
+            this._action = null;
+        }
+    }
+
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
+class ZonesPolysurfaceTouchControl extends Component {
+
+    constructor(zonesPlugin, cfg = {}) {
+        super(zonesPlugin.viewer.scene);
+
+        this.zonesPlugin = zonesPlugin;
+        this.pointerLens = cfg.pointerLens;
+        this.pointerCircle = new PointerCircle(zonesPlugin.viewer);
+        this._action = null;
+    }
+
+    get active() {
+        return !! this._action;
+    }
+
+    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
+
+        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
+            const params = zoneAltitude;
+            const param = (name, defaultValue) => {
+                if (name in params) {
+                    return params[name];
+                } else if (defaultValue !== undefined) {
+                    return defaultValue;
+                } else {
+                    throw "config missing: " + name;
+                }
+            };
+
+            zoneAltitude = param("altitude");
+            zoneHeight   = param("height");
+            zoneColor    = param("color", "#008000");
+            zoneAlpha    = param("alpha", 0.5);
+        }
+
+        if (this._action) {
+            return;
+        }
+
+        const zonesPlugin = this.zonesPlugin;
+        const viewer = zonesPlugin.viewer;
+        const scene = viewer.scene;
+        const self = this;
+
+        const select3dPoint = touchPointSelector(
+            viewer,
+            this.pointerCircle,
+            function(origin, direction) {
+                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
+            });
+
+        (function rec() {
+            self._action = startPolysurfaceZoneCreateUI(
+                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
+                zone => {
+                    let reactivate = true;
+                    self._action = { deactivate: () => { reactivate = false; } };
+                    self.fire("zoneEnd", zone);
+                    if (reactivate)
+                    {
+                        rec();
+                    }
+                });
+        })();
+    }
+
+    deactivate() {
+        if (this._action)
+        {
+            this._action.deactivate();
+            this._action = null;
+        }
+    }
+
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+}
+
+class ZoneEditControl extends Component {
+    constructor(zone, cfg, handleMouseEvents, handleTouchEvents) {
+        super(zone.plugin.viewer.scene);
+        const self = this;
+
+        const altitude = zone._geometry.altitude;
+        const pointerLens = cfg && cfg.pointerLens;
+        const updatePointerLens = (pointerLens
+                                   ? function(canvasPos) {
+                                       pointerLens.visible = !! canvasPos;
+                                       if (canvasPos)
+                                       {
+                                           pointerLens.canvasPos = canvasPos;
+                                       }
+                                   }
+                                   : () => { });
+
+        const dots = zone._geometry.planeCoordinates.map(planeCoord => {
+            let initWorldPos, initPlaneCoord;
+            const setPlaneCoord = function(coord) {
+                planeCoord[0] = coord[0];
+                planeCoord[1] = coord[1];
+                try {
+                    zone._rebuildMesh();
+                } catch (e) {
+                    if (zone._zoneMesh) {
+                        zone._zoneMesh.destroy();
+                        zone._zoneMesh = null;
+                    }
+                }
+            };
+
+            const dot = draggableDot3D(
+                handleMouseEvents,
+                handleTouchEvents,
+                zone.plugin.viewer,
+                math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
+                zone._color,
+                (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
+                () => {
+                    initWorldPos = dot.getWorldPos().slice();
+                    initPlaneCoord = planeCoord.slice();
+                    set_other_dots_active(false, dot);
+                },
+                (canvasPos, worldPos) => {
+                    updatePointerLens(canvasPos);
+                    setPlaneCoord([ worldPos[0], worldPos[2] ]);
+                },
+                () => {
+                    if (zone._zoneMesh)
+                    {
+                        self.fire("edited");
+                    }
+                    else
+                    {
+                        dot.setWorldPos(initWorldPos);
+                        setPlaneCoord(initPlaneCoord);
+                    }
+                    updatePointerLens(null);
+                    set_other_dots_active(true, dot);
+                });
+            return dot;
+        });
+        const set_other_dots_active = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));
+        set_other_dots_active(true);
+
+        const cleanup = function() {
+            dots.forEach(m => m.destroy());
+            updatePointerLens(null);
+        };
+
+        const destroyCb = zone.on("destroyed", cleanup);
+
+        this._deactivate = function() {
+            zone.off("destroyed", destroyCb);
+            cleanup();
+        };
+    }
+
+    deactivate() {
+        this._deactivate();
+        super.destroy();
+    }
+}
+
+class ZoneEditMouseControl extends ZoneEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, true, false);
+    }
+}
+
+class ZoneEditTouchControl extends ZoneEditControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, false, true);
+    }
+}
+
+
+class ZoneTranslateControl extends Component {
+    constructor(zone, cfg, handleMouseEvents, handleTouchEvents) {
+        const viewer = zone.plugin.viewer;
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
+
+        super(scene);
+        const self = this;
+
+        const altitude = zone._geometry.altitude;
+        const pointerLens = cfg && cfg.pointerLens;
+        const updatePointerLens = (pointerLens
+                                   ? function(canvasPos) {
+                                       pointerLens.visible = !! canvasPos;
+                                       if (canvasPos)
+                                       {
+                                           pointerLens.canvasPos = canvasPos;
+                                       }
+                                   }
+                                   : () => { });
+
+        const ray2WorldPos = (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir);
+
+        const pickWorldPos = canvasPos => {
+            const origin = math.vec3();
+            const direction = math.vec3();
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            return ray2WorldPos(origin, direction);
+        };
+
+        const copyCanvasPos = (event, vec2) => {
+            vec2[0] = event.clientX;
+            vec2[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.body, canvas, vec2);
+            return vec2;
+        };
+
+        const canvasHandle = function(type, cb) {
+            const callback = event => {
+                event.preventDefault();
+                cb(event);
+            };
+            canvas.addEventListener(type, callback);
+            return () => canvas.removeEventListener(type, callback);
+        };
+
+        let cleanupCurrentDrag = () => { };
+
+        const startDrag = function(event, onMoveType, onEndType, matchesEvent) {
+            const e = matchesEvent(event);
+            const canvasPos = copyCanvasPos(e, math.vec2());
+            const pickRecord = viewer.scene.pick({ canvasPos: canvasPos, includeEntities: [ zone._zoneMesh.id ] });
+            const pickZone = pickRecord && pickRecord.entity && pickRecord.entity.zone;
+
+            if (pickZone === zone)
+            {
+                cleanupCurrentDrag();
+
+                canvas.style.cursor = "move";
+                viewer.cameraControl.active = false;
+
+                const onChange = (function() {
+                    const initCoords = zone._geometry.planeCoordinates.map(c => c.slice());
+                    const initWorldPos = pickWorldPos(canvasPos);
+                    const initDragCoord = math.vec2([ initWorldPos[0], initWorldPos[2] ]);
+                    const dPos = math.vec2();
+
+                    return function(canvasPos) {
+                        const worldPos = pickWorldPos(canvasPos);
+                        dPos[0] = worldPos[0];
+                        dPos[1] = worldPos[2];
+                        math.subVec2(initDragCoord, dPos, dPos);
+
+                        zone._geometry.planeCoordinates.forEach((planeCoord, idx) => {
+                            math.subVec2(initCoords[idx], dPos, planeCoord);
+                        });
+
+                        try {
+                            zone._rebuildMesh();
+                        } catch (e) {
+                            if (zone._zoneMesh) {
+                                zone._zoneMesh.destroy();
+                                zone._zoneMesh = null;
+                            }
+                        }
+                    };
+                })();
+
+                const cleanupMove = canvasHandle(
+                    onMoveType,
+                    function(event) {
+                        const e = matchesEvent(event);
+                        if (e)
+                        {
+                            const canvasPos = copyCanvasPos(e, math.vec2());
+                            onChange(canvasPos);
+                            updatePointerLens(canvasPos);
+                        }
+                    });
+
+                const cleanupEnd  = canvasHandle(
+                    onEndType,
+                    function(event) {
+                        const e = matchesEvent(event);
+                        if (e)
+                        {
+                            const canvasPos = copyCanvasPos(e, math.vec2());
+                            onChange(canvasPos);
+                            updatePointerLens(null);
+                            cleanupCurrentDrag();
+                            self.fire("translated");
+                        }
+                    });
+
+                cleanupCurrentDrag = function() {
+                    cleanupCurrentDrag = () => { };
+                    canvas.style.cursor = "default";
+                    viewer.cameraControl.active = true;
+                    cleanupMove();
+                    cleanupEnd();
+                };
+            }
+        };
+
+        const startDragCbs = [ ];
+
+        if (handleMouseEvents) {
+            startDragCbs.push(
+                canvasHandle("mousedown", event => {
+                    if (event.which === 1) {
+                        startDrag(
+                            event,
+                            "mousemove",
+                            "mouseup",
+                            event => (event.which === 1) && event);
+                    }
+                }));
+        }
+
+        if (handleTouchEvents) {
+            startDragCbs.push(
+                canvasHandle("touchstart", event => {
+                    if (event.touches.length === 1) {
+                        const touchStartId = event.touches[0].identifier;
+                        startDrag(
+                            event,
+                            "touchmove",
+                            "touchend",
+                            event => [...event.changedTouches].find(e => e.identifier === touchStartId));
+                    }
+                }));
+        }
+
+        const cleanup = function() {
+            cleanupCurrentDrag();
+            startDragCbs.forEach(cb => cb());
+            updatePointerLens(null);
+        };
+
+        const destroyCb = zone.on("destroyed", cleanup);
+
+        this._deactivate = function() {
+            zone.off("destroyed", destroyCb);
+            cleanup();
+        };
+    }
+
+    deactivate() {
+        this._deactivate();
+        super.destroy();
+    }
+}
+
+class ZoneTranslateMouseControl extends ZoneTranslateControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, true, false);
+    }
+}
+
+class ZoneTranslateTouchControl extends ZoneTranslateControl {
+    constructor(zone, cfg) {
+        super(zone, cfg, false, true);
+    }
+}
+
+export { AlphaFormat, AmbientLight, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };