@xeokit/xeokit-sdk 2.6.64 → 2.6.66

package/dist/xeokit-sdk.cjs.js

@@ -1059,13 +1059,10 @@ class PointerLens {
         this.scene = this.viewer.scene;
 
         this._lensCursorDiv = document.createElement('div');
-        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._lensCursorDiv, this.viewer.scene.canvas.canvas);
-        this._lensCursorDiv.style.background = "pink";
-        this._lensCursorDiv.style.border = "2px solid red";
-        this._lensCursorDiv.style.borderRadius = "20px";
-        this._lensCursorDiv.style.width = "10px";
-        this._lensCursorDiv.style.height = "10px";
-        this._lensCursorDiv.style.margin = "-200px -200px";
+        this._lensParams = { canvasSize: 300, cursorBorder: 2, cursorSize: 10 };
+        this._lensCursorDiv.style.borderRadius = "50%";
+        this._lensCursorDiv.style.width  = this._lensParams.cursorSize + "px";
+        this._lensCursorDiv.style.height = this._lensParams.cursorSize + "px";
         this._lensCursorDiv.style.zIndex = "100000";
         this._lensCursorDiv.style.position = "absolute";
         this._lensCursorDiv.style.pointerEvents = "none";
@@ -1078,8 +1075,8 @@ class PointerLens {
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
-        this._lensContainer.style.width = "300px";
-        this._lensContainer.style.height = "300px";
+        this._lensContainer.style.width  = this._lensParams.canvasSize + "px";
+        this._lensContainer.style.height = this._lensParams.canvasSize + "px";
         
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
@@ -1091,13 +1088,14 @@ class PointerLens {
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
-        this._lensCanvas.style.width = "300px";
-        this._lensCanvas.style.height = "300px";
+        this._lensCanvas.style.width  = this._lensParams.canvasSize + "px";
+        this._lensCanvas.style.height = this._lensParams.canvasSize + "px";
         this._lensCanvas.style.zIndex = "15000";
         this._lensCanvas.style.pointerEvents = "none";
 
         document.body.appendChild(this._lensContainer);
         this._lensContainer.appendChild(this._lensCanvas);
+        this._lensContainer.appendChild(this._lensCursorDiv);
 
         this._lensCanvasContext = this._lensCanvas.getContext('2d');
         this._canvasElement = this.viewer.scene.canvas.canvas;
@@ -1115,7 +1113,7 @@ class PointerLens {
 
         this._active = (cfg.active !== false);
         this._visible = false;
-        this._snapped = false;
+        this.snapped = false;
 
         this._onViewerRendering = this.viewer.scene.on("rendering", () => {
             if (this._active && this._visible) {
@@ -1162,21 +1160,13 @@ class PointerLens {
             this._lensCanvas.height // destination height
         );
 
-        const centerLensCanvas = [
-            (lensRect.left + lensRect.right) / 2 - canvasRect.left,
-            (lensRect.top + lensRect.bottom) / 2 - canvasRect.top
-        ];
+        const middle = this._lensParams.canvasSize / 2 - this._lensParams.cursorSize / 2 - this._lensParams.cursorBorder;
 
-        if (this._snappedCanvasPos) {
-            const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
-            const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
+        const deltaX = this._snappedCanvasPos ? (this._snappedCanvasPos[0] - this._canvasPos[0]) : 0;
+        const deltaY = this._snappedCanvasPos ? (this._snappedCanvasPos[1] - this._canvasPos[1]) : 0;
 
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
-        } else {
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] - 10}px`;
-        }
+        this._lensCursorDiv.style.left = `${middle + deltaX * this._zoomLevel}px`;
+        this._lensCursorDiv.style.top  = `${middle + deltaY * this._zoomLevel}px`;
     }
 
 
@@ -1244,14 +1234,10 @@ class PointerLens {
      * @private
      */
     set snapped(snapped) {
-     this._snapped = snapped;
-        if (snapped) {
-            this._lensCursorDiv.style.background = "greenyellow";
-            this._lensCursorDiv.style.border = "2px solid green";
-        } else {
-            this._lensCursorDiv.style.background = "pink";
-            this._lensCursorDiv.style.border = "2px solid red";
-        }
+        this._snapped = snapped;
+        const [ bg, border ] = snapped ? [ "greenyellow", "green" ] : [ "pink", "red" ];
+        this._lensCursorDiv.style.background = bg;
+        this._lensCursorDiv.style.border = this._lensParams.cursorBorder + "px solid " + border;
     }
 
     /**
@@ -1263,19 +1249,19 @@ class PointerLens {
     get snapped() {
         return this._snapped;
     }
-    
+
+    _updateActiveVisible() {
+        this._lensContainer.style.visibility = (this._active && this._visible) ? "visible" : "hidden";
+        this.update();
+    }
+
     /**
      * Sets if this PointerLens is active.
      * @param active
      */
     set active(active) {
         this._active = active;
-        this._lensContainer.style.visibility = (active && this._visible) ? "visible" : "hidden";
-        if (!active || !this._visible ) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**
@@ -1294,12 +1280,7 @@ class PointerLens {
      */
     set visible(visible) {
         this._visible = visible;
-        this._lensContainer.style.visibility = (visible && this._active) ? "visible" : "hidden";
-        if (!visible || !this._active) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**
@@ -1330,7 +1311,7 @@ class PointerLens {
 let doublePrecision = true;
 let FloatArrayType = doublePrecision ? Float64Array : Float32Array;
 
-const tempVec3a$N = new FloatArrayType(3);
+const tempVec3a$O = new FloatArrayType(3);
 
 const tempMat1 = new FloatArrayType(16);
 const tempMat2 = new FloatArrayType(16);
@@ -6700,10 +6681,10 @@ math.buildEdgeIndices = (function () {
  */
 math.planeClipsPositions3 = function (pos, dir, positions, numElementsPerPosition = 3) {
     for (let i = 0, len = positions.length; i < len; i += numElementsPerPosition) {
-        tempVec3a$N[0] = positions[i + 0] - pos[0];
-        tempVec3a$N[1] = positions[i + 1] - pos[1];
-        tempVec3a$N[2] = positions[i + 2] - pos[2];
-        let dotProduct = tempVec3a$N[0] * dir[0] + tempVec3a$N[1] * dir[1] + tempVec3a$N[2] * dir[2];
+        tempVec3a$O[0] = positions[i + 0] - pos[0];
+        tempVec3a$O[1] = positions[i + 1] - pos[1];
+        tempVec3a$O[2] = positions[i + 2] - pos[2];
+        let dotProduct = tempVec3a$O[0] * dir[0] + tempVec3a$O[1] * dir[1] + tempVec3a$O[2] * dir[2];
         if (dotProduct < 0) {
             return true;
         }
@@ -8583,8 +8564,8 @@ class Component {
     }
 }
 
-const tempVec3a$M = math.vec3();
-const tempVec3b$A = math.vec3();
+const tempVec3a$N = math.vec3();
+const tempVec3b$B = math.vec3();
 const tempMat4a$s = math.mat4();
 
 /**
@@ -8661,8 +8642,8 @@ function frustumIntersectsAABB3(frustum, aabb) {
 
     let ret = Frustum$1.INSIDE;
 
-    const min = tempVec3a$M;
-    const max = tempVec3b$A;
+    const min = tempVec3a$N;
+    const max = tempVec3b$B;
 
     min[0] = aabb[0];
     min[1] = aabb[1];
@@ -9297,7 +9278,7 @@ class PointerCircle {
     }
 
     /**
-     * Stop the shricking circle and hide it.
+     * Stop the shrinking circle and hide it.
      */
     stop() {
         if (this._destroyed) {
@@ -9590,7 +9571,8 @@ const os = {
     }
 };
 
-function addContextMenuListener(elem, callback) {
+//failCallback will be called when the press is not long enough to considered a long press
+function addContextMenuListener(elem, callback, failCallback = () => {}) {
     if (!elem || !callback) return;
 
     let timeout = null;
@@ -9644,6 +9626,7 @@ function addContextMenuListener(elem, callback) {
     const touchEndHandler = (event) => {
         event.preventDefault();
         if (timeout) {
+            failCallback(event);
             clearTimeout(timeout);
             timeout = null;
         }
@@ -10279,7 +10262,7 @@ class Wire {
     }
 }
 
-const tempVec3a$L = math.vec3();
+const tempVec3a$M = math.vec3();
 const tempVec4$1  = math.vec4();
 
 /**
@@ -10360,7 +10343,7 @@ function worldToRTCPos(worldPos, rtcCenter, rtcPos) {
  */
 function worldToRTCPositions(worldPositions, rtcPositions, rtcCenter, cellSize = 1000) {
 
-    const center = math.getPositionsCenter(worldPositions, tempVec3a$L);
+    const center = math.getPositionsCenter(worldPositions, tempVec3a$M);
 
     const rtcCenterX = Math.round(center[0] / cellSize) * cellSize;
     const rtcCenterY = Math.round(center[1] / cellSize) * cellSize;
@@ -10414,7 +10397,7 @@ function getPlaneRTCPos(dist, dir, rtcOrigin, rtcPlanePos, originMatrix) {
                        ? (tempVec4$1.set(rtcOrigin, 0), tempVec4$1[3] = 1, math.mulMat4v4(originMatrix, tempVec4$1, tempVec4$1))
                        : rtcOrigin);
     const rtcCenterToPlaneDist = math.dotVec3(dir, rtcCenter) + dist;
-    const dirNormalized = math.normalizeVec3(dir, tempVec3a$L);
+    const dirNormalized = math.normalizeVec3(dir, tempVec3a$M);
     math.mulVec3Scalar(dirNormalized, -rtcCenterToPlaneDist, rtcPlanePos);
     return rtcPlanePos;
 }
@@ -11202,7 +11185,7 @@ class SceneModelEntity {
     }
 }
 
-const tempVec4a$b = math.vec4();
+const tempVec4a$c = math.vec4();
 const tempVec4b$7 = math.vec4();
 
 
@@ -11362,9 +11345,9 @@ class Marker extends Component {
             this.fire("viewPos", this._viewPos);
         }
         if (this._canvasPosDirty) {
-            tempVec4a$b.set(this._viewPos);
-            tempVec4a$b[3] = 1.0;
-            math.transformPoint4(this.scene.camera.projMatrix, tempVec4a$b, tempVec4b$7);
+            tempVec4a$c.set(this._viewPos);
+            tempVec4a$c[3] = 1.0;
+            math.transformPoint4(this.scene.camera.projMatrix, tempVec4a$c, tempVec4b$7);
             const aabb = this.scene.canvas.boundary;
             this._canvasPos[0] = Math.floor((1 + tempVec4b$7[0] / tempVec4b$7[3]) * aabb[2] / 2);
             this._canvasPos[1] = Math.floor((1 - tempVec4b$7[1] / tempVec4b$7[3]) * aabb[3] / 2);
@@ -13785,6 +13768,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END$1 = 8;
 
 const TOUCH_CANCELING$1 = 7;
 
+const tmpVec2$1 = math.vec2();
+
 /**
  * Creates {@link AngleMeasurement}s from touch input.
  *
@@ -13923,6 +13908,19 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
         };
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -13936,11 +13934,8 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -13956,7 +13951,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -13964,7 +13959,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                         } else {
                             return;
                         }
@@ -14071,7 +14066,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.corner.entity = snapPickResult.entity;
@@ -14093,7 +14088,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.corner.entity = pickResult.entity;
@@ -14164,7 +14159,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.target.entity = snapPickResult.entity;
@@ -14186,7 +14181,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.target.entity = pickResult.entity;
@@ -14250,14 +14245,11 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -14427,9 +14419,6 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -14439,7 +14428,10 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -14750,8 +14742,8 @@ class AngleMeasurementEditTouchControl extends AngleMeasurementEditControl {
     }
 }
 
-const tempVec3a$K = math.vec3();
-const tempVec3b$z = math.vec3();
+const tempVec3a$L = math.vec3();
+const tempVec3b$A = math.vec3();
 const tempVec3c$v = math.vec3();
 
 /**
@@ -14920,6 +14912,9 @@ class Annotation extends Marker {
             addContextMenuListener(this._marker, e => {
                 e.preventDefault();
                 this.plugin.fire("contextmenu", this);
+            }, e => {
+                e.preventDefault();
+                this.plugin.fire("markerClicked", this);
             });
             this._marker.addEventListener("mouseenter", () => {
                 this.plugin.fire("markerMouseEnter", this);
@@ -14997,9 +14992,9 @@ class Annotation extends Marker {
         if (!pickResult.worldPos || !pickResult.worldNormal) {
             this.error("Param 'pickResult' does not have both worldPos and worldNormal");
         } else {
-            const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a$K);
+            const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a$L);
             const offset = (this.plugin && this.plugin.surfaceOffset) || 0;
-            const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b$z);
+            const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b$A);
             const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c$v);
             this.entity = pickResult.entity;
             this.worldPos = offsetWorldPos;
@@ -17869,7 +17864,7 @@ class OcclusionLayer {
 const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
 const POINT_SIZE = 20;
 
-const tempVec3a$J = math.vec3();
+const tempVec3a$K = math.vec3();
 
 /**
  * Manages occlusion testing. Private member of a Renderer.
@@ -18208,7 +18203,7 @@ class OcclusionTester {
                         gl.uniform1i(sectionPlaneUniforms.active, active ? 1 : 0);
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
-                            gl.uniform3fv(sectionPlaneUniforms.pos, getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$J));
+                            gl.uniform3fv(sectionPlaneUniforms.pos, getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$K));
                             gl.uniform3fv(sectionPlaneUniforms.dir, sectionPlane.dir);
                         }
                     }
@@ -20308,6 +20303,9 @@ const Renderer$1 = function (scene, options) {
                 pickProjMatrix = scene.camera.projMatrix;
                 projection     = scene.camera.projection;
 
+                nearAndFar[0] = scene.camera.project.near;
+                nearAndFar[1] = scene.camera.project.far;
+
                 pickResult.canvasPos = params.canvasPos;
 
             } else {
@@ -20321,6 +20319,9 @@ const Renderer$1 = function (scene, options) {
                     pickProjMatrix = scene.camera.projMatrix;
                     projection     = scene.camera.projection;
 
+                    nearAndFar[0] = scene.camera.project.near;
+                    nearAndFar[1] = scene.camera.project.far;
+
                 } else {
 
                     worldRayOrigin.set(params.origin || [0, 0, 0]);
@@ -20340,6 +20341,9 @@ const Renderer$1 = function (scene, options) {
                     pickProjMatrix = scene.camera.ortho.matrix;
                     projection     = "ortho";
 
+                    nearAndFar[0] = scene.camera.ortho.near;
+                    nearAndFar[1] = scene.camera.ortho.far;
+
                     pickResult.origin = worldRayOrigin;
                     pickResult.direction = worldRayDir;
                 }
@@ -20394,9 +20398,6 @@ const Renderer$1 = function (scene, options) {
 
                     if (pickable.canPickWorldPos && pickable.canPickWorldPos()) {
 
-                        nearAndFar[0] = scene.camera.project.near;
-                        nearAndFar[1] = scene.camera.project.far;
-
                         gpuPickWorldPos(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult);
 
                         if (params.pickSurfaceNormal !== false) {
@@ -23814,12 +23815,12 @@ class CustomProjection extends Component {
 }
 
 const tempVec3$6 = math.vec3();
-const tempVec3b$y = math.vec3();
+const tempVec3b$z = math.vec3();
 const tempVec3c$u = math.vec3();
 const tempVec3d$d = math.vec3();
 const tempVec3e$2 = math.vec3();
 const tempVec3f$2 = math.vec3();
-const tempVec4a$a = math.vec4();
+const tempVec4a$b = math.vec4();
 const tempVec4b$6 = math.vec4();
 const tempVec4c$2 = math.vec4();
 const tempMat = math.mat4();
@@ -24127,7 +24128,7 @@ class Camera extends Component {
     orbitYaw(angleInc) {
         let lookEyeVec = math.subVec3(this._eye, this._look, tempVec3$6);
         math.rotationMat4v(angleInc * 0.0174532925, this._gimbalLock ? this._worldUp : this._up, tempMat);
-        lookEyeVec = math.transformPoint3(tempMat, lookEyeVec, tempVec3b$y);
+        lookEyeVec = math.transformPoint3(tempMat, lookEyeVec, tempVec3b$z);
         this.eye = math.addVec3(this._look, lookEyeVec, tempVec3c$u); // Set eye position as 'look' plus 'eye' vector
         this.up = math.transformPoint3(tempMat, this._up, tempVec3d$d); // Rotate 'up' vector
     }
@@ -24145,7 +24146,7 @@ class Camera extends Component {
             }
         }
         let eye2 = math.subVec3(this._eye, this._look, tempVec3$6);
-        const left = math.cross3Vec3(math.normalizeVec3(eye2, tempVec3b$y), math.normalizeVec3(this._up, tempVec3c$u));
+        const left = math.cross3Vec3(math.normalizeVec3(eye2, tempVec3b$z), math.normalizeVec3(this._up, tempVec3c$u));
         math.rotationMat4v(angleInc * 0.0174532925, left, tempMat);
         eye2 = math.transformPoint3(tempMat, eye2, tempVec3d$d);
         this.up = math.transformPoint3(tempMat, this._up, tempVec3e$2);
@@ -24160,7 +24161,7 @@ class Camera extends Component {
     yaw(angleInc) {
         let look2 = math.subVec3(this._look, this._eye, tempVec3$6);
         math.rotationMat4v(angleInc * 0.0174532925, this._gimbalLock ? this._worldUp : this._up, tempMat);
-        look2 = math.transformPoint3(tempMat, look2, tempVec3b$y);
+        look2 = math.transformPoint3(tempMat, look2, tempVec3b$z);
         this.look = math.addVec3(look2, this._eye, tempVec3c$u);
         if (this._gimbalLock) {
             this.up = math.transformPoint3(tempMat, this._up, tempVec3d$d);
@@ -24180,7 +24181,7 @@ class Camera extends Component {
             }
         }
         let look2 = math.subVec3(this._look, this._eye, tempVec3$6);
-        const left = math.cross3Vec3(math.normalizeVec3(look2, tempVec3b$y), math.normalizeVec3(this._up, tempVec3c$u));
+        const left = math.cross3Vec3(math.normalizeVec3(look2, tempVec3b$z), math.normalizeVec3(this._up, tempVec3c$u));
         math.rotationMat4v(angleInc * 0.0174532925, left, tempMat);
         this.up = math.transformPoint3(tempMat, this._up, tempVec3f$2);
         look2 = math.transformPoint3(tempMat, look2, tempVec3d$d);
@@ -24197,7 +24198,7 @@ class Camera extends Component {
         const vec = [0, 0, 0];
         let v;
         if (pan[0] !== 0) {
-            const left = math.cross3Vec3(math.normalizeVec3(eye2, []), math.normalizeVec3(this._up, tempVec3b$y));
+            const left = math.cross3Vec3(math.normalizeVec3(eye2, []), math.normalizeVec3(this._up, tempVec3b$z));
             v = math.mulVec3Scalar(left, pan[0]);
             vec[0] += v[0];
             vec[1] += v[1];
@@ -24226,7 +24227,7 @@ class Camera extends Component {
      */
     zoom(delta) {
         const vec = math.subVec3(this._eye, this._look, tempVec3$6);
-        const lenLook = Math.abs(math.lenVec3(vec, tempVec3b$y));
+        const lenLook = Math.abs(math.lenVec3(vec, tempVec3b$z));
         const newLenLook = Math.abs(lenLook + delta);
         if (newLenLook < 0.5) {
             return;
@@ -24685,7 +24686,7 @@ class Camera extends Component {
      * @returns {[number, number]} the canvas position
      */
     projectWorldPos(worldPos) {
-        const _worldPos = tempVec4a$a;
+        const _worldPos = tempVec4a$b;
         const viewPos = tempVec4b$6;
         const screenPos = tempVec4c$2;
         _worldPos[0] = worldPos[0];
@@ -34770,7 +34771,7 @@ function buildFragmentDraw(mesh) {
  * @author xeolabs / https://github.com/xeolabs
  */
 
-const tempVec3a$I = math.vec3();
+const tempVec3a$J = math.vec3();
 
 const ids$2 = new Map$1({});
 
@@ -34872,7 +34873,7 @@ DrawRenderer.prototype.drawMesh = function (frameCtx, mesh) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$I);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$J);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -36018,7 +36019,7 @@ function buildFragment$5(mesh) {
 
 const ids$1 = new Map$1({});
 
-const tempVec3a$H = math.vec3();
+const tempVec3a$I = math.vec3();
 
 /**
  * @private
@@ -36105,7 +36106,7 @@ EmphasisFillRenderer.prototype.drawMesh = function (frameCtx, mesh, mode) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$H);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$I);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -36449,7 +36450,7 @@ function buildFragment$4(mesh) {
 
 const ids = new Map$1({});
 
-const tempVec3a$G = math.vec3();
+const tempVec3a$H = math.vec3();
 
 /**
  * @private
@@ -36535,7 +36536,7 @@ EmphasisEdgesRenderer.prototype.drawMesh = function (frameCtx, mesh, mode) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$G);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$H);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -36848,7 +36849,7 @@ function buildFragment$3(mesh) {
  * @author xeolabs / https://github.com/xeolabs
  */
 
-const tempVec3a$F = math.vec3();
+const tempVec3a$G = math.vec3();
 
 // No ID, because there is exactly one PickMeshRenderer per scene
 
@@ -36935,7 +36936,7 @@ PickMeshRenderer.prototype.drawMesh = function (frameCtx, mesh) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$F);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$G);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -37187,7 +37188,7 @@ function buildFragment$2(mesh) {
  * @author xeolabs / https://github.com/xeolabs
  */
 
-const tempVec3a$E = math.vec3();
+const tempVec3a$F = math.vec3();
 
 /**
  * @private
@@ -37282,7 +37283,7 @@ PickTriangleRenderer.prototype.drawMesh = function (frameCtx, mesh) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$E);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$F);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -37531,7 +37532,7 @@ function buildFragment$1(mesh) {
  * @author xeolabs / https://github.com/xeolabs
  */
 
-const tempVec3a$D = math.vec3();
+const tempVec3a$E = math.vec3();
 
 // No ID, because there is exactly one PickMeshRenderer per scene
 
@@ -37646,7 +37647,7 @@ OcclusionRenderer.prototype.drawMesh = function (frameCtx, mesh) {
                         if (active) {
                             const sectionPlane = sectionPlanes[sectionPlaneIndex];
                             if (origin) {
-                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$D);
+                                const rtcSectionPlanePos = getPlaneRTCPos(sectionPlane.dist, sectionPlane.dir, origin, tempVec3a$E);
                                 gl.uniform3fv(sectionPlaneUniforms.pos, rtcSectionPlanePos);
                             } else {
                                 gl.uniform3fv(sectionPlaneUniforms.pos, sectionPlane.pos);
@@ -42891,7 +42892,12 @@ class AxisGizmoPlugin extends Plugin {
     }
 }
 
-math.vec3();
+const tempVec3a$D = math.vec3();
+const tempVec3b$y = math.vec3();
+const tempVec4a$a = math.vec4();
+const front = math.vec3([0,  0, -1]);
+const back  = math.vec3([0,  0,  1]);
+const up    = math.vec3([0,  1,  0]);
 
 /**
  *  @desc An arbitrarily-aligned World-space clipping plane.
@@ -42963,6 +42969,8 @@ class SectionPlane extends Component {
         this._state = new RenderState({
             active: true,
             pos: math.vec3(),
+            quaternion: math.vec4(),
+            roll: 0,
             dir: math.vec3(),
             dist: 0
         });
@@ -43024,6 +43032,59 @@ class SectionPlane extends Component {
         return this._state.pos;
     }
 
+    /**
+     * Sets the quaternion of this SectionPlane's plane.
+     *
+     * Default value is ````[0, -1, 0, 0]````.
+     *
+     * @param {Number[]} value New quaternion.
+     */
+    set quaternion(value) {
+        this._state.quaternion.set(value || [0, 0, 0, -1]);
+        math.vec3ApplyQuaternion(this._state.quaternion, back, this._state.dir);
+        const quatUp = math.vec3ApplyQuaternion(this._state.quaternion, up, tempVec3a$D);
+        const dirOnlyQ = math.vec3PairToQuaternion(back, this._state.dir, tempVec4a$a);
+        const dirOnlyUp = math.vec3ApplyQuaternion(dirOnlyQ, up, tempVec3b$y);
+        const angle = Math.acos(Math.min(1, math.dotVec3(quatUp, dirOnlyUp)));
+        const sign = Math.sign(math.dotVec3(this._state.dir, math.cross3Vec3(quatUp, dirOnlyUp, tempVec3b$y)));
+        this._state.roll = sign * angle;
+        this._onDirUpdated();
+    }
+
+    /**
+     * Gets the quaternion of this SectionPlane's plane.
+     *
+     * Default value is ````[0, -1, 0, 0]````.
+     *
+     * @returns {Number[]} value Current quaternion.
+     */
+    get quaternion() {
+        return this._state.quaternion;
+    }
+
+    /**
+     * Sets the roll of this SectionPlane's plane.
+     *
+     * Default value is ````0````.
+     *
+     * @param {Number[]} value New roll.
+     */
+    set roll(value) {
+        this._state.roll = value || 0;
+        this._onDirRollUpdated();
+    }
+
+    /**
+     * Gets the roll of this SectionPlane's plane.
+     *
+     * Default value is ````0````.
+     *
+     * @returns {Number[]} value Current roll.
+     */
+    get roll() {
+        return this._state.roll;
+    }
+
     /**
      * Sets the direction of this SectionPlane's plane.
      *
@@ -43032,7 +43093,25 @@ class SectionPlane extends Component {
      * @param {Number[]} value New direction.
      */
     set dir(value) {
-        this._state.dir.set(value || [0, 0, -1]);
+        this._state.dir.set(value || front);
+        this._onDirRollUpdated();
+    }
+
+    _onDirRollUpdated() {
+        math.vec3PairToQuaternion(back, this._state.dir, this._state.quaternion);
+
+        tempVec4a$a[0] = 0;
+        tempVec4a$a[1] = 0;
+        tempVec4a$a[2] = -1;
+        tempVec4a$a[3] = this._state.roll;
+        math.angleAxisToQuaternion(tempVec4a$a, tempVec4a$a);
+
+        math.mulQuaternions(this._state.quaternion, tempVec4a$a, this._state.quaternion);
+
+        this._onDirUpdated();
+    }
+
+    _onDirUpdated() {
         this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
         this.glRedraw();
         this.fire("dir", this._state.dir);
@@ -52689,7 +52768,10 @@ class TrianglesColorRenderer$1 extends TrianglesBatchingRenderer {
         }
 
         if (scene.logarithmicDepthBufferEnabled) {
-            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+            src.push("    float dx = dFdx(vFragDepth);");
+            src.push("    float dy = dFdy(vFragDepth);");
+            src.push("    float diff = sqrt(dx*dx+dy*dy);");
+            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth + diff ) * logDepthBufFC * 0.5;");
         }
 
         if (this._withSAO) {
@@ -58040,7 +58122,10 @@ class TrianglesColorRenderer extends TrianglesInstancingRenderer {
         }
 
         if (scene.logarithmicDepthBufferEnabled) {
-            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+            src.push("    float dx = dFdx(vFragDepth);");
+            src.push("    float dy = dFdy(vFragDepth);");
+            src.push("    float diff = sqrt(dx*dx+dy*dy);");
+            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth + diff ) * logDepthBufFC * 0.5;");
         }
 
         // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top
@@ -66124,7 +66209,7 @@ class VBOInstancingLinesLayer {
 
         let pickFlag = (visible && !culled && pickable) ? RENDER_PASSES.PICK : RENDER_PASSES.NOT_RENDERED;
 
-        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 255 : 0;
+        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 1 : 0;
 
         let vertFlag = 0;
         vertFlag |= colorFlag;
@@ -80701,8 +80786,7 @@ class DTXTrianglesLayer {
                 worldPos[2] = positions[i + 2];
                 worldPos[3] = 1.0;
                 math.decompressPosition(worldPos, positionsDecodeMatrix);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
+                math.mulMat4v4(this.model.worldMatrix, worldPos, worldPos);
                 worldPos[0] += offsetX;
                 worldPos[1] += offsetY;
                 worldPos[2] += offsetZ;
@@ -84486,6 +84570,7 @@ class SceneModel extends Component {
     set matrix(value) {
         this._matrix.set(value || DEFAULT_MATRIX);
         math.decomposeMat4(this._matrix, this._position, this._quaternion, this._scale);
+        math.quaternionToEuler(this._quaternion, "XYZ", this._rotation);
         this._matrixDirty = false;
         this._setWorldMatrixDirty();
         this._sceneModelDirty();
@@ -89878,6 +89963,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 5;
 
 const TOUCH_CANCELING = 7;
 
+const tmpVec2 = math.vec2();
+
 /**
  * Creates {@link DistanceMeasurement}s from touch input.
  *
@@ -90024,6 +90111,19 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
         };
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -90037,16 +90137,8 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -90062,7 +90154,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -90070,7 +90162,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                         } else {
                             return;
                         }
@@ -90174,7 +90266,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentDistanceMeasurement.target.entity = snapPickResult.entity;
@@ -90192,7 +90284,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentDistanceMeasurement.target.entity = pickResult.entity;
@@ -90251,19 +90343,11 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-            
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -90425,14 +90509,6 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -90442,7 +90518,10 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -93267,7 +93346,7 @@ CameraPathAnimation.PLAYING_TO = 3;
 const tempVec3$3 = math.vec3();
 const tempVec3b$5 = math.vec3();
 math.vec3();
-const zeroVec$2 = math.vec3([0, -1, 0]);
+const zeroVec$1 = math.vec3([0, -1, 0]);
 const tempQuat = math.vec4([0, 0, 0, 1]);
 
 /**
@@ -93694,7 +93773,7 @@ class ImagePlane extends Component {
 
             math.normalizeVec3(negDir);
             math.mulVec3Scalar(negDir, dist, tempVec3b$5);
-            math.vec3PairToQuaternion(zeroVec$2, dir, tempQuat);
+            math.vec3PairToQuaternion(zeroVec$1, dir, tempQuat);
 
             this._node.quaternion = tempQuat;
         }
@@ -120733,9 +120812,6 @@ class OBJLoaderPlugin extends Plugin {
     }
 }
 
-const zeroVec$1 = new Float64Array([0, 0, 1]);
-const quat$1 = new Float64Array(4);
-
 /**
  * Controls a {@link SectionPlane} with mouse and touch input.
  *
@@ -120853,15 +120929,13 @@ class Control {
         });
 
         const handlers = { };
-        const addAxis = (rgb, axisDirection, hoopDirection) => {
+        const addAxis = (rgb, hoopRot) => {
+            math.mulVec3Scalar(rgb, -1, math.vec3());
             const material = colorMaterial(rgb);
 
-            const rotateToHorizontal = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-            const hoopRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], hoopDirection), math.identityMat4());
-            const hoopMatrix = math.mulMat4(hoopRotation, rotateToHorizontal, math.identityMat4());
-
+            const hoopMatrix = math.quaternionToRotationMat4(hoopRot, math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), hoopMatrix, hoopMatrix);
             const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-
             const scaledArrowMatrix = (t, matR) => {
                 const matT = math.translateMat4v(t, math.identityMat4());
                 const ret = math.identityMat4();
@@ -120930,7 +121004,8 @@ class Control {
             }), NO_STATE_INHERIT);
 
 
-            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], axisDirection), math.identityMat4());
+            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], rgb), math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), axisRotation, axisRotation);
 
             const translatedAxisMatrix = (yOffset) => math.mulMat4(axisRotation, math.translateMat4c(0, yOffset, 0, math.identityMat4()), math.identityMat4());
             const arrowMatrix = translatedAxisMatrix(arrowLength + .1);
@@ -120991,8 +121066,10 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT);
 
+            const localToWorldVec = (localVec, worldVec) => math.vec3ApplyQuaternion(rootNode.quaternion, localVec, worldVec);
+
             const closestPointOnAxis = (function() {
-                const worldAxis = math.vec4();
+                const worldAxis = math.vec3();
                 const org = math.vec3();
                 const dir = math.vec3();
                 return (canvasPos, dst) => {
@@ -121027,22 +121104,39 @@ class Control {
                         if (closestPointOnAxis(canvasPos, tempVec3)) {
                             math.subVec3(tempVec3, initOffset, tempVec3);
                             setPos(tempVec3);
-                            if (self._sectionPlane) {
-                                self._sectionPlane.pos = tempVec3;
+                            if (this._sectionPlane) {
+                                this._sectionPlane.pos = tempVec3;
                             }
                         }
                     });
                 }
             };
 
-            const lastCanvasPos = math.vec2();
             handlers[rotateHandle.id] = {
                 setActivated: a => hoop.visible = a,
                 initDragAction: (initCanvasPos) => {
-                    lastCanvasPos.set(initCanvasPos);
+                    const rotationFromCanvasPos = (function() {
+                        const planeCanvasPos = camera.projectWorldPos(pos);
+                        localToWorldVec(rgb, tempVec3);
+                        math.transformVec3(camera.normalMatrix, tempVec3, tempVec3);
+                        const axisCoeff = Math.sign(tempVec3[2]);
+                        return (canvasPos) => {
+                            const dx = canvasPos[0] - planeCanvasPos[0];
+                            const dy = canvasPos[1] - planeCanvasPos[1];
+                            return axisCoeff * Math.atan2(-dy, dx);
+                        };
+                    })();
+
+                    let lastRotation = rotationFromCanvasPos(initCanvasPos);
+
                     return canvasPos => {
-                        dragRotateSectionPlane(rgb, lastCanvasPos, canvasPos);
-                        lastCanvasPos.set(canvasPos);
+                        const rotation = rotationFromCanvasPos(canvasPos);
+                        rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
+                        if (this._sectionPlane) {
+                            ignoreNextSectionPlaneDirUpdate = true;
+                            this._sectionPlane.quaternion = rootNode.quaternion;
+                        }
+                        lastRotation = rotation;
                     };
                 }
             };
@@ -121154,9 +121248,9 @@ class Control {
             //
             //----------------------------------------------------------------------------------------------------------
 
-            addAxis([1,0,0], [ 1,  0,  0 ], [ 1, 0,  0 ]),
-            addAxis([0,1,0], [ 0, -1,  0 ], [ 0, 1,  0 ]),
-            addAxis([0,0,1], [ 0,  0, -1 ], [ 0, 0, -1 ])
+            addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
+            addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
+            addAxis([0,0,1], math.identityQuaternion())
         ];
 
         const cleanups = [ ];
@@ -121178,101 +121272,6 @@ class Control {
             cleanups.push(() => scene.off(onSceneTick));
         }
 
-        const localToWorldVec = (function () {
-            const mat = math.mat4();
-            return function (localVec, worldVec) {
-                math.quaternionToMat4(rootNode.quaternion, mat);
-                math.transformVec3(mat, localVec, worldVec);
-                math.normalizeVec3(worldVec);
-                return worldVec;
-            };
-        })();
-
-        const getTranslationPlane = (worldAxis, planeNormal) => {
-            const absX = Math.abs(worldAxis[0]);
-            if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
-                math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
-            } else {
-                math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
-            }
-            math.cross3Vec3(planeNormal, worldAxis, planeNormal);
-            math.normalizeVec3(planeNormal);
-        };
-
-        const self = this;
-        var dragRotateSectionPlane = (function () {
-            const p1 = math.vec4();
-            const p2 = math.vec4();
-            const c = math.vec4();
-            const worldAxis = math.vec4();
-            const dir = math.vec3();
-            const mat = math.mat4();
-            const planeNormal = math.vec3();
-            return function (baseAxis, fromMouse, toMouse) {
-                localToWorldVec(baseAxis, worldAxis);
-                const hasData = getPointerPlaneIntersect(fromMouse, worldAxis, p1) && getPointerPlaneIntersect(toMouse, worldAxis, p2);
-                if (!hasData) { // Find intersections with view plane and project down to origin
-                    getTranslationPlane(worldAxis, planeNormal);
-                    getPointerPlaneIntersect(fromMouse, planeNormal, p1, 1); // Ensure plane moves closer to camera so angles become workable
-                    getPointerPlaneIntersect(toMouse, planeNormal, p2, 1);
-                    var dot = math.dotVec3(p1, worldAxis);
-                    p1[0] -= dot * worldAxis[0];
-                    p1[1] -= dot * worldAxis[1];
-                    p1[2] -= dot * worldAxis[2];
-                    dot = math.dotVec3(p2, worldAxis);
-                    p2[0] -= dot * worldAxis[0];
-                    p2[1] -= dot * worldAxis[1];
-                    p2[2] -= dot * worldAxis[2];
-                }
-                math.normalizeVec3(p1);
-                math.normalizeVec3(p2);
-                dot = math.dotVec3(p1, p2);
-                dot = math.clamp(dot, -1.0, 1.0); // Rounding errors cause dot to exceed allowed range
-                var incDegrees = Math.acos(dot) * math.RADTODEG;
-                math.cross3Vec3(p1, p2, c);
-                if (math.dotVec3(c, worldAxis) < 0.0) {
-                    incDegrees = -incDegrees;
-                }
-                rootNode.rotate(baseAxis, incDegrees);
-
-                if (self._sectionPlane) {
-                    math.quaternionToMat4(rootNode.quaternion, mat);  // << ---
-                    math.transformVec3(mat, [0, 0, 1], dir);
-                    ignoreNextSectionPlaneDirUpdate = true;
-                    self._sectionPlane.dir = dir;
-                }
-            };
-        })();
-
-        var getPointerPlaneIntersect = (function () {
-            const dir = math.vec4([0, 0, 0, 1]);
-            const matrix = math.mat4();
-            return function (mouse, axis, dest, offset) {
-                offset = offset || 0;
-                dir[0] = mouse[0] / canvas.width * 2.0 - 1.0;
-                dir[1] = -(mouse[1] / canvas.height * 2.0 - 1.0);
-                dir[2] = 0.0;
-                dir[3] = 1.0;
-                math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
-                math.inverseMat4(matrix);
-                math.transformVec4(matrix, dir, dir);
-                math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
-                var rayO = camera.eye; // The direction
-                math.subVec4(dir, rayO, dir);
-                const origin = self._sectionPlane.pos; // Plane origin:
-                var d = -math.dotVec3(origin, axis) - offset;
-                var dot = math.dotVec3(axis, dir);
-                if (Math.abs(dot) > 0.005) {
-                    var t = -(math.dotVec3(axis, rayO) + d) / dot;
-                    math.mulVec3Scalar(dir, t, dest);
-                    math.addVec3(dest, rayO);
-                    math.subVec3(dest, origin, dest);
-                    return true;
-                }
-                return false;
-            };
-        })();
-
         {
             let deactivateActive = null;
             let currentDrag = null;
@@ -121389,7 +121388,7 @@ class Control {
             this.id = sectionPlane.id;
             this._sectionPlane = sectionPlane;
             const setPosFromSectionPlane = () => setPos(sectionPlane.pos);
-            const setDirFromSectionPlane = () => rootNode.quaternion = math.vec3PairToQuaternion(zeroVec$1, sectionPlane.dir, quat$1);
+            const setDirFromSectionPlane = () => rootNode.quaternion = sectionPlane.quaternion;
             setPosFromSectionPlane();
             setDirFromSectionPlane();
             const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);
@@ -126055,6 +126054,8 @@ class TreeViewPlugin extends Plugin {
      * @param {RenderService} [cfg.renderService] Optional {@link RenderService} to use. Defaults to the {@link TreeViewPlugin}'s default {@link RenderService}.
      * @param {Boolean} [cfg.showIndeterminate=false] When true, will show indeterminate state for checkboxes when some but not all child nodes are checked
      * @param {Boolean} [cfg.showProjectNode=false] When true, will show top level project node when hierarchy is set to "storeys"
+     * @param {Function} [cfg.elevationSortFunction] Optional function to replace the default elevation sort function. The function should take two nodes and return -1, 0 or 1. 
+     * @param {Function} [cfg.defaultSortFunction] Optional function to replace the default sort function. The function should take two nodes and return -1, 0 or 1.
      */
     constructor(viewer, cfg = {}) {
 
@@ -126108,6 +126109,8 @@ class TreeViewPlugin extends Plugin {
         this._renderService = cfg.renderService || new RenderService();
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
+        this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;
+        this._defaultSortFunction = cfg.defaultSortFunction ?? undefined;
 
         if (!this._renderService) {
             throw new Error('TreeViewPlugin: no render service set');
@@ -126921,9 +126924,11 @@ class TreeViewPlugin extends Plugin {
         }
         const firstChild = children[0];
         if ((this._hierarchy === "storeys" || this._hierarchy === "containment") &&  firstChild.type === "IfcBuildingStorey") {
-            children.sort(this._getSpatialSortFunc());
+            if (this._elevationSortFunction) children.sort(this._elevationSortFunction);
+            else children.sort(this._getSpatialSortFunc());
         } else {
-            children.sort(this._alphaSortFunc);
+            if (this._defaultSortFunction) children.sort(this._defaultSortFunction);
+            else children.sort(this._alphaSortFunc);
         }
         for (let i = 0, len = children.length; i < len; i++) {
             const node = children[i];