@xeokit/xeokit-sdk 2.6.72 → 2.6.75

package/dist/xeokit-sdk.es.js

@@ -1,7 +1,7 @@
 /**
- * xeokit-sdk v2.6.71
- *  Commit: 7443626ab66b3eab0018b1ed0ee05d3bfa9f8eae
- *  Built: 2025-03-21T09:02:29.217Z
+ * xeokit-sdk v2.6.75
+ *  Commit: c9b6b9ca6ba5bea44b4e84678d4f9ffbf152086d
+ *  Built: 2025-04-17T10:44:28.149Z
  */
 
 /** @private */
@@ -330,6 +330,7 @@ class ContextMenu {
      * @param {Boolean} [cfg.enabled=true] Whether this ````ContextMenu```` is initially enabled. {@link ContextMenu#show} does nothing while this is ````false````.
      * @param {Boolean} [cfg.hideOnMouseDown=true] Whether this ````ContextMenu```` automatically hides whenever we mouse-down or tap anywhere in the page.
      * @param {Boolean} [cfg.hideOnAction=true] Whether this ````ContextMenu```` automatically hides after we select a menu item. Se false if we want the menu to remain shown and show any updates to its item titles, after we've selected an item.
+     * @param {Node | undefined} [cfg.parentNode] Optional reference to an existing DOM Node (e.g. ShadowRoot), to which the menu's HTML element will be appended, defaults to ````document.body````.
      */
     constructor(cfg = {}) {
 
@@ -344,7 +345,9 @@ class ContextMenu {
         this._itemMap = {};     // Items mapped to their IDs
         this._shown = false;    // True when the ContextMenu is visible
         this._nextId = 0;
-
+        this._parentNode = cfg.parentNode || document.body;
+        this._offsetParent = (this._parentNode instanceof ShadowRoot) ? this._parentNode.host : this._parentNode;
+        
         /**
          * Subscriptions to events fired at this ContextMenu.
          * @private
@@ -352,12 +355,12 @@ class ContextMenu {
         this._eventSubs = {};
 
         if (cfg.hideOnMouseDown !== false) {
-            document.addEventListener("mousedown", (event) => {
+            this._parentNode.addEventListener("mousedown", (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
             });
-            document.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+            this._parentNode.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
@@ -556,7 +559,7 @@ class ContextMenu {
         for (let i = 0, len = this._menuList.length; i < len; i++) {
             const menu = this._menuList[i];
             const menuElement = menu.menuElement;
-            menuElement.parentElement.removeChild(menuElement);
+            menuElement.remove();
         }
         this._itemsCfg = [];
         this._rootMenu = null;
@@ -661,7 +664,10 @@ class ContextMenu {
         const groups = menu.groups;
         const html = [];
 
-        html.push('<div class="xeokit-context-menu ' + menu.id + '" style="z-index:300000; position: absolute;">');
+        const menuElement= document.createElement("div");
+        menuElement.classList.add("xeokit-context-menu", menu.id);
+        menuElement.style.zIndex = 300000;
+        menuElement.style.position = "absolute";
 
         html.push('<ul>');
 
@@ -712,13 +718,10 @@ class ContextMenu {
         }
 
         html.push('</ul>');
-        html.push('</div>');
 
         const htmlString = html.join("");
-
-        document.body.insertAdjacentHTML('beforeend', htmlString);
-
-        const menuElement = document.querySelector("." + menu.id);
+        menuElement.innerHTML = htmlString;
+        this._parentNode.appendChild(menuElement);
 
         menu.menuElement = menuElement;
 
@@ -752,7 +755,7 @@ class ContextMenu {
                         const item = groupItems[j];
                         const itemSubMenu = item.subMenu;
 
-                        item.itemElement = document.getElementById(item.id);
+                        item.itemElement = this._parentNode.querySelector(`#${item.id}`);
 
                         if (!item.itemElement) {
                             console.error("ContextMenu item element not found: " + item.id);
@@ -784,21 +787,22 @@ class ContextMenu {
 
                             const itemRect = itemElement.getBoundingClientRect();
                             subMenuElement.getBoundingClientRect();
+                            const offsetRect = self._offsetParent.getBoundingClientRect();
 
                             const subMenuWidth = 200; // TODO
-                            const showOnRight = (itemRect.right + subMenuWidth) < window.innerWidth;
-                            const showOnLeft = (itemRect.left - subMenuWidth) > 0;
-
+                            const showOnRight = (itemRect.right + subMenuWidth) < offsetRect.right;
+                            const showOnLeft = (itemRect.left - subMenuWidth) > offsetRect.left;
+                        
                             if(showOnRight)
-                                self._showMenu(subMenu.id, itemRect.right - 5, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.right + window.scrollX - 5, itemRect.top + window.scrollY - 1);
                             else if (showOnLeft)
-                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth + window.scrollX, itemRect.top + window.scrollY - 1);
                             else {
-                                const spaceOnLeft = itemRect.left, spaceOnRight = window.innerWidth - itemRect.right;
+                                const spaceOnLeft = itemRect.left - offsetRect.left, spaceOnRight = offsetRect.right - itemRect.right;
                                 if(spaceOnRight > spaceOnLeft) 
-                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top + window.scrollY - 1);
                                 else 
-                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top + window.scrollY - 1);
                             }
 
                             lastSubMenu = subMenu;
@@ -991,14 +995,21 @@ class ContextMenu {
         menuElement.style.display = 'block';
         const menuHeight = menuElement.offsetHeight;
         const menuWidth = menuElement.offsetWidth;
-        if ((pageY + menuHeight) > window.innerHeight) {
-            pageY = window.innerHeight - menuHeight;
+
+        const offsetRect = this._offsetParent.getBoundingClientRect();
+        
+        const bottomContainerBorder = offsetRect.bottom + window.scrollY;
+        const rightContainerBorder = offsetRect.right + window.scrollX;
+        if ((pageY + menuHeight) > bottomContainerBorder) {
+            pageY = bottomContainerBorder- menuHeight;
         }
-        if ((pageX + menuWidth) > window.innerWidth) {
-            pageX = window.innerWidth - menuWidth;
+        if ((pageX + menuWidth) > rightContainerBorder) {
+            pageX = rightContainerBorder - menuWidth;
         }
-        menuElement.style.left = pageX + 'px';
-        menuElement.style.top = pageY + 'px';
+
+
+        menuElement.style.left = pageX - offsetRect.left - window.scrollX + 'px';
+        menuElement.style.top = pageY - offsetRect.top - window.scrollY + 'px';
     }
 
     _hideMenuElement(menuElement) {
@@ -11655,9 +11666,28 @@ const tmpVec4b = math.vec4();
 const tmpVec4c = math.vec4();
 const tmpVec4d = math.vec4();
 const tmpMat4  = math.mat4();
+const tmpRay = {
+    origin:    math.vec3(),
+    direction: math.vec3()
+};
 
 const nop = () => { };
 
+const planeIntersect$1 = function(p0, n, origin, direction) {
+    const t = (p0 - math.dotVec3(origin, n)) / math.dotVec3(direction, n);
+    if (t < 0)
+    {
+        return null;
+    }
+    else
+    {
+        const worldPos = math.vec3();
+        math.mulVec3Scalar(direction, t, worldPos);
+        math.addVec3(origin, worldPos, worldPos);
+        return worldPos;
+    }
+};
+
 function transformToNode(from, to, vec) {
     const fromRec = from.getBoundingClientRect();
     const toRec = to.getBoundingClientRect();
@@ -11919,9 +11949,15 @@ class Label3D {
         this._mid   = math.vec3();
         this._end   = math.vec3();
         this._yOff  = 0;
-        this._betweenWires = false;
         this.__visible = true;
 
+        this._updatePos = () => {
+            toClipSpace(camera, this._start, tmpVec4a);
+            math.mulVec4Scalar(tmpVec4a, 1.0 / tmpVec4a[3]);
+            toCanvasSpace(scene.canvas.canvas, parentElement, tmpVec4a, tmpVec2a);
+            this._label.setPos(tmpVec2a[0], tmpVec2a[1]);
+        };
+
         const setPosOnWire = (p0, p1, yOff) => {
             p0[0] += p1[0];
             p0[1] += p1[1];
@@ -11929,36 +11965,44 @@ class Label3D {
             this._label.setPos(p0[0], p0[1] + yOff);
         };
 
-        this._updatePositions = () => {
-            if (! this.__visible) {
-                return;
+        this._updatePosBetween = () => {
+            const visibleA = clipSegment(scene, parentElement, this._start, this._mid, tmpVec2a, tmpVec2b);
+            const visibleB = clipSegment(scene, parentElement, this._end,   this._mid, tmpVec2c, tmpVec2d);
+            this._label.setCulled(! (visibleA || visibleB));
+            if (visibleA && visibleB) {
+                tmpVec2b[0] += tmpVec2d[0];
+                tmpVec2b[1] += tmpVec2d[1];
+                math.mulVec2Scalar(tmpVec2b, .5);
+
+                tmpVec2b[0] += tmpVec2a[0] + tmpVec2c[0];
+                tmpVec2b[1] += tmpVec2a[1] + tmpVec2c[1];
+                math.mulVec2Scalar(tmpVec2b, 1/3);
+                this._label.setPos(tmpVec2b[0], tmpVec2b[1]);
+            } else if (visibleA) {
+                setPosOnWire(tmpVec2a, tmpVec2b, 0);
+            } else if (visibleB) {
+                setPosOnWire(tmpVec2c, tmpVec2d, 0);
             }
-            if (this._betweenWires) {
-                const visibleA = clipSegment(scene, parentElement, this._start, this._mid, tmpVec2a, tmpVec2b);
-                const visibleB = clipSegment(scene, parentElement, this._end,   this._mid, tmpVec2c, tmpVec2d);
-                this._label.setCulled(! (visibleA || visibleB));
-                if (visibleA && visibleB) {
-                    tmpVec2b[0] += tmpVec2d[0];
-                    tmpVec2b[1] += tmpVec2d[1];
-                    math.mulVec2Scalar(tmpVec2b, .5);
-
-                    tmpVec2b[0] += tmpVec2a[0] + tmpVec2c[0];
-                    tmpVec2b[1] += tmpVec2a[1] + tmpVec2c[1];
-                    math.mulVec2Scalar(tmpVec2b, 1/3);
-                    this._label.setPos(tmpVec2b[0], tmpVec2b[1]);
-                } else if (visibleA) {
-                    setPosOnWire(tmpVec2a, tmpVec2b, 0);
-                } else if (visibleB) {
-                    setPosOnWire(tmpVec2c, tmpVec2d, 0);
-                }
-            } else {
-                const visible = (clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b)
-                                 &&
-                                 (math.distVec2(tmpVec2a, tmpVec2b) >= this._labelMinAxisLength));
-                this._label.setCulled(!visible);
-                if (visible) {
-                    setPosOnWire(tmpVec2a, tmpVec2b, this._yOff);
-                }
+        };
+
+        this._updatePosOnWire = () => {
+            const visible = (clipSegment(scene, parentElement, this._start, this._end, tmpVec2a, tmpVec2b)
+                             &&
+                             (math.distVec2(tmpVec2a, tmpVec2b) >= this._labelMinAxisLength));
+            this._label.setCulled(!visible);
+            if (visible) {
+                setPosOnWire(tmpVec2a, tmpVec2b, this._yOff);
+            }
+        };
+
+        let posUpdate = () => { };
+        this._setUpdatePositions = (_posUpdate) => {
+            posUpdate = _posUpdate;
+            this._updatePositions();
+        };
+        this._updatePositions = () => {
+            if (this.__visible) {
+                posUpdate();
             }
         };
 
@@ -11976,21 +12020,24 @@ class Label3D {
         };
     }
 
+    setPos(p0) {
+        this._start.set(p0);
+        this._setUpdatePositions(this._updatePos);
+    }
+
     setPosOnWire(p0, p1, yOff, labelMinAxisLength) {
         this._start.set(p0);
         this._end.set(p1);
         this._yOff = yOff;
         this._labelMinAxisLength = labelMinAxisLength;
-        this._betweenWires = false;
-        this._updatePositions();
+        this._setUpdatePositions(this._updatePosOnWire);
     }
 
     setPosBetween(p0, p1, p2) {
         this._start.set(p0);
         this._mid.set(p1);
         this._end.set(p2);
-        this._betweenWires = true;
-        this._updatePositions();
+        this._setUpdatePositions(this._updatePosBetween);
     }
 
     setFillColor(value) {
@@ -12093,6 +12140,51 @@ class Wire3D {
 
 }
 
+const marker3D = function(scene, color) {
+    const marker = new Dot3D(scene, {}, scene.canvas.canvas.parentNode, {
+        borderColor: "white",
+        fillColor: color,
+        zIndex: 100
+    });
+
+    return {
+        update: function(worldPos) {
+            if (worldPos)
+            {
+                marker.worldPos = worldPos;
+            }
+            marker.setVisible(!!worldPos);
+        },
+
+        setFillColor:  c => marker.setFillColor(c),
+        setHighlighted: h => marker.setHighlighted(h),
+        getCanvasPos:  () => marker.canvasPos,
+        getWorldPos:   () => marker.worldPos,
+        destroy:       () => marker.destroy()
+    };
+};
+
+const wire3D = function(scene, color) {
+    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
+        color: color,
+        thickness: 1,
+        thicknessClickable: 6   // TODO: Remove to make not clickable?
+    });
+    wire.setVisible(false);
+    return {
+        update: (startWorldPos, endWorldPos) => {
+            if (endWorldPos)
+            {
+                wire.setEnds(startWorldPos, endWorldPos);
+            }
+            wire.setVisible(!!endWorldPos);
+        },
+
+        setColor: c => wire.setColor(c),
+        destroy: () => wire.destroy()
+    };
+};
+
 function activateDraggableDot(dot, cfg) {
     const extractCFG = function(propName, defaultValue) {
         if (propName in cfg) {
@@ -12407,6 +12499,482 @@ const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
     };
 };
 
+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, isCCW ];
+};
+
+const addMousePressListener = function(element, onChange) {
+    const moveTolerance = 4;
+
+    const copyElementPos = (event, out) => {
+        out[0] = event.clientX;
+        out[1] = event.clientY;
+        transformToNode(element.ownerDocument.documentElement, element, out);
+        return out;
+    };
+
+    let buttonDown = false;
+
+    const cleanups = [ ];
+    const cleanup = () => cleanups.forEach(c => c());
+
+    const addElementEventListener = (type, listener) => {
+        element.addEventListener(type, listener);
+        cleanups.push(() => element.removeEventListener(type, listener));
+    };
+
+    const downPos = math.vec2();
+    addElementEventListener("mousedown", function(event) {
+        if (event.which === 1) {
+            buttonDown = true;
+            onChange(copyElementPos(event, downPos));
+        }
+    });
+
+    addElementEventListener("mousemove", function(event) {
+        copyElementPos(event, tmpVec2a);
+        if (buttonDown && (math.distVec2(downPos, tmpVec2a) > moveTolerance)) {
+            buttonDown = false;
+        }
+        if (buttonDown || (! event.buttons & 1)) {
+            onChange(tmpVec2a);
+        }
+    });
+
+    addElementEventListener("mouseup", function(event) {
+        if ((event.which === 1) && buttonDown) {
+            const commit = onChange(copyElementPos(event, tmpVec2a));
+            if (commit) {
+                cleanup();
+                commit();
+            }
+        }
+    });
+
+    return cleanup;
+};
+
+const addTouchPressListener = function(element, cameraControl, pointerCircle, onChange) {
+    const longTouchTimeoutMs = 300;
+    const moveTolerance = 20;
+    const startPos = math.vec2();
+
+    const copyElementPos = (event, out) => {
+        out[0] = event.clientX;
+        out[1] = event.clientY;
+        transformToNode(element.ownerDocument.documentElement, element, out);
+        return out;
+    };
+
+    let longTouchTimeout = null;
+    let onSingleTouchMove = nop;
+    let startTouchIdentifier;
+
+    const resetAction = function() {
+        clearTimeout(longTouchTimeout);
+        pointerCircle.stop();
+        cameraControl.active = true;
+        onSingleTouchMove = nop;
+        startTouchIdentifier = null;
+    };
+
+    const cleanups = [ ];
+    const cleanup = () => cleanups.forEach(c => c());
+
+    const addElementEventListener = (type, listener) => {
+        element.addEventListener(type, listener, {passive: true});
+        cleanups.push(() => element.removeEventListener(type, listener));
+    };
+
+    addElementEventListener("touchstart", function(event) {
+        const touches = event.touches;
+
+        if (touches.length !== 1)
+        {
+            resetAction();
+            onChange(null);
+        }
+        else
+        {
+            const touch = touches[0];
+            copyElementPos(touch, startPos);
+
+            startTouchIdentifier = touch.identifier;
+
+            onSingleTouchMove = elementPos => {
+                if (math.distVec2(startPos, elementPos) > moveTolerance)
+                {
+                    resetAction();
+                }
+            };
+
+            longTouchTimeout = setTimeout(
+                function() {
+                    pointerCircle.start(startPos);
+
+                    longTouchTimeout = setTimeout(
+                        function() {
+                            pointerCircle.stop();
+                            cameraControl.active = false;
+                            onSingleTouchMove = onChange;
+                            onSingleTouchMove(startPos);
+                        },
+                        longTouchTimeoutMs);
+                },
+                250);
+        }
+    });
+
+    // element.addEventListener("touchcancel", e => console.log("touchcancel", e), {passive: true});
+
+    addElementEventListener("touchmove", function(event) {
+        const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+        if (touch)
+        {
+            onSingleTouchMove(copyElementPos(touch, tmpVec2a));
+        }
+    });
+
+    addElementEventListener("touchend", function(event) {
+        const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+        if (touch)
+        {
+            const commit = onChange(copyElementPos(touch, tmpVec2a));
+            resetAction();
+	    if (commit) {
+	        cleanup();
+		commit();
+	    } else {
+                onChange(null);
+            }
+        }
+    });
+
+    return () => {
+        resetAction();
+        cleanup();
+    };
+};
+
+const startPolygonCreate = function(scene, pointerLens, addPressListener, pickRayResult, onChange, onConclude) {
+    const canvas = scene.canvas.canvas;
+
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos, isSnapped) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                       pointerLens.snapped = !! isSnapped;
+                                   }
+                               }
+                               : () => { });
+
+    const testLastSegmentIntersects = (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, lastSegmentClosesLoop) {
+            const s = lastSegmentClosesLoop ? 1 : 0;
+            const a = pos2D[(pos2D.length - 2 + s) % pos2D.length];
+            const b = pos2D[(pos2D.length - 1 + s) % pos2D.length];
+
+            for (let i = s; i < pos2D.length - 2 - 1 + s; ++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;
+        };
+    })();
+
+    const getPlane = (points) => (points.length >= 3) && (function() {
+        const u      = math.normalizeVec3(math.subVec3(points[1], points[0], math.vec3()));
+        const v20    = math.normalizeVec3(math.subVec3(points[2], points[0], tmpVec3a$2));
+        const normal = math.normalizeVec3(math.cross3Vec3(u, v20, math.vec3()));
+        const v      = math.normalizeVec3(math.cross3Vec3(normal, u, math.vec3()));
+        return {
+            normal: normal,
+            origin: math.vec3(points[0]),
+            u:      u,
+            v:      v
+        };
+    })();
+
+    const vertices = [ ];
+    let currentInteraction;
+
+    (function selectNextPoint() {
+        const plane = getPlane(vertices);
+
+        const canvasPos2Ray = (canvasPos, dst) => (math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, dst.origin, dst.direction), dst);
+
+        const pickRay = (ray) => {
+            const pickResult = pickRayResult(ray);
+            const snapWorldPos = pickResult && pickResult.entity && ((! plane) || pickResult.snapped) && pickResult.worldPos;
+            if (plane) {
+                const originDistance = math.dotVec3(plane.normal, plane.origin);
+                const snapPlaneDist = (snapWorldPos
+                                       ? ((originDistance - math.dotVec3(snapWorldPos, plane.normal)))
+                                       : window.Infinity);
+                if (Math.abs(snapPlaneDist) < 0.0001) {
+                    const ret = math.vec3();
+                    return {
+                        worldPos: math.addVec3(snapWorldPos, math.mulVec3Scalar(plane.normal, snapPlaneDist, ret), ret),
+                        snapped:  true
+                    };
+                } else {
+                    return {
+                        worldPos: planeIntersect$1(originDistance, plane.normal, ray.origin, ray.direction),
+                        snapped:  false
+                    };
+                }
+            } else {
+                return {
+                    worldPos: snapWorldPos,
+                    snapped:  pickResult && pickResult.snapped
+                };
+            }
+        };
+
+        let placeVertex = false;
+        const removePressListener = addPressListener(
+            (inputCanvasPos) => {
+                const rayPick = inputCanvasPos && pickRay(canvasPos2Ray(inputCanvasPos, tmpRay));
+                const worldPos = rayPick && rayPick.worldPos;
+                return onWorldPos(worldPos, inputCanvasPos, rayPick && rayPick.snapped);
+            });
+
+        const onWorldPos = (worldPos, inputCanvasPos, rayPickSnapped) => {
+                const canvasPos = worldPos ? scene.camera.projectWorldPos(worldPos) : inputCanvasPos;
+                const firstMarker = (vertices.length > 0) && (function() {
+                    const v = vertices[0];
+                    return {
+                        canvasPos: scene.camera.projectWorldPos(v),
+                        worldPos: v
+                    };
+                })();
+                const snapToFirst = (vertices.length >= 3) && ((canvasPos && (math.distVec2(canvasPos, firstMarker.canvasPos) < 10))
+                                                               ||
+                                                               (worldPos && math.compareVec3(worldPos, firstMarker.worldPos)));
+
+                updatePointerLens(snapToFirst ? firstMarker.canvasPos : canvasPos, snapToFirst || rayPickSnapped);
+
+                const lastPointOverlaps = (inputCanvasPos
+                                           &&
+                                           ((! worldPos)
+                                            ||
+                                            ((vertices.length < 3)
+                                             ? vertices.some(v => math.compareVec3(v, worldPos))
+                                             : math.compareVec3(vertices[vertices.length - 1], worldPos))));
+
+                const points = vertices.concat(((! snapToFirst) && worldPos && (! lastPointOverlaps)) ? [worldPos] : []);
+
+                const curPlane = (! lastPointOverlaps) && (plane || getPlane(points));
+
+                const uvs = curPlane && points.map(p => {
+                    math.subVec3(p, curPlane.origin, tmpVec3a$2);
+                    return math.vec2([ math.dotVec3(tmpVec3a$2, curPlane.u), math.dotVec3(tmpVec3a$2, curPlane.v) ]);
+                });
+
+                const isValid = (! lastPointOverlaps) && (! (uvs && testLastSegmentIntersects(uvs, snapToFirst)));
+                const geometry = isValid && uvs && (snapToFirst || (! testLastSegmentIntersects(uvs, true))) && (function() {
+                    try {
+                        const [ baseVertices, baseTriangles, isCCW ] = triangulateEarClipping(uvs);
+                        return {
+                            faces: baseTriangles,
+                            vertices: baseVertices.map(uv => math.addVec3(
+                                curPlane.origin,
+                                math.addVec3(
+                                    math.mulVec3Scalar(curPlane.u, uv[0], tmpVec3a$2),
+                                    math.mulVec3Scalar(curPlane.v, uv[1], tmpVec3b$2),
+                                    tmpVec3a$2),
+                                math.vec3()))
+                        };
+                    } catch (e) {
+                        console.warn("e", e);
+                        return false;
+                    }
+                })();
+
+                onChange(points, snapToFirst, isValid, geometry);
+
+                return placeVertex = (isValid && (snapToFirst
+                                                  ? () => {
+                                                      updatePointerLens(null);
+                                                      onConclude();
+                                                  }
+                                                  : () => {
+                                                      vertices.push(math.vec3(worldPos));
+                                                      updatePointerLens(null);
+                                                      selectNextPoint();
+                                                  }));
+            };
+
+        currentInteraction = {
+            closePolygon: (() => {
+                const commit = (vertices.length >= 3) && onWorldPos(vertices[0]);
+                if (commit) {
+                    removePressListener();
+                    commit();
+                }
+                return !! commit;
+            }),
+            placeVertex: () => {
+                if (placeVertex) {
+                    removePressListener();
+                    placeVertex();
+                }
+                return !!placeVertex;
+            },
+            popVertex: () => {
+                if (vertices.length > 0) {
+                    removePressListener();
+                    vertices.pop();
+                    selectNextPoint();
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+            removePressListener: removePressListener,
+            updateOnChange: () => onWorldPos()
+        };
+    })();
+
+    return {
+        cancel: () => {
+            currentInteraction.removePressListener();
+            updatePointerLens(null);
+        },
+        closePolygon:   () => currentInteraction.closePolygon(),
+        placeVertex:    () => currentInteraction.placeVertex(),
+        popVertex:      () => currentInteraction.popVertex(),
+        updateOnChange: () => currentInteraction.updateOnChange()
+    };
+};
+
 const tmpVec3a$1 = math.vec3();
 const tmpVec3b$1 = math.vec3();
 
@@ -14826,6 +15394,8 @@ const tempVec3a$M = math.vec3();
 const tempVec3b$B = math.vec3();
 const tempVec3c$w = math.vec3();
 
+const px = x => x + "px";
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -15032,22 +15602,29 @@ class Annotation extends Marker {
      * @private
      */
     _updateWithCurWidths() {
-        const px = x => x + "px";
         const boundary = this.scene.canvas.boundary;
         const left = boundary[0] + this.canvasPos[0];
         const top  = boundary[1] + this.canvasPos[1];
-        const markerWidth = this._curMarkerWidth;
-        const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
-        const markerCenter = left + markerDir * (markerWidth / 2 - 12);
-        this._marker.style.left = px(markerCenter - markerWidth / 2);
-        this._marker.style.top  = px(top - 12);
-        this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
-
-        const labelWidth = this._curLabelWidth;
-        const labelDir = Math.sign(this._labelPosition);
-        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._marker.style.top = px(top - 12);
         this._label.style.top  = px(top - 17);
-        this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
+
+        if (this._markerAlign === "legacy") {
+            this._marker.style.left = px(left - 12);
+            this._label.style.left  = px(left + 40);
+        } else {
+            const markerWidth = this._curMarkerWidth;
+            const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
+            const markerCenter = left + markerDir * (markerWidth / 2 - 12);
+            this._marker.style.left = px(markerCenter - markerWidth / 2);
+
+            const labelWidth = this._curLabelWidth;
+            const labelDir = Math.sign(this._labelPosition);
+            this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        }
+
+        const zIndex = 90005 + Math.floor(this._viewPos[2]) + 1;
+        this._marker.style["z-index"] = zIndex;
+        this._label.style["z-index"]  = zIndex;
     }
 
     /**
@@ -15078,7 +15655,8 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
-        if (this._curMarkerWidth === undefined) {
+        const isLegacy = this._markerAlign === "legacy";
+        if ((! isLegacy) && (this._curMarkerWidth === undefined)) {
             this._updateIfWidthsChanged();
         } else {
             // Update position with cached width values
@@ -15086,7 +15664,9 @@ class Annotation extends Marker {
             // so they don't interfere with e.g. interactive scene manipulation
             this._updateWithCurWidths();
             window.clearTimeout(this._widthTimeout);
-            this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            if (! isLegacy) {
+                this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            }
         }
     }
 
@@ -15124,10 +15704,10 @@ class Annotation extends Marker {
     /**
      * Sets the horizontal alignment of the Annotation's marker HTML.
      *
-     * @param {String} align Either "left", "center", "right" (default "left")
+     * @param {String} align Either "left", "center", "right", "legacy" (default "left")
      */
     setMarkerAlign(align) {
-        const valid = [ "left", "center", "right" ];
+        const valid = [ "left", "center", "right", "legacy" ];
         if (! valid.includes(align)) {
             this.error("Param 'align' should be one of: " + JSON.stringify(valid));
         } else {
@@ -26510,6 +27090,65 @@ class ReadableGeometry extends Geometry {
         return this._obb;
     }
 
+    _getMetrics() {
+        if (! ("_metrics" in this)) {
+            switch (this._state.primitiveName) {
+            case "solid":
+            case "surface":
+            case "triangles": {
+                const indices = this._state.indices;
+                const positions = this._state.positions;
+                const getPos = (i, out) => {
+                    const idx = indices[i] * 3;
+                    for (let j = 0; j < 3; ++j) {
+                        out[j] = positions[idx + j];
+                    }                    return out;
+                };
+                const tmp = [ math.vec3(), math.vec3(), math.vec3(), math.vec3() ];
+                let totalArea = 0;
+                const centroid = math.vec3([ 0, 0, 0 ]);
+                for (let i = 0; i < indices.length; i += 3) {
+                    const v0 = getPos(i,   tmp[0]);
+                    const v1 = getPos(i+1, tmp[1]);
+                    const v2 = getPos(i+2, tmp[2]);
+                    math.addVec3(v0, v1, tmp[3]);
+                    math.addVec3(v2, tmp[3], tmp[3]);
+                    const faceArea = math.lenVec3(
+                        math.cross3Vec3(
+                            math.subVec3(v1, v0, tmp[1]),
+                            math.subVec3(v2, v0, tmp[2]),
+                            tmp[0])) / 2;
+                    totalArea += faceArea;
+                    math.mulVec3Scalar(tmp[3], faceArea, tmp[3]);
+                    math.addVec3(centroid, tmp[3], centroid);
+                }
+                this._metrics = { surfaceArea: totalArea, centroid: math.mulVec3Scalar(centroid, 1 / totalArea / 3, centroid) };
+                break;
+            }
+            default:
+                this._metrics = { surfaceArea: 0 };
+                break;
+            }
+        }
+        return this._metrics;
+    }
+
+    /**
+     * Returns the surface area of this Mesh.
+     * @returns {number}
+     */
+    get surfaceArea() {
+        return this._getMetrics().surfaceArea;
+    }
+
+    /**
+     * Returns the centroid of this Mesh.
+     * @returns {number}
+     */
+    get centroid() {
+        return this._getMetrics().centroid;
+    }
+
     /**
      * Approximate number of triangles in this ReadableGeometry.
      *
@@ -40058,7 +40697,7 @@ function buildPlaneGeometry(cfg = {}) {
             positions[offset + 1] = centerY;
             positions[offset + 2] = -z + centerZ;
 
-            normals[offset + 2] = -1;
+            normals[offset + 1] = 1;
 
             uvs[offset2] = (ix) / planeX;
             uvs[offset2 + 1] = ((planeZ - iz) / planeZ);
@@ -43356,8 +43995,7 @@ class SectionCaps {
         if(!this._resourcesAllocated) {
             this._resourcesAllocated = true;
             this._sectionPlanes = [];
-            this._verticesMap = {};
-            this._indicesMap = {};
+            this._sceneModelsData = {};
             this._dirtyMap = {};
             this._prevIntersectionModelsMap = {};
             this._sectionPlaneTimeout = null;
@@ -43372,7 +44010,8 @@ class SectionCaps {
                 this._sectionPlanes.push(sectionPlane);
                 sectionPlane.on('pos', onSectionPlaneUpdated);
                 sectionPlane.on('dir', onSectionPlaneUpdated);
-                sectionPlane.once('destroyed', ((sectionPlane) => {
+                sectionPlane.on('active', onSectionPlaneUpdated);
+                sectionPlane.once('destroyed', (() => {
                     const sectionPlaneId = sectionPlane.id;
                     if (sectionPlaneId) {
                         this._sectionPlanes = this._sectionPlanes.filter((sectionPlane) => sectionPlane.id !== sectionPlaneId);
@@ -43389,13 +44028,19 @@ class SectionCaps {
 
             this._onTick = this.scene.on("tick", () => {
                 //on ticks we only check if there is a model that we have saved vertices for,
-                //but it's no more available on the scene
-                for(const key in this._verticesMap) {
-                    if(!this.scene.models[key]){
-                        delete this._verticesMap[key];
-                        delete this._indicesMap[key];
-                        this._update();
-                    }
+                //but it's no more available on the scene, or if its visibility changed
+                let dirty = false;
+                for(const sceneModelId in this._sceneModelsData) {
+                    if(!this.scene.models[sceneModelId]){
+                        delete this._sceneModelsData[sceneModelId];
+                        dirty = true;
+                    } else if (this._sceneModelsData[sceneModelId].visible !== (!!this.scene.models[sceneModelId].visible)) {
+                        this._sceneModelsData[sceneModelId].visible = !!this.scene.models[sceneModelId].visible;
+                        dirty = true;
+                    }
+                }
+                if (dirty) {
+                    this._update();
                 }
             });
         }
@@ -43412,8 +44057,8 @@ class SectionCaps {
         this._deletePreviousModels();
         this._updateTimeout = setTimeout(() => {
             clearTimeout(this._updateTimeout);
-            const sceneModels = Object.keys(this.scene.models).map((key) => this.scene.models[key]);
-            this._addHatches(sceneModels, this._sectionPlanes);
+            const sceneModels = Object.values(this.scene.models).filter(sceneModel => sceneModel.visible);
+            this._addHatches(sceneModels, this._sectionPlanes.filter(sectionPlane => sectionPlane.active));
             this._setAllDirty(false);
         }, 100);
     }
@@ -43426,21 +44071,9 @@ class SectionCaps {
 
     _addHatches(sceneModels, planes) {
 
-        if (planes.length <= 0) return;
-
         planes.forEach((plane) => {
             sceneModels.forEach((sceneModel) => {
-                //#region creating a plane equation
-                //we create a plane equation that will be used to slice through each triangle
-                const planeEquation = {
-                    A: plane.dir[0],
-                    B: plane.dir[1],
-                    C: plane.dir[2],
-                    D: -(plane.dir[0] * plane.pos[0] + plane.dir[1] * plane.pos[1] + plane.dir[2] * plane.pos[2])
-                };
-                //#endregion
-                
-                if(!this._doesPlaneIntersectBoundingBox(sceneModel.aabb, planeEquation)) return;
+                if(!this._doesPlaneIntersectBoundingBox(sceneModel.aabb, plane)) return;
 
                 if(!this._dirtyMap[sceneModel.id]) return;
 
@@ -43462,39 +44095,35 @@ class SectionCaps {
 
                     const object = objects[objectId];
 
-                    if(!this._doesPlaneIntersectBoundingBox(object.aabb, planeEquation)) return;
+                    if(!this._doesPlaneIntersectBoundingBox(object.aabb, plane)) return;
 
-                    if(!this._verticesMap[sceneModel.id]) {
-                        this._verticesMap[sceneModel.id] = new Map();
-                        this._indicesMap[sceneModel.id] = new Map();
+                    if(!this._sceneModelsData[sceneModel.id]) {
+                        this._sceneModelsData[sceneModel.id] = {
+                            verticesMap: new Map(),
+                            indicesMap:  new Map()
+                        };
                     }
 
-                    let vertices = [], indices = [];
+                    const sceneModelData = this._sceneModelsData[sceneModel.id];
 
-                    if(!this._verticesMap[sceneModel.id].has(objectId)) {
+                    if(!sceneModelData.verticesMap.has(objectId)) {
                         const isSolid = object.meshes[0].isSolid();
+                        const vertices = [ ];
+                        const indices  = [ ];
                         if(isSolid && object.capMaterial) {
-                            object.getEachVertex((_vertices) => {
-                                vertices.push(_vertices[0], _vertices[1], _vertices[2]);
-                            });
-                            object.getEachIndex((_indices) => {
-                                indices.push(_indices);
-                            });
+                            object.getEachVertex(v => vertices.push(v[0], v[1], v[2]));
+                            object.getEachIndex(i  => indices.push(i));
                         }
-                        this._verticesMap[sceneModel.id].set(objectId, vertices);
-                        this._indicesMap[sceneModel.id].set(objectId, indices);
-                    }
-                    else {
-                        vertices = this._verticesMap[sceneModel.id].get(objectId);
-                        indices = this._indicesMap[sceneModel.id].get(objectId);
+                        sceneModelData.verticesMap.set(objectId, vertices);
+                        sceneModelData.indicesMap.set(objectId, indices);
                     }
-                    
+
+                    const vertices = sceneModelData.verticesMap.get(objectId);
+                    const indices  = sceneModelData.indicesMap.get(objectId);
+
                     const capSegments = [];
                     const vertCount = indices.length;
-                    
-                    // Preallocate intersection result array
-                    const intersectionBuffer = new Float32Array(3);
-                    
+
                     for (let i = 0; i < vertCount; i += 3) {
                         // Reuse triangle buffer instead of creating new arrays
                         for (let j = 0; j < 3; j++) {
@@ -43511,21 +44140,15 @@ class SectionCaps {
                         for (let i = 0; i < 3; i++) {
                             const p1 = triangle[i];
                             const p2 = triangle[(i + 1) % 3];
-                            
-                            // Inline the distance calculations to avoid function calls
-                            const d1 = planeEquation.A * p1[0] + planeEquation.B * p1[1] + planeEquation.C * p1[2] + planeEquation.D;
-                            const d2 = planeEquation.A * p2[0] + planeEquation.B * p2[1] + planeEquation.C * p2[2] + planeEquation.D;
-                            
+
+                            const d1 = plane.dist + math.dotVec3(plane.dir, p1);
+                            const d2 = plane.dist + math.dotVec3(plane.dir, p2);
+
                             if (d1 * d2 > 0) continue;
-                            
+
                             const t = -d1 / (d2 - d1);
-                            // Reuse intersection buffer
-                            intersectionBuffer[0] = p1[0] + t * (p2[0] - p1[0]);
-                            intersectionBuffer[1] = p1[1] + t * (p2[1] - p1[1]);
-                            intersectionBuffer[2] = p1[2] + t * (p2[2] - p1[2]);
-                            
-                            // Clone the buffer for storage
-                            intersections.push(new Float32Array(intersectionBuffer));
+
+                            intersections.push(math.lerpVec3(t, 0, 1, p1, p2, math.vec3()));
                         }
 
                         if(intersections.length === 2) capSegments.push(intersections);
@@ -43805,7 +44428,7 @@ class SectionCaps {
 
     }
 
-    _doesPlaneIntersectBoundingBox(bb, planeEquation) {
+    _doesPlaneIntersectBoundingBox(bb, plane) {
         const min = [bb[0], bb[1], bb[2]];
         const max = [bb[3], bb[4], bb[5]];
 
@@ -43825,10 +44448,7 @@ class SectionCaps {
         let hasNegative = false;
 
         for (const corner of corners) {
-            const distance = planeEquation.A * corner[0] +
-                planeEquation.B * corner[1] +
-                planeEquation.C * corner[2] +
-                planeEquation.D;
+            const distance = plane.dist + math.dotVec3(plane.dir, corner);
 
             if (distance > 0) hasPositive = true;
             if (distance < 0) hasNegative = true;
@@ -44323,13 +44943,12 @@ class Scene extends Component {
      * configures renderer logic for the specified number of SectionPlanes, eliminating the need for setting up logic with each SectionPlane creation and thereby enhancing
      * responsiveness. It is important to consider that each SectionPlane imposes rendering performance, so it is recommended to set this value to a quantity that aligns with
      * your expected usage.
-     * @throws {String} Throws an exception when both canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
+     * @throws {String} Throws an exception when  canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
      */
     constructor(viewer, cfg = {}) {
 
         super(null, cfg);
-
-        const canvas = cfg.canvasElement || document.getElementById(cfg.canvasId);
+        const canvas = cfg.canvasElement || document.querySelector(`#${cfg.canvasId}`);
 
         if (!(canvas instanceof HTMLCanvasElement)) {
             throw "Mandatory config expected: valid canvasId or canvasElement";
@@ -88569,7 +89188,7 @@ class LineSet extends Component {
      * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
      * @param {Number[]} cfg.positions World-space 3D vertex positions.
      * @param {Number[]} [cfg.indices] Indices to connect ````positions```` into line segments. Note that these are separate line segments, not a polyline.
-     * @param {Number[]} [cfg.color=[0,0,0]] The color of this ````LineSet````. This is both emissive and diffuse.
+     * @param {Number[]} [cfg.color=[1,1,1]] The color of this ````LineSet````. This is both emissive and diffuse.
      * @param {Boolean} [cfg.visible=true] Indicates whether or not this ````LineSet```` is visible.
      * @param {Number} [cfg.opacity=1.0] ````LineSet````'s initial opacity factor.
      */
@@ -88589,6 +89208,9 @@ class LineSet extends Component {
             }
         }
 
+        this._color = cfg.color || [1, 1, 1];
+        this._opacity = cfg.opacity || 1.0;
+
         this._sceneModel = new SceneModel(this, {
             isModel: false // Don't register in Scene.models
         });
@@ -88597,7 +89219,9 @@ class LineSet extends Component {
             id: "linesMesh",
             primitive: "lines",
             positions: this._positions,
-            indices: this._indices
+            indices: this._indices,
+            color: this._color,
+            opacity: this._opacity,
         });
 
         this._sceneModel.createEntity({
@@ -92325,6 +92949,7 @@ class FastNavPlugin extends Plugin {
      * @param {Number} [cfg.scaleCanvasResolutionFactor=0.6] The factor by which we downscale the canvas resolution whenever we interact with the Viewer.
      * @param {Boolean} [cfg.delayBeforeRestore=true] Whether to temporarily have a delay before restoring normal rendering after we stop interacting with the Viewer.
      * @param {Number} [cfg.delayBeforeRestoreSeconds=0.5] Delay in seconds before restoring normal rendering after we stop interacting with the Viewer.
+     * @param {Function} [cfg.onMoved] Optional callback function fired during moving mode, should return the callback function that will be fired when the interaction stops.
      */
     constructor(viewer, cfg = {}) {
 
@@ -92340,6 +92965,8 @@ class FastNavPlugin extends Plugin {
         this._scaleCanvasResolutionFactor = cfg.scaleCanvasResolutionFactor || 0.6;
         this._delayBeforeRestore = (cfg.delayBeforeRestore !== false);
         this._delayBeforeRestoreSeconds = cfg.delayBeforeRestoreSeconds || 0.5;
+        this._onMoved = cfg.onMoved;
+        this._onStopped = null;
 
         let timer = this._delayBeforeRestoreSeconds * 1000;
         let fastMode = false;
@@ -92358,6 +92985,10 @@ class FastNavPlugin extends Plugin {
                 } else {
                     viewer.scene.canvas.resolutionScale = this._defaultScaleCanvasResolutionFactor;
                 }
+                if (this._onMoved) {
+                    this._onStopped = this._onMoved();
+                }
+
                 fastMode = true;
             }
         };
@@ -92369,6 +93000,9 @@ class FastNavPlugin extends Plugin {
             viewer.scene._renderer.setPBREnabled(true);
             viewer.scene._renderer.setSAOEnabled(true);
             viewer.scene._renderer.setTransparentEnabled(true);
+            if (this._onStopped) {
+                this._onStopped();
+            }
             fastMode = false;
         };
 
@@ -97695,8 +98329,8 @@ class Skybox extends Component {
      * @param {Component} owner Owner component. When destroyed, the owner will destroy this PointLight as well.
      * @param {*} [cfg]  Skybox configuration
      * @param {String} [cfg.id] Optional ID, unique among all components in the parent {Scene}, generated automatically when omitted.
-     * @param {String} [cfg.src=null] Path to skybox texture
-     * @param {String} [cfg.encoding="linear"] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     * @param {String | String[]} [cfg.src=null] Path to skybox texture
+     * @param {Number} [cfg.encoding=LinearEncoding] Texture encoding format.  See the {@link Texture#encoding} property for more info.
      * @param {Number} [cfg.size=1000] Size of this Skybox, given as the distance from the center at ````[0,0,0]```` to each face.
      * @param {Boolean} [cfg.active=true] True when this Skybox is visible.
      */
@@ -97704,6 +98338,32 @@ class Skybox extends Component {
 
         super(owner, cfg);
 
+        const useMultipleTexture = typeof cfg.src === "object" && cfg.src !== null;
+
+        if (useMultipleTexture) {
+            this._createCombinedTexture(cfg).then(combinedTexture => {
+                this._createSkyboxMesh(cfg, combinedTexture);
+            }).catch(e => this.error(e));
+        } else {
+            this._createSkyboxMesh(cfg);
+        }
+    }
+
+    /**
+     * 
+     * @private
+     * @param {*} cfg 
+     * @param {Texture} combinedTexture 
+     */
+    _createSkyboxMesh(cfg, combinedTexture = null) {
+        const texture = combinedTexture || new Texture(this, {
+            src: cfg.src,
+            flipY: true,
+            wrapS: ClampToEdgeWrapping,
+            wrapT: ClampToEdgeWrapping,
+            encoding: cfg.encoding || LinearEncoding
+        });
+
         this._skyboxMesh = new Mesh(this, {
 
             geometry: new ReadableGeometry(this, { // Box-shaped geometry
@@ -97734,13 +98394,7 @@ class Skybox extends Component {
                 diffuse: [0, 0, 0],
                 specular: [0, 0, 0],
                 emissive: [1, 1, 1],
-                emissiveMap: new Texture(this, {
-                    src: cfg.src,
-                    flipY: true,
-                    wrapS: "clampToEdge",
-                    wrapT: "clampToEdge",
-                    encoding: cfg.encoding || "sRGB"
-                }),
+                emissiveMap: texture,
                 backfaces: true // Show interior faces of our skybox geometry
             }),
             // stationary: true,
@@ -97754,6 +98408,86 @@ class Skybox extends Component {
         this.active = cfg.active;
     }
 
+    /**
+     * 
+     * @private
+     * @param {*} cfg 
+     * @returns {Texture}
+     */
+    async _createCombinedTexture(cfg) {
+        const [
+            posX,
+            negX,
+            posY,
+            negY,
+            posZ,
+            negZ
+        ] = cfg.src;
+
+        if (!posX || !negX || !posY || !negY || !posZ || !negZ) {
+            throw new Error("All six skybox textures must be provided");
+        }
+
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        const loadImage = src => {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.crossOrigin = "anonymous";
+                img.onload = () => resolve(img);
+                img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+                img.src = src;
+            });
+        };
+
+        try {
+            const [imgPosX, imgNegX, imgPosY, imgNegY, imgPosZ, imgNegZ] = await Promise.all([
+                loadImage(posX),
+                loadImage(negX),
+                loadImage(posY),
+                loadImage(negY),
+                loadImage(posZ),
+                loadImage(negZ)
+            ]);
+
+            const imageSize = imgPosX.width;
+            if (
+                imgNegX.width !== imageSize || imgPosY.width !== imageSize ||
+                imgNegY.width !== imageSize || imgPosZ.width !== imageSize ||
+                imgNegZ.width !== imageSize
+            ) {
+                throw new Error("All skybox textures must have the same dimensions");
+            }
+
+            // Set canvas size for the Christ cross layout (3×4 grid)
+            canvas.width = imageSize * 4;
+            canvas.height = imageSize * 3;
+
+            ctx.fillStyle = 'black';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            ctx.drawImage(imgNegX, imageSize * 0, imageSize * 1, imageSize, imageSize);  // -X (left)
+            ctx.drawImage(imgPosX, imageSize * 2, imageSize * 1, imageSize, imageSize);  // +X (right)
+            ctx.drawImage(imgPosY, imageSize * 1, imageSize * 0, imageSize, imageSize);  // +Y (top)
+            ctx.drawImage(imgNegY, imageSize * 1, imageSize * 2, imageSize, imageSize);  // -Y (bottom)
+            ctx.drawImage(imgPosZ, imageSize * 1, imageSize * 1, imageSize, imageSize);  // +Z (front)
+            ctx.drawImage(imgNegZ, imageSize * 3, imageSize * 1, imageSize, imageSize);  // -Z (back)
+
+            const combinedTexture = new Texture(this, {
+                image: canvas,
+                flipY: true,
+                wrapS: ClampToEdgeWrapping,
+                wrapT: ClampToEdgeWrapping,
+                encoding: cfg.encoding || LinearEncoding
+            });
+
+            return combinedTexture;
+        } catch (error) {
+            console.error("Error creating combined skybox texture:", error);
+            throw error;
+        }
+    }
 
     /**
      * Sets the size of this Skybox, given as the distance from the center at [0,0,0] to each face.
@@ -97948,6 +98682,9 @@ const tempVec4a$5 = math.vec4();
 const tempVec4b$5 = math.vec4();
 const tempVec4c = math.vec4();
 
+const TOP_LIMIT = 0.001;
+const BOTTOM_LIMIT = Math.PI - 0.001;
+
 
 /** @private */
 class PivotController {
@@ -98123,14 +98860,9 @@ class PivotController {
      */
     startPivot() {
 
-        if (this._cameraLookingDownwards()) {
-            this._pivoting = false;
-            return false;
-        }
-
         const camera = this._scene.camera;
 
-        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.worldUp);
+        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.up);
         math.transformPoint3(lookat, this.getPivotPos(), this._cameraOffset);
 
         const pivotPos = this.getPivotPos();
@@ -98233,8 +98965,31 @@ class PivotController {
             dx = -dx;
         }
         this._azimuth += -dx * .01;
-        this._polar += dy * .01;
-        this._polar = math.clamp(this._polar, .001, Math.PI - .001);
+
+        const isMovingUp = dy < 0;
+        const isMovingDown = dy > 0;
+        
+        // Track if we're at limits - only check if we're very close to the limit
+        const atTopLimit = Math.abs(this._polar - TOP_LIMIT) < 0.005;
+        const atBottomLimit = Math.abs(this._polar - BOTTOM_LIMIT) < 0.005;
+        
+        let newPolar = this._polar + dy * .01;
+        
+        // Case 1: At top limit and trying to go beyond
+        if (atTopLimit && isMovingUp) {
+            newPolar = TOP_LIMIT;
+        }
+        // Case 2: At bottom limit and trying to go beyond
+        else if (atBottomLimit && isMovingDown) {
+            newPolar = BOTTOM_LIMIT;
+        }
+        // Case 3: Normal rotation or moving away from a limit
+        else {
+            newPolar = math.clamp(newPolar, TOP_LIMIT, BOTTOM_LIMIT);
+        }
+
+        this._polar = newPolar;
+
         const pos = [
             this._radius * Math.sin(this._polar) * Math.sin(this._azimuth),
             this._radius * Math.cos(this._polar),
@@ -111784,22 +112539,6 @@ class Viewer {
             this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
         }
 
-        const captured = {};
-        for (let i = 0, len = this._plugins.length; i < len; i++) {
-            const plugin = this._plugins[i];
-            if (plugin.getContainerElement) {
-                const container = plugin.getContainerElement();
-                if (container !== document.body) {
-                    if (!captured[container.id]) {
-                        captured[container.id] = true;
-                        html2canvas(container).then(function (canvas) {
-                            document.body.appendChild(canvas);
-                        });
-                    }
-                }
-            }
-        }
-
         // firing "rendering" is necessary to trigger DTX{Lines,Triangles}Layer::_uploadDeferredFlags
         this.scene.fire("rendering", { }, true);
 
@@ -123577,6 +124316,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     const cubeColor = "lightgrey";
     const cubeHighlightColor = cfg.hoverColor || "rgba(0,0,0,0.4)";
     const textColor = cfg.textColor || "black";
+    const parentNode = cfg.canvasElement || document.body;
 
     const height = 500;
     const width = height + (height / 3);
@@ -123686,8 +124426,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     this._textureCanvas.style.visibility = "hidden";
     this._textureCanvas.style["z-index"] = 2000000;
 
-    const body = document.getElementsByTagName("body")[0];
-    body.appendChild(this._textureCanvas);
+    parentNode.appendChild(this._textureCanvas);
 
     const context = this._textureCanvas.getContext("2d");
 
@@ -123957,7 +124696,7 @@ class NavCubePlugin extends Plugin {
             this._navCubeScene = new Scene(viewer, {
                 canvasId: cfg.canvasId,
                 canvasElement: cfg.canvasElement,
-                transparent: true
+                transparent: true,
             });
 
             this._navCubeCanvas = this._navCubeScene.canvas.canvas;
@@ -124190,7 +124929,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mouseup", self._onMouseUp = function (e) {
+            self._navCubeCanvas.addEventListener("mouseup", self._onMouseUp = function (e) {
                 if (e.which !== 1) {// Left button
                     return;
                 }
@@ -124207,7 +124946,7 @@ class NavCubePlugin extends Plugin {
                     if (hit.uv) {
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId >= 0) {
-                            document.body.style.cursor = "pointer";
+                            self._navCubeCanvas.style.cursor = "pointer";
                             if (lastAreaId >= 0) {
                                 self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                 self._repaint();
@@ -124233,7 +124972,7 @@ class NavCubePlugin extends Plugin {
                                             self._repaint();
                                             lastAreaId = -1;
                                         }
-                                        document.body.style.cursor = "pointer";
+                                        self._navCubeCanvas.style.cursor = "pointer";
                                         if (lastAreaId >= 0) {
                                             self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                             self._repaint();
@@ -124252,7 +124991,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mousemove", self._onMouseMove = function (e) {
+            self._navCubeCanvas.addEventListener("mousemove", self._onMouseMove = function (e) {
                 if (lastAreaId >= 0) {
                     self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                     self._repaint();
@@ -124264,7 +125003,7 @@ class NavCubePlugin extends Plugin {
                 if (down) {
                     var posX = e.clientX;
                     var posY = e.clientY;
-                    document.body.style.cursor = "move";
+                    self._navCubeCanvas.style.cursor = "move";
                     actionMove(posX, posY);
                     return;
                 }
@@ -124278,7 +125017,7 @@ class NavCubePlugin extends Plugin {
                 });
                 if (hit) {
                     if (hit.uv) {
-                        document.body.style.cursor = "pointer";
+                        self._navCubeCanvas.style.cursor = "pointer";
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId === lastAreaId) {
                             return;
@@ -124293,7 +125032,7 @@ class NavCubePlugin extends Plugin {
                         }
                     }
                 } else {
-                    document.body.style.cursor = "default";
+                    self._navCubeCanvas.style.cursor = "default";
                     if (lastAreaId >= 0) {
                         self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                         self._repaint();
@@ -124556,8 +125295,8 @@ class NavCubePlugin extends Plugin {
             this._navCubeCanvas.removeEventListener("mouseleave", this._onMouseLeave);
             this._navCubeCanvas.removeEventListener("mousedown", this._onMouseDown);
 
-            document.removeEventListener("mousemove", this._onMouseMove);
-            document.removeEventListener("mouseup", this._onMouseUp);
+            this._navCubeCanvas.removeEventListener("mousemove", this._onMouseMove);
+            this._navCubeCanvas.removeEventListener("mouseup", this._onMouseUp);
 
             this._navCubeCanvas = null;
             this._cubeTextureCanvas.destroy();
@@ -125951,8 +126690,8 @@ class Control {
             const canvasPos = math.vec2();
 
             const copyCanvasPos = (event, vec2) => {
-                vec2[0] = event.clientX;
-                vec2[1] = event.clientY;
+                vec2[0] = event.pageX;
+                vec2[1] = event.pageY;
                 transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
             };
 
@@ -129450,46 +130189,27 @@ class FaceAlignedSectionPlanesPlugin extends Plugin {
  * });
  *
  * // Add a GLTFModelsPlugin
- * var gltfLoaderPlugin = new GLTFModelsPlugin(viewer, {
- *     id: "GLTFModels"  // Default value
- * });
+ * var xktLoaderPlugin = new XKTLoaderPlugin(viewer);
  *
  * // Add a SkyboxesPlugin
- * var skyboxesPlugin = new SkyboxesPlugin(viewer, {
- *     id: "Skyboxes" // Default value
- * });
+ * var skyboxesPlugin = new SkyboxesPlugin(viewer);
+ * 
+ * // Create a skybox
+ * skyBoxesPlugin.createSkybox({
+ *     src: [
+ *         "./assets/images/posx.jpg",
+ *         "./assets/images/negx.jpg",
+ *         "./assets/images/posy.jpg",
+ *         "./assets/images/negy.jpg",
+ *         "./assets/images/posz.jpg",
+ *         "./assets/images/negz.jpg"
+ *     ]
+ * })
  *
- * // Load a glTF model
- * const model = gltfLoaderPlugin.load({
+ * // Load an XKT model
+ * const model = xktLoaderPlugin.load({
  *     id: "myModel",
- *     src: "./models/gltf/mygltfmodel.gltf"
- * });
- *
- * // Create three directional World-space lights. "World" means that they will appear as if part
- * // of the world, instead of "View", where they move with the user's head.
- *
- * skyboxesPlugin.createLight({
- *     id: "keyLight",
- *     dir: [0.8, -0.6, -0.8],
- *     color: [1.0, 0.3, 0.3],
- *     intensity: 1.0,
- *     space: "world"
- * });
- *
- * skyboxesPlugin.createLight({
- *     id: "fillLight",
- *     dir: [-0.8, -0.4, -0.4],
- *     color: [0.3, 1.0, 0.3],
- *     intensity: 1.0,
- *     space: "world"
- * });
- *
- * skyboxesPlugin.createDirLight({
- *     id: "rimLight",
- *     dir: [0.2, -0.8, 0.8],
- *     color: [0.6, 0.6, 0.6],
- *     intensity: 1.0,
- *     space: "world"
+ *     src: "./models/xkt/myModel.xkt"
  * });
  *
  * @class SkyboxesPlugin
@@ -129515,23 +130235,17 @@ class SkyboxesPlugin extends Plugin {
     /**
      Creates a skybox.
 
-     @param {String} id Unique ID to assign to the skybox.
      @param {Object} params Skybox configuration.
+     @param {String} [params.id] Optional ID, unique among all components in the parent {Scene}, generated automatically when omitted.
+     @param {String | String[]} [params.src=null] Path to skybox texture
+     @param {Number} [params.encoding=LinearEncoding] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     @param {Number} [params.size=1000] Size of this Skybox, given as the distance from the center at ````[0,0,0]```` to each face.
      @param {Boolean} [params.active=true] Whether the skybox plane is initially active. Only skyboxes while this is true.
      @returns {Skybox} The new skybox.
      */
-    createSkybox(id, params) {
-        if (this.viewer.scene.components[id]) {
-            this.error("Component with this ID already exists: " + id);
-            return this;
-        }
-        var skybox = new Skybox(this.viewer.scene, {
-            id: id,
-            pos: params.pos,
-            dir: params.dir,
-            active: true 
-        });
-        this.skyboxes[id] = skybox;
+    createSkybox(params) {
+        const skybox = new Skybox(this.viewer.scene, params);
+        this.skyboxes[skybox.id] = skybox;
         return skybox;
     }
 
@@ -130194,6 +130908,15 @@ class STLLoaderPlugin extends Plugin {
  */
 class RenderService {
 
+  /**
+  * @constructor
+  *
+  * @param {HTMLElement} treeViewContainer Container element for the tree which uses this render service.
+  */
+  constructor(treeViewContainer) {
+    this._treeViewContainer = treeViewContainer;
+  }
+
   /*
   * Creates the root node of the tree.
   * @return {HTMLElement} The root node of the tree.
@@ -130318,7 +131041,7 @@ class RenderService {
   }
 
   getSwitchElement(nodeId) {
-    return document.getElementById(`switch-${nodeId}`);
+    return this._treeViewContainer.querySelector(`[id="switch-${nodeId}"]`);
   }
 
   isChecked(element) {
@@ -130326,7 +131049,7 @@ class RenderService {
   }
 
   setCheckbox(nodeId, checked, indeterminate = false) {
-    const checkbox = document.getElementById(`checkbox-${nodeId}`);
+    const checkbox = this._treeViewContainer.querySelector(`[id="checkbox-${nodeId}"]`);
     if (checkbox) {
       if (checked !== checkbox.checked) {
         checkbox.checked = checked;
@@ -130341,7 +131064,7 @@ class RenderService {
   }
 
   setXRayed(nodeId, xrayed) {
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (xrayed) {
         treeNode.classList.add('xrayed-node');
@@ -130352,7 +131075,7 @@ class RenderService {
   }
 
   setHighlighted(nodeId, highlighted) { 
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (highlighted) {
         treeNode.scrollIntoView({block: "center"});
@@ -130778,7 +131501,7 @@ class TreeViewPlugin extends Plugin {
         this._sortNodes = cfg.sortNodes;
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
         this._showListItemElementId = null;
-        this._renderService = cfg.renderService || new RenderService();
+        this._renderService = cfg.renderService || new RenderService(this._containerElement);
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
         this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;
@@ -168432,151 +169155,6 @@ const hex2rgb = function(color) {
     return [ rgb(0), rgb(2), rgb(4) ];
 };
 
-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, isCCW ];
-};
-
-const marker3D = function(scene, color) {
-    const marker = new Dot3D(scene, {}, scene.canvas.canvas.parentNode, {
-        borderColor: "white",
-        fillColor: color,
-        zIndex: 100
-    });
-
-    return {
-        update: function(worldPos) {
-            if (worldPos)
-            {
-                marker.worldPos = worldPos;
-            }
-            marker.setVisible(!!worldPos);
-        },
-
-        setHighlighted: h => marker.setHighlighted(h),
-        getCanvasPos:  () => marker.canvasPos,
-        getWorldPos:   () => marker.worldPos,
-        destroy:       () => marker.destroy()
-    };
-};
-
-const wire3D = function(scene, color, startWorldPos) {
-    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
-        color: color,
-        thickness: 1,
-        thicknessClickable: 6
-    });
-    wire.setVisible(false);
-    return {
-        update: endWorldPos => {
-            if (endWorldPos)
-            {
-                wire.setEnds(startWorldPos, endWorldPos);
-            }
-            wire.setVisible(!!endWorldPos);
-        },
-
-        destroy: () => wire.destroy()
-    };
-};
-
 const basePolygon3D = function(scene, color, alpha) {
     let mesh = null;
 
@@ -169556,7 +170134,8 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
 
     (function selectNextPoint(markers) {
         const marker = marker3D(scene, zoneColor);
-        const wire = (markers.length > 0) && wire3D(scene, zoneColor, markers[markers.length - 1].getWorldPos());
+        const wire = (markers.length > 0) && wire3D(scene, zoneColor);
+        const wireStart = wire && markers[markers.length - 1].getWorldPos();
 
         cleanups.push(() => {
             marker.destroy();
@@ -169616,7 +170195,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
             () => {
                 updatePointerLens(null);
                 marker.update(null);
-                wire && wire.update(null);
+                wire && wire.update(wireStart, null);
                 basePolygon.updateBase((markers.length > 2) ? markers.map(m => m.getWorldPos()) : null);
             },
             (canvasPos, worldPos) => {
@@ -169624,7 +170203,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
                 firstMarker && firstMarker.setHighlighted(!! snappedFirst);
                 updatePointerLens(snappedFirst ? snappedFirst.canvasPos : canvasPos);
                 marker.update((! snappedFirst) && worldPos);
-                wire && wire.update(snappedFirst ? snappedFirst.worldPos : worldPos);
+                wire && wire.update(wireStart, snappedFirst ? snappedFirst.worldPos : worldPos);
                 if ((markers.length >= 2))
                 {
                     const pos = markers.map(m => m.getWorldPos()).concat(snappedFirst ? [] : [worldPos]);
@@ -169668,7 +170247,7 @@ const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, z
                 else
                 {
                     marker.update(worldPos);
-                    wire && wire.update(worldPos);
+                    wire && wire.update(wireStart, worldPos);
                     selectNextPoint(markers.concat(marker));
                 }
             });
@@ -170103,4 +170682,4 @@ class ZoneTranslateTouchControl extends ZoneTranslateControl {
     }
 }
 
-export { AlphaFormat, AmbientLight, AngleMeasurementEditMouseControl, AngleMeasurementEditTouchControl, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, CxConverterIFCLoaderPlugin, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementEditControl, DistanceMeasurementEditMouseControl, DistanceMeasurementEditTouchControl, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, Dot3D, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, Label3D, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MeshSurfaceArea, MeshVolume, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$1 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, Wire3D, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, activateDraggableDot, activateDraggableDots, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildLineGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, isTriangleMeshSolid, load3DSGeometry, loadOBJGeometry, math, meshSurfaceArea, meshVolume, os, rtcToWorldPos, sRGBEncoding, setFrustum, stats, touchPointSelector, transformToNode, utils, worldToRTCPos, worldToRTCPositions };
+export { AlphaFormat, AmbientLight, AngleMeasurementEditMouseControl, AngleMeasurementEditTouchControl, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, CxConverterIFCLoaderPlugin, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementEditControl, DistanceMeasurementEditMouseControl, DistanceMeasurementEditTouchControl, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, Dot3D, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, Label3D, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MeshSurfaceArea, MeshVolume, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$1 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, Wire3D, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, activateDraggableDot, activateDraggableDots, addMousePressListener, addTouchPressListener, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildLineGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, isTriangleMeshSolid, load3DSGeometry, loadOBJGeometry, marker3D, math, meshSurfaceArea, meshVolume, os, rtcToWorldPos, sRGBEncoding, setFrustum, startPolygonCreate, stats, touchPointSelector, transformToNode, triangulateEarClipping, utils, wire3D, worldToRTCPos, worldToRTCPositions };