@inweb/viewer-three 25.11.2 → 25.12.0

package/dist/viewer-three.module.js

@@ -1,9 +1,11 @@
-import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Clock, Object3D, Euler, Matrix4, LineBasicMaterial, CylinderGeometry, BoxGeometry, BufferGeometry, Float32BufferAttribute, Mesh, OctahedronGeometry, Line, SphereGeometry, TorusGeometry, PlaneGeometry, DoubleSide, Plane, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Vector4, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Controls, Clock, Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, DoubleSide, Plane, Object3D, Matrix4, Vector4, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import Konva from "konva";
 
+import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 
 class Commands {
@@ -459,6 +461,20 @@ class SelectionComponent {
         this.raycaster.setFromCamera(coords, this.viewer.camera);
         const objects = [];
         this.viewer.scene.traverseVisible((child => objects.push(child)));
+        this.raycaster.params = this.raycaster.params = {
+            Mesh: {},
+            Line: {
+                threshold: .25
+            },
+            Line2: {
+                threshold: .25
+            },
+            LOD: {},
+            Points: {
+                threshold: .1
+            },
+            Sprite: {}
+        };
         return this.raycaster.intersectObjects(objects, false);
     }
     select(object) {
@@ -786,10 +802,7 @@ function zoomToObjects(viewer, handles = []) {
         var _a;
         if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
     }));
-    const extents = objects.reduce(((result, object) => {
-        const objectExtents = (new Box3).setFromObject(object);
-        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-    }), new Box3);
+    const extents = objects.reduce(((result, object) => result.expandByObject(object)), new Box3);
     const center = extents.getCenter(new Vector3);
     const distance = extents.getBoundingSphere(new Sphere).radius;
     const delta = new Vector3(0, 0, 1);
@@ -806,10 +819,7 @@ function zoomToObjects(viewer, handles = []) {
 commands("ThreeJS").registerCommand("zoomToObjects", zoomToObjects);
 
 function zoomToSelected(viewer) {
-    const extents = viewer.selected.reduce(((result, object) => {
-        const objectExtents = (new Box3).setFromObject(object);
-        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-    }), new Box3);
+    const extents = viewer.selected.reduce(((result, object) => result.expandByObject(object)), new Box3);
     if (extents.isEmpty()) extents.copy(viewer.extents);
     const center = extents.getCenter(new Vector3);
     const distance = extents.getBoundingSphere(new Sphere).radius;
@@ -2740,7 +2750,7 @@ class KonvaMarkup {
     }
 }
 
-const _changeEvent$2 = {
+const _changeEvent = {
     type: "change"
 };
 
@@ -2837,7 +2847,7 @@ class OrbitControls extends EventDispatcher {
             scope.object.position.copy(scope.position0);
             scope.object.zoom = scope.zoom0;
             scope.object.updateProjectionMatrix();
-            scope.dispatchEvent(_changeEvent$2);
+            scope.dispatchEvent(_changeEvent);
             scope.update();
             scope.state = STATE.NONE;
         };
@@ -2898,7 +2908,7 @@ class OrbitControls extends EventDispatcher {
                 }
                 scope.scale = 1;
                 if (scope.zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS || lastTargetPosition.distanceToSquared(scope.target) > 0) {
-                    scope.dispatchEvent(_changeEvent$2);
+                    scope.dispatchEvent(_changeEvent);
                     lastPosition.copy(scope.object.position);
                     lastQuaternion.copy(scope.object.quaternion);
                     lastTargetPosition.copy(scope.target);
@@ -3069,7 +3079,7 @@ class OrbitControls extends EventDispatcher {
             scope.update();
             if (event.deltaY !== 0) {
                 scope.state = STATE.DOLLY;
-                scope.dispatchEvent(_changeEvent$2);
+                scope.dispatchEvent(_changeEvent);
                 scope.state = STATE.NONE;
             }
         }
@@ -3528,40 +3538,37 @@ class ZoomDragger extends OrbitDragger {
     }
 }
 
-const _changeEvent$1 = {
-    type: "change"
-};
-
-class WalkControls extends EventDispatcher {
+class WalkControls extends Controls {
     constructor(camera, canvas) {
-        super();
+        super(camera, canvas);
         this.movementSpeed = .2;
         this.lookSpeed = 5;
         this.multiplier = 5;
         this.moveWheel = 0;
         this.mouseDragOn = false;
         this.onPointerDown = event => {
-            if (!event.isPrimary || event.button !== 0) return;
-            this.canvas.setPointerCapture(event.pointerId);
+            if (event.button !== 0) return;
+            this.domElement.setPointerCapture(event.pointerId);
             this.downPosition.set(event.clientX, event.clientY);
-            this.quaternion.copy(this.camera.quaternion);
+            this.quaternion.copy(this.object.quaternion);
             this.mouseDragOn = true;
         };
         this.onPointerMove = event => {
-            if (!event.isPrimary || !this.mouseDragOn) return;
+            if (!this.mouseDragOn) return;
             const movePosition = new Vector2(event.clientX, event.clientY);
             if (this.downPosition.distanceTo(movePosition) === 0) return;
             this.rotateDelta.copy(this.downPosition).sub(movePosition);
             this.rotateCamera(this.rotateDelta);
-            this.dispatchEvent(_changeEvent$1);
+            this.dispatchEvent({
+                type: "change"
+            });
         };
         this.onPointerUp = event => {
-            if (!event.isPrimary || event.button !== 0) return;
-            this.canvas.releasePointerCapture(event.pointerId);
+            this.domElement.releasePointerCapture(event.pointerId);
             this.mouseDragOn = false;
         };
         this.onPointerCancel = event => {
-            this.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+            this.domElement.dispatchEvent(new PointerEvent("pointerup", event));
         };
         this.onWheel = event => {
             this.moveWheel = event.deltaY;
@@ -3607,69 +3614,58 @@ class WalkControls extends EventDispatcher {
             }
         };
         this.onKeyUp = event => {
-            switch (event.code) {
-              case "ArrowLeft":
-              case "ArrowRight":
-              case "ArrowUp":
-              case "ArrowDown":
-              case "KeyW":
-              case "KeyS":
-              case "KeyA":
-              case "KeyD":
-              case "KeyQ":
-              case "KeyE":
-                this.moveKeys.delete(event.code);
-                this.update();
-                break;
-            }
+            if (this.moveKeys.delete(event.code)) this.update();
         };
-        this.camera = camera;
-        this.canvas = canvas;
         this.moveKeys = new Set;
         this.moveClock = new Clock;
         this.quaternion = camera.quaternion.clone();
         this.downPosition = new Vector2(0, 0);
         this.rotateDelta = new Vector2(0, 0);
-        this.canvas.addEventListener("pointerdown", this.onPointerDown);
-        this.canvas.addEventListener("pointermove", this.onPointerMove);
-        this.canvas.addEventListener("pointerup", this.onPointerUp);
-        this.canvas.addEventListener("pointercancel", this.onPointerCancel);
-        this.canvas.addEventListener("wheel", this.onWheel);
+        this.domElement.addEventListener("pointerdown", this.onPointerDown);
+        this.domElement.addEventListener("pointermove", this.onPointerMove);
+        this.domElement.addEventListener("pointerup", this.onPointerUp);
+        this.domElement.addEventListener("pointercancel", this.onPointerCancel);
+        this.domElement.addEventListener("wheel", this.onWheel);
         window.addEventListener("keydown", this.onKeyDown);
         window.addEventListener("keyup", this.onKeyUp);
     }
     dispose() {
-        this.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        this.canvas.removeEventListener("pointermove", this.onPointerMove);
-        this.canvas.removeEventListener("pointerup", this.onPointerUp);
-        this.canvas.removeEventListener("pointercancel", this.onPointerCancel);
-        this.canvas.removeEventListener("wheel", this.onWheel);
+        this.domElement.removeEventListener("pointerdown", this.onPointerDown);
+        this.domElement.removeEventListener("pointermove", this.onPointerMove);
+        this.domElement.removeEventListener("pointerup", this.onPointerUp);
+        this.domElement.removeEventListener("pointercancel", this.onPointerCancel);
+        this.domElement.removeEventListener("wheel", this.onWheel);
         window.removeEventListener("keydown", this.onKeyDown);
         window.removeEventListener("keyup", this.onKeyUp);
+        super.dispose();
     }
     update() {
         if (this.moveKeys.size > 0) {
             const timeDelta = this.moveClock.getDelta();
             const moveDelta = timeDelta * this.movementSpeed * this.multiplier;
-            if (this.moveKeys.has("KeyW")) this.camera.translateZ(-moveDelta);
-            if (this.moveKeys.has("KeyS")) this.camera.translateZ(moveDelta);
-            if (this.moveKeys.has("KeyA")) this.camera.translateX(-moveDelta);
-            if (this.moveKeys.has("KeyD")) this.camera.translateX(moveDelta);
-            if (this.moveKeys.has("KeyQ")) this.camera.translateY(moveDelta);
-            if (this.moveKeys.has("KeyE")) this.camera.translateY(-moveDelta);
+            if (this.moveKeys.has("KeyW")) this.object.translateZ(-moveDelta);
+            if (this.moveKeys.has("KeyS")) this.object.translateZ(moveDelta);
+            if (this.moveKeys.has("KeyA")) this.object.translateX(-moveDelta);
+            if (this.moveKeys.has("KeyD")) this.object.translateX(moveDelta);
+            if (this.moveKeys.has("KeyQ")) this.object.translateY(moveDelta);
+            if (this.moveKeys.has("KeyE")) this.object.translateY(-moveDelta);
             const lookDelta = this.lookSpeed + (this.multiplier - 1);
             if (this.moveKeys.has("ArrowUp")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, -lookDelta / 2)));
             if (this.moveKeys.has("ArrowDown")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, lookDelta / 2)));
             if (this.moveKeys.has("ArrowLeft")) this.rotateCamera(this.rotateDelta.add(new Vector2(lookDelta, 0)));
             if (this.moveKeys.has("ArrowRight")) this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
             this.moveWheel = 0;
-            this.dispatchEvent(_changeEvent$1);
+            this.dispatchEvent({
+                type: "change"
+            });
         }
         if (this.moveWheel !== 0) {
             const moveDelta = this.moveWheel * 1e-4 * this.movementSpeed * this.multiplier;
-            this.camera.translateZ(-moveDelta);
+            this.object.translateZ(-moveDelta);
             this.moveWheel += -1 * Math.sign(this.moveWheel);
-            this.dispatchEvent(_changeEvent$1);
+            this.dispatchEvent({
+                type: "change"
+            });
         }
         if (this.moveKeys.size === 0 && this.moveWheel === 0) {
             this.moveClock.stop();
@@ -3677,15 +3673,15 @@ class WalkControls extends EventDispatcher {
         }
     }
     rotateCamera(delta) {
-        const rotateX = Math.PI * delta.x / this.canvas.clientWidth;
-        const rotateY = Math.PI * delta.y / this.canvas.clientHeight;
+        const rotateX = Math.PI * delta.x / this.domElement.clientWidth;
+        const rotateY = Math.PI * delta.y / this.domElement.clientHeight;
         const xRotation = new Quaternion;
-        xRotation.setFromAxisAngle(this.camera.up, rotateX);
+        xRotation.setFromAxisAngle(this.object.up, rotateX);
         const yRotation = new Quaternion;
         yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
         const quaternion = this.quaternion.clone();
         quaternion.premultiply(xRotation).multiply(yRotation).normalize();
-        this.camera.setRotationFromQuaternion(quaternion);
+        this.object.setRotationFromQuaternion(quaternion);
     }
 }
 
@@ -3724,895 +3720,6 @@ class WalkDragger {
     }
 }
 
-const _raycaster = new Raycaster;
-
-const _tempVector = new Vector3;
-
-const _tempVector2 = new Vector3;
-
-const _tempQuaternion = new Quaternion;
-
-const _unit = {
-    X: new Vector3(1, 0, 0),
-    Y: new Vector3(0, 1, 0),
-    Z: new Vector3(0, 0, 1)
-};
-
-const _changeEvent = {
-    type: "change"
-};
-
-const _mouseDownEvent = {
-    type: "mouseDown"
-};
-
-const _mouseUpEvent = {
-    type: "mouseUp",
-    mode: null
-};
-
-const _objectChangeEvent = {
-    type: "objectChange"
-};
-
-class TransformControls extends Object3D {
-    constructor(camera, domElement) {
-        super();
-        if (domElement === undefined) {
-            console.warn('THREE.TransformControls: The second parameter "domElement" is now mandatory.');
-            domElement = document;
-        }
-        this.isTransformControls = true;
-        this.visible = false;
-        this.domElement = domElement;
-        this.domElement.style.touchAction = "none";
-        const _gizmo = new TransformControlsGizmo;
-        this._gizmo = _gizmo;
-        this.add(_gizmo);
-        const _plane = new TransformControlsPlane;
-        this._plane = _plane;
-        this.add(_plane);
-        const scope = this;
-        function defineProperty(propName, defaultValue) {
-            let propValue = defaultValue;
-            Object.defineProperty(scope, propName, {
-                get: function() {
-                    return propValue !== undefined ? propValue : defaultValue;
-                },
-                set: function(value) {
-                    if (propValue !== value) {
-                        propValue = value;
-                        _plane[propName] = value;
-                        _gizmo[propName] = value;
-                        scope.dispatchEvent({
-                            type: propName + "-changed",
-                            value: value
-                        });
-                        scope.dispatchEvent(_changeEvent);
-                    }
-                }
-            });
-            scope[propName] = defaultValue;
-            _plane[propName] = defaultValue;
-            _gizmo[propName] = defaultValue;
-        }
-        defineProperty("camera", camera);
-        defineProperty("object", undefined);
-        defineProperty("enabled", true);
-        defineProperty("axis", null);
-        defineProperty("mode", "translate");
-        defineProperty("translationSnap", null);
-        defineProperty("rotationSnap", null);
-        defineProperty("scaleSnap", null);
-        defineProperty("space", "world");
-        defineProperty("size", 1);
-        defineProperty("dragging", false);
-        defineProperty("showX", true);
-        defineProperty("showY", true);
-        defineProperty("showZ", true);
-        const worldPosition = new Vector3;
-        const worldPositionStart = new Vector3;
-        const worldQuaternion = new Quaternion;
-        const worldQuaternionStart = new Quaternion;
-        const cameraPosition = new Vector3;
-        const cameraQuaternion = new Quaternion;
-        const pointStart = new Vector3;
-        const pointEnd = new Vector3;
-        const rotationAxis = new Vector3;
-        const rotationAngle = 0;
-        const eye = new Vector3;
-        defineProperty("worldPosition", worldPosition);
-        defineProperty("worldPositionStart", worldPositionStart);
-        defineProperty("worldQuaternion", worldQuaternion);
-        defineProperty("worldQuaternionStart", worldQuaternionStart);
-        defineProperty("cameraPosition", cameraPosition);
-        defineProperty("cameraQuaternion", cameraQuaternion);
-        defineProperty("pointStart", pointStart);
-        defineProperty("pointEnd", pointEnd);
-        defineProperty("rotationAxis", rotationAxis);
-        defineProperty("rotationAngle", rotationAngle);
-        defineProperty("eye", eye);
-        this._offset = new Vector3;
-        this._startNorm = new Vector3;
-        this._endNorm = new Vector3;
-        this._cameraScale = new Vector3;
-        this._parentPosition = new Vector3;
-        this._parentQuaternion = new Quaternion;
-        this._parentQuaternionInv = new Quaternion;
-        this._parentScale = new Vector3;
-        this._worldScaleStart = new Vector3;
-        this._worldQuaternionInv = new Quaternion;
-        this._worldScale = new Vector3;
-        this._positionStart = new Vector3;
-        this._quaternionStart = new Quaternion;
-        this._scaleStart = new Vector3;
-        this._getPointer = getPointer.bind(this);
-        this._onPointerDown = onPointerDown.bind(this);
-        this._onPointerHover = onPointerHover.bind(this);
-        this._onPointerMove = onPointerMove.bind(this);
-        this._onPointerUp = onPointerUp.bind(this);
-        this.domElement.addEventListener("pointerdown", this._onPointerDown);
-        this.domElement.addEventListener("pointermove", this._onPointerHover);
-        this.domElement.addEventListener("pointerup", this._onPointerUp);
-    }
-    updateMatrixWorld() {
-        if (this.object !== undefined) {
-            this.object.updateMatrixWorld();
-            if (this.object.parent === null) {
-                console.error("TransformControls: The attached 3D object must be a part of the scene graph.");
-            } else {
-                this.object.parent.matrixWorld.decompose(this._parentPosition, this._parentQuaternion, this._parentScale);
-            }
-            this.object.matrixWorld.decompose(this.worldPosition, this.worldQuaternion, this._worldScale);
-            this._parentQuaternionInv.copy(this._parentQuaternion).invert();
-            this._worldQuaternionInv.copy(this.worldQuaternion).invert();
-        }
-        this.camera.updateMatrixWorld();
-        this.camera.matrixWorld.decompose(this.cameraPosition, this.cameraQuaternion, this._cameraScale);
-        if (this.camera.isOrthographicCamera) {
-            this.camera.getWorldDirection(this.eye).negate();
-        } else {
-            this.eye.copy(this.cameraPosition).sub(this.worldPosition).normalize();
-        }
-        super.updateMatrixWorld(this);
-    }
-    pointerHover(pointer) {
-        if (this.object === undefined || this.dragging === true) return;
-        _raycaster.setFromCamera(pointer, this.camera);
-        const intersect = intersectObjectWithRay(this._gizmo.picker[this.mode], _raycaster);
-        if (intersect) {
-            this.axis = intersect.object.name;
-        } else {
-            this.axis = null;
-        }
-    }
-    pointerDown(pointer) {
-        if (this.object === undefined || this.dragging === true || pointer.button !== 0) return;
-        if (this.axis !== null) {
-            _raycaster.setFromCamera(pointer, this.camera);
-            const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true);
-            if (planeIntersect) {
-                this.object.updateMatrixWorld();
-                this.object.parent.updateMatrixWorld();
-                this._positionStart.copy(this.object.position);
-                this._quaternionStart.copy(this.object.quaternion);
-                this._scaleStart.copy(this.object.scale);
-                this.object.matrixWorld.decompose(this.worldPositionStart, this.worldQuaternionStart, this._worldScaleStart);
-                this.pointStart.copy(planeIntersect.point).sub(this.worldPositionStart);
-            }
-            this.dragging = true;
-            _mouseDownEvent.mode = this.mode;
-            this.dispatchEvent(_mouseDownEvent);
-        }
-    }
-    pointerMove(pointer) {
-        const axis = this.axis;
-        const mode = this.mode;
-        const object = this.object;
-        let space = this.space;
-        if (mode === "scale") {
-            space = "local";
-        } else if (axis === "E" || axis === "XYZE" || axis === "XYZ") {
-            space = "world";
-        }
-        if (object === undefined || axis === null || this.dragging === false || pointer.button !== -1) return;
-        _raycaster.setFromCamera(pointer, this.camera);
-        const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true);
-        if (!planeIntersect) return;
-        this.pointEnd.copy(planeIntersect.point).sub(this.worldPositionStart);
-        if (mode === "translate") {
-            this._offset.copy(this.pointEnd).sub(this.pointStart);
-            if (space === "local" && axis !== "XYZ") {
-                this._offset.applyQuaternion(this._worldQuaternionInv);
-            }
-            if (axis.indexOf("X") === -1) this._offset.x = 0;
-            if (axis.indexOf("Y") === -1) this._offset.y = 0;
-            if (axis.indexOf("Z") === -1) this._offset.z = 0;
-            if (space === "local" && axis !== "XYZ") {
-                this._offset.applyQuaternion(this._quaternionStart).divide(this._parentScale);
-            } else {
-                this._offset.applyQuaternion(this._parentQuaternionInv).divide(this._parentScale);
-            }
-            object.position.copy(this._offset).add(this._positionStart);
-            if (this.translationSnap) {
-                if (space === "local") {
-                    object.position.applyQuaternion(_tempQuaternion.copy(this._quaternionStart).invert());
-                    if (axis.search("X") !== -1) {
-                        object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
-                    }
-                    if (axis.search("Y") !== -1) {
-                        object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
-                    }
-                    if (axis.search("Z") !== -1) {
-                        object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
-                    }
-                    object.position.applyQuaternion(this._quaternionStart);
-                }
-                if (space === "world") {
-                    if (object.parent) {
-                        object.position.add(_tempVector.setFromMatrixPosition(object.parent.matrixWorld));
-                    }
-                    if (axis.search("X") !== -1) {
-                        object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
-                    }
-                    if (axis.search("Y") !== -1) {
-                        object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
-                    }
-                    if (axis.search("Z") !== -1) {
-                        object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
-                    }
-                    if (object.parent) {
-                        object.position.sub(_tempVector.setFromMatrixPosition(object.parent.matrixWorld));
-                    }
-                }
-            }
-        } else if (mode === "scale") {
-            if (axis.search("XYZ") !== -1) {
-                let d = this.pointEnd.length() / this.pointStart.length();
-                if (this.pointEnd.dot(this.pointStart) < 0) d *= -1;
-                _tempVector2.set(d, d, d);
-            } else {
-                _tempVector.copy(this.pointStart);
-                _tempVector2.copy(this.pointEnd);
-                _tempVector.applyQuaternion(this._worldQuaternionInv);
-                _tempVector2.applyQuaternion(this._worldQuaternionInv);
-                _tempVector2.divide(_tempVector);
-                if (axis.search("X") === -1) {
-                    _tempVector2.x = 1;
-                }
-                if (axis.search("Y") === -1) {
-                    _tempVector2.y = 1;
-                }
-                if (axis.search("Z") === -1) {
-                    _tempVector2.z = 1;
-                }
-            }
-            object.scale.copy(this._scaleStart).multiply(_tempVector2);
-            if (this.scaleSnap) {
-                if (axis.search("X") !== -1) {
-                    object.scale.x = Math.round(object.scale.x / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
-                }
-                if (axis.search("Y") !== -1) {
-                    object.scale.y = Math.round(object.scale.y / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
-                }
-                if (axis.search("Z") !== -1) {
-                    object.scale.z = Math.round(object.scale.z / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
-                }
-            }
-        } else if (mode === "rotate") {
-            this._offset.copy(this.pointEnd).sub(this.pointStart);
-            const ROTATION_SPEED = 20 / this.worldPosition.distanceTo(_tempVector.setFromMatrixPosition(this.camera.matrixWorld));
-            if (axis === "E") {
-                this.rotationAxis.copy(this.eye);
-                this.rotationAngle = this.pointEnd.angleTo(this.pointStart);
-                this._startNorm.copy(this.pointStart).normalize();
-                this._endNorm.copy(this.pointEnd).normalize();
-                this.rotationAngle *= this._endNorm.cross(this._startNorm).dot(this.eye) < 0 ? 1 : -1;
-            } else if (axis === "XYZE") {
-                this.rotationAxis.copy(this._offset).cross(this.eye).normalize();
-                this.rotationAngle = this._offset.dot(_tempVector.copy(this.rotationAxis).cross(this.eye)) * ROTATION_SPEED;
-            } else if (axis === "X" || axis === "Y" || axis === "Z") {
-                this.rotationAxis.copy(_unit[axis]);
-                _tempVector.copy(_unit[axis]);
-                if (space === "local") {
-                    _tempVector.applyQuaternion(this.worldQuaternion);
-                }
-                this.rotationAngle = this._offset.dot(_tempVector.cross(this.eye).normalize()) * ROTATION_SPEED;
-            }
-            if (this.rotationSnap) this.rotationAngle = Math.round(this.rotationAngle / this.rotationSnap) * this.rotationSnap;
-            if (space === "local" && axis !== "E" && axis !== "XYZE") {
-                object.quaternion.copy(this._quaternionStart);
-                object.quaternion.multiply(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle)).normalize();
-            } else {
-                this.rotationAxis.applyQuaternion(this._parentQuaternionInv);
-                object.quaternion.copy(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle));
-                object.quaternion.multiply(this._quaternionStart).normalize();
-            }
-        }
-        this.dispatchEvent(_changeEvent);
-        this.dispatchEvent(_objectChangeEvent);
-    }
-    pointerUp(pointer) {
-        if (pointer.button !== 0) return;
-        if (this.dragging && this.axis !== null) {
-            _mouseUpEvent.mode = this.mode;
-            this.dispatchEvent(_mouseUpEvent);
-        }
-        this.dragging = false;
-        this.axis = null;
-    }
-    dispose() {
-        this.domElement.removeEventListener("pointerdown", this._onPointerDown);
-        this.domElement.removeEventListener("pointermove", this._onPointerHover);
-        this.domElement.removeEventListener("pointermove", this._onPointerMove);
-        this.domElement.removeEventListener("pointerup", this._onPointerUp);
-        this.traverse((function(child) {
-            if (child.geometry) child.geometry.dispose();
-            if (child.material) child.material.dispose();
-        }));
-    }
-    attach(object) {
-        this.object = object;
-        this.visible = true;
-        return this;
-    }
-    detach() {
-        this.object = undefined;
-        this.visible = false;
-        this.axis = null;
-        return this;
-    }
-    reset() {
-        if (!this.enabled) return;
-        if (this.dragging) {
-            this.object.position.copy(this._positionStart);
-            this.object.quaternion.copy(this._quaternionStart);
-            this.object.scale.copy(this._scaleStart);
-            this.dispatchEvent(_changeEvent);
-            this.dispatchEvent(_objectChangeEvent);
-            this.pointStart.copy(this.pointEnd);
-        }
-    }
-    getRaycaster() {
-        return _raycaster;
-    }
-    getMode() {
-        return this.mode;
-    }
-    setMode(mode) {
-        this.mode = mode;
-    }
-    setTranslationSnap(translationSnap) {
-        this.translationSnap = translationSnap;
-    }
-    setRotationSnap(rotationSnap) {
-        this.rotationSnap = rotationSnap;
-    }
-    setScaleSnap(scaleSnap) {
-        this.scaleSnap = scaleSnap;
-    }
-    setSize(size) {
-        this.size = size;
-    }
-    setSpace(space) {
-        this.space = space;
-    }
-}
-
-function getPointer(event) {
-    if (this.domElement.ownerDocument.pointerLockElement) {
-        return {
-            x: 0,
-            y: 0,
-            button: event.button
-        };
-    } else {
-        const rect = this.domElement.getBoundingClientRect();
-        return {
-            x: (event.clientX - rect.left) / rect.width * 2 - 1,
-            y: -(event.clientY - rect.top) / rect.height * 2 + 1,
-            button: event.button
-        };
-    }
-}
-
-function onPointerHover(event) {
-    if (!this.enabled) return;
-    switch (event.pointerType) {
-      case "mouse":
-      case "pen":
-        this.pointerHover(this._getPointer(event));
-        break;
-    }
-}
-
-function onPointerDown(event) {
-    if (!this.enabled) return;
-    if (!document.pointerLockElement) {
-        this.domElement.setPointerCapture(event.pointerId);
-    }
-    this.domElement.addEventListener("pointermove", this._onPointerMove);
-    this.pointerHover(this._getPointer(event));
-    this.pointerDown(this._getPointer(event));
-}
-
-function onPointerMove(event) {
-    if (!this.enabled) return;
-    this.pointerMove(this._getPointer(event));
-}
-
-function onPointerUp(event) {
-    if (!this.enabled) return;
-    this.domElement.releasePointerCapture(event.pointerId);
-    this.domElement.removeEventListener("pointermove", this._onPointerMove);
-    this.pointerUp(this._getPointer(event));
-}
-
-function intersectObjectWithRay(object, raycaster, includeInvisible) {
-    const allIntersections = raycaster.intersectObject(object, true);
-    for (let i = 0; i < allIntersections.length; i++) {
-        if (allIntersections[i].object.visible || includeInvisible) {
-            return allIntersections[i];
-        }
-    }
-    return false;
-}
-
-const _tempEuler = new Euler;
-
-const _alignVector = new Vector3(0, 1, 0);
-
-const _zeroVector = new Vector3(0, 0, 0);
-
-const _lookAtMatrix = new Matrix4;
-
-const _tempQuaternion2 = new Quaternion;
-
-const _identityQuaternion = new Quaternion;
-
-const _dirVector = new Vector3;
-
-const _tempMatrix = new Matrix4;
-
-const _unitX = new Vector3(1, 0, 0);
-
-const _unitY = new Vector3(0, 1, 0);
-
-const _unitZ = new Vector3(0, 0, 1);
-
-const _v1 = new Vector3;
-
-const _v2 = new Vector3;
-
-const _v3 = new Vector3;
-
-class TransformControlsGizmo extends Object3D {
-    constructor() {
-        super();
-        this.isTransformControlsGizmo = true;
-        this.type = "TransformControlsGizmo";
-        const gizmoMaterial = new MeshBasicMaterial({
-            depthTest: false,
-            depthWrite: false,
-            fog: false,
-            toneMapped: false,
-            transparent: true
-        });
-        const gizmoLineMaterial = new LineBasicMaterial({
-            depthTest: false,
-            depthWrite: false,
-            fog: false,
-            toneMapped: false,
-            transparent: true
-        });
-        const matInvisible = gizmoMaterial.clone();
-        matInvisible.opacity = .15;
-        const matHelper = gizmoLineMaterial.clone();
-        matHelper.opacity = .5;
-        const matRed = gizmoMaterial.clone();
-        matRed.color.setHex(16711680);
-        const matGreen = gizmoMaterial.clone();
-        matGreen.color.setHex(65280);
-        const matBlue = gizmoMaterial.clone();
-        matBlue.color.setHex(255);
-        const matRedTransparent = gizmoMaterial.clone();
-        matRedTransparent.color.setHex(16711680);
-        matRedTransparent.opacity = .5;
-        const matGreenTransparent = gizmoMaterial.clone();
-        matGreenTransparent.color.setHex(65280);
-        matGreenTransparent.opacity = .5;
-        const matBlueTransparent = gizmoMaterial.clone();
-        matBlueTransparent.color.setHex(255);
-        matBlueTransparent.opacity = .5;
-        const matWhiteTransparent = gizmoMaterial.clone();
-        matWhiteTransparent.opacity = .25;
-        const matYellowTransparent = gizmoMaterial.clone();
-        matYellowTransparent.color.setHex(16776960);
-        matYellowTransparent.opacity = .25;
-        const matYellow = gizmoMaterial.clone();
-        matYellow.color.setHex(16776960);
-        const matGray = gizmoMaterial.clone();
-        matGray.color.setHex(7895160);
-        const arrowGeometry = new CylinderGeometry(0, .04, .1, 12);
-        arrowGeometry.translate(0, .05, 0);
-        const scaleHandleGeometry = new BoxGeometry(.08, .08, .08);
-        scaleHandleGeometry.translate(0, .04, 0);
-        const lineGeometry = new BufferGeometry;
-        lineGeometry.setAttribute("position", new Float32BufferAttribute([ 0, 0, 0, 1, 0, 0 ], 3));
-        const lineGeometry2 = new CylinderGeometry(.0075, .0075, .5, 3);
-        lineGeometry2.translate(0, .25, 0);
-        function CircleGeometry(radius, arc) {
-            const geometry = new TorusGeometry(radius, .0075, 3, 64, arc * Math.PI * 2);
-            geometry.rotateY(Math.PI / 2);
-            geometry.rotateX(Math.PI / 2);
-            return geometry;
-        }
-        function TranslateHelperGeometry() {
-            const geometry = new BufferGeometry;
-            geometry.setAttribute("position", new Float32BufferAttribute([ 0, 0, 0, 1, 1, 1 ], 3));
-            return geometry;
-        }
-        const gizmoTranslate = {
-            X: [ [ new Mesh(arrowGeometry, matRed), [ .5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(arrowGeometry, matRed), [ -.5, 0, 0 ], [ 0, 0, Math.PI / 2 ] ], [ new Mesh(lineGeometry2, matRed), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ],
-            Y: [ [ new Mesh(arrowGeometry, matGreen), [ 0, .5, 0 ] ], [ new Mesh(arrowGeometry, matGreen), [ 0, -.5, 0 ], [ Math.PI, 0, 0 ] ], [ new Mesh(lineGeometry2, matGreen) ] ],
-            Z: [ [ new Mesh(arrowGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(arrowGeometry, matBlue), [ 0, 0, -.5 ], [ -Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry2, matBlue), null, [ Math.PI / 2, 0, 0 ] ] ],
-            XYZ: [ [ new Mesh(new OctahedronGeometry(.1, 0), matWhiteTransparent.clone()), [ 0, 0, 0 ] ] ],
-            XY: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matBlueTransparent.clone()), [ .15, .15, 0 ] ] ],
-            YZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matRedTransparent.clone()), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
-            XZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matGreenTransparent.clone()), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ]
-        };
-        const pickerTranslate = {
-            X: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ .3, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ -.3, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
-            Y: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, .3, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, -.3, 0 ], [ 0, 0, Math.PI ] ] ],
-            Z: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, .3 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, -.3 ], [ -Math.PI / 2, 0, 0 ] ] ],
-            XYZ: [ [ new Mesh(new OctahedronGeometry(.2, 0), matInvisible) ] ],
-            XY: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, .15, 0 ] ] ],
-            YZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
-            XZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ]
-        };
-        const helperTranslate = {
-            START: [ [ new Mesh(new OctahedronGeometry(.01, 2), matHelper), null, null, null, "helper" ] ],
-            END: [ [ new Mesh(new OctahedronGeometry(.01, 2), matHelper), null, null, null, "helper" ] ],
-            DELTA: [ [ new Line(TranslateHelperGeometry(), matHelper), null, null, null, "helper" ] ],
-            X: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ],
-            Y: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, -1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], "helper" ] ],
-            Z: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, 0, -1e3 ], [ 0, -Math.PI / 2, 0 ], [ 1e6, 1, 1 ], "helper" ] ]
-        };
-        const gizmoRotate = {
-            XYZE: [ [ new Mesh(CircleGeometry(.5, 1), matGray), null, [ 0, Math.PI / 2, 0 ] ] ],
-            X: [ [ new Mesh(CircleGeometry(.5, .5), matRed) ] ],
-            Y: [ [ new Mesh(CircleGeometry(.5, .5), matGreen), null, [ 0, 0, -Math.PI / 2 ] ] ],
-            Z: [ [ new Mesh(CircleGeometry(.5, .5), matBlue), null, [ 0, Math.PI / 2, 0 ] ] ],
-            E: [ [ new Mesh(CircleGeometry(.75, 1), matYellowTransparent), null, [ 0, Math.PI / 2, 0 ] ] ]
-        };
-        const helperRotate = {
-            AXIS: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ]
-        };
-        const pickerRotate = {
-            XYZE: [ [ new Mesh(new SphereGeometry(.25, 10, 8), matInvisible) ] ],
-            X: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ 0, -Math.PI / 2, -Math.PI / 2 ] ] ],
-            Y: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ] ],
-            Z: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ],
-            E: [ [ new Mesh(new TorusGeometry(.75, .1, 2, 24), matInvisible) ] ]
-        };
-        const gizmoScale = {
-            X: [ [ new Mesh(scaleHandleGeometry, matRed), [ .5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(lineGeometry2, matRed), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(scaleHandleGeometry, matRed), [ -.5, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
-            Y: [ [ new Mesh(scaleHandleGeometry, matGreen), [ 0, .5, 0 ] ], [ new Mesh(lineGeometry2, matGreen) ], [ new Mesh(scaleHandleGeometry, matGreen), [ 0, -.5, 0 ], [ 0, 0, Math.PI ] ] ],
-            Z: [ [ new Mesh(scaleHandleGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry2, matBlue), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(scaleHandleGeometry, matBlue), [ 0, 0, -.5 ], [ -Math.PI / 2, 0, 0 ] ] ],
-            XY: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matBlueTransparent), [ .15, .15, 0 ] ] ],
-            YZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matRedTransparent), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
-            XZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matGreenTransparent), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ],
-            XYZ: [ [ new Mesh(new BoxGeometry(.1, .1, .1), matWhiteTransparent.clone()) ] ]
-        };
-        const pickerScale = {
-            X: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ .3, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ -.3, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
-            Y: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, .3, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, -.3, 0 ], [ 0, 0, Math.PI ] ] ],
-            Z: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, .3 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, -.3 ], [ -Math.PI / 2, 0, 0 ] ] ],
-            XY: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, .15, 0 ] ] ],
-            YZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
-            XZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ],
-            XYZ: [ [ new Mesh(new BoxGeometry(.2, .2, .2), matInvisible), [ 0, 0, 0 ] ] ]
-        };
-        const helperScale = {
-            X: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ],
-            Y: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, -1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], "helper" ] ],
-            Z: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, 0, -1e3 ], [ 0, -Math.PI / 2, 0 ], [ 1e6, 1, 1 ], "helper" ] ]
-        };
-        function setupGizmo(gizmoMap) {
-            const gizmo = new Object3D;
-            for (const name in gizmoMap) {
-                for (let i = gizmoMap[name].length; i--; ) {
-                    const object = gizmoMap[name][i][0].clone();
-                    const position = gizmoMap[name][i][1];
-                    const rotation = gizmoMap[name][i][2];
-                    const scale = gizmoMap[name][i][3];
-                    const tag = gizmoMap[name][i][4];
-                    object.name = name;
-                    object.tag = tag;
-                    if (position) {
-                        object.position.set(position[0], position[1], position[2]);
-                    }
-                    if (rotation) {
-                        object.rotation.set(rotation[0], rotation[1], rotation[2]);
-                    }
-                    if (scale) {
-                        object.scale.set(scale[0], scale[1], scale[2]);
-                    }
-                    object.updateMatrix();
-                    const tempGeometry = object.geometry.clone();
-                    tempGeometry.applyMatrix4(object.matrix);
-                    object.geometry = tempGeometry;
-                    object.renderOrder = Infinity;
-                    object.position.set(0, 0, 0);
-                    object.rotation.set(0, 0, 0);
-                    object.scale.set(1, 1, 1);
-                    gizmo.add(object);
-                }
-            }
-            return gizmo;
-        }
-        this.gizmo = {};
-        this.picker = {};
-        this.helper = {};
-        this.add(this.gizmo["translate"] = setupGizmo(gizmoTranslate));
-        this.add(this.gizmo["rotate"] = setupGizmo(gizmoRotate));
-        this.add(this.gizmo["scale"] = setupGizmo(gizmoScale));
-        this.add(this.picker["translate"] = setupGizmo(pickerTranslate));
-        this.add(this.picker["rotate"] = setupGizmo(pickerRotate));
-        this.add(this.picker["scale"] = setupGizmo(pickerScale));
-        this.add(this.helper["translate"] = setupGizmo(helperTranslate));
-        this.add(this.helper["rotate"] = setupGizmo(helperRotate));
-        this.add(this.helper["scale"] = setupGizmo(helperScale));
-        this.picker["translate"].visible = false;
-        this.picker["rotate"].visible = false;
-        this.picker["scale"].visible = false;
-    }
-    updateMatrixWorld(force) {
-        const space = this.mode === "scale" ? "local" : this.space;
-        const quaternion = space === "local" ? this.worldQuaternion : _identityQuaternion;
-        this.gizmo["translate"].visible = this.mode === "translate";
-        this.gizmo["rotate"].visible = this.mode === "rotate";
-        this.gizmo["scale"].visible = this.mode === "scale";
-        this.helper["translate"].visible = this.mode === "translate";
-        this.helper["rotate"].visible = this.mode === "rotate";
-        this.helper["scale"].visible = this.mode === "scale";
-        let handles = [];
-        handles = handles.concat(this.picker[this.mode].children);
-        handles = handles.concat(this.gizmo[this.mode].children);
-        handles = handles.concat(this.helper[this.mode].children);
-        for (let i = 0; i < handles.length; i++) {
-            const handle = handles[i];
-            handle.visible = true;
-            handle.rotation.set(0, 0, 0);
-            handle.position.copy(this.worldPosition);
-            let factor;
-            if (this.camera.isOrthographicCamera) {
-                factor = (this.camera.top - this.camera.bottom) / this.camera.zoom;
-            } else {
-                factor = this.worldPosition.distanceTo(this.cameraPosition) * Math.min(1.9 * Math.tan(Math.PI * this.camera.fov / 360) / this.camera.zoom, 7);
-            }
-            handle.scale.set(1, 1, 1).multiplyScalar(factor * this.size / 4);
-            if (handle.tag === "helper") {
-                handle.visible = false;
-                if (handle.name === "AXIS") {
-                    handle.visible = !!this.axis;
-                    if (this.axis === "X") {
-                        _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, 0));
-                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
-                        if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > .9) {
-                            handle.visible = false;
-                        }
-                    }
-                    if (this.axis === "Y") {
-                        _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, Math.PI / 2));
-                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
-                        if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > .9) {
-                            handle.visible = false;
-                        }
-                    }
-                    if (this.axis === "Z") {
-                        _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
-                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
-                        if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > .9) {
-                            handle.visible = false;
-                        }
-                    }
-                    if (this.axis === "XYZE") {
-                        _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
-                        _alignVector.copy(this.rotationAxis);
-                        handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(_zeroVector, _alignVector, _unitY));
-                        handle.quaternion.multiply(_tempQuaternion);
-                        handle.visible = this.dragging;
-                    }
-                    if (this.axis === "E") {
-                        handle.visible = false;
-                    }
-                } else if (handle.name === "START") {
-                    handle.position.copy(this.worldPositionStart);
-                    handle.visible = this.dragging;
-                } else if (handle.name === "END") {
-                    handle.position.copy(this.worldPosition);
-                    handle.visible = this.dragging;
-                } else if (handle.name === "DELTA") {
-                    handle.position.copy(this.worldPositionStart);
-                    handle.quaternion.copy(this.worldQuaternionStart);
-                    _tempVector.set(1e-10, 1e-10, 1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1);
-                    _tempVector.applyQuaternion(this.worldQuaternionStart.clone().invert());
-                    handle.scale.copy(_tempVector);
-                    handle.visible = this.dragging;
-                } else {
-                    handle.quaternion.copy(quaternion);
-                    if (this.dragging) {
-                        handle.position.copy(this.worldPositionStart);
-                    } else {
-                        handle.position.copy(this.worldPosition);
-                    }
-                    if (this.axis) {
-                        handle.visible = this.axis.search(handle.name) !== -1;
-                    }
-                }
-                continue;
-            }
-            handle.quaternion.copy(quaternion);
-            if (this.mode === "translate" || this.mode === "scale") {
-                const AXIS_HIDE_THRESHOLD = .99;
-                const PLANE_HIDE_THRESHOLD = .2;
-                if (handle.name === "X") {
-                    if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-                if (handle.name === "Y") {
-                    if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-                if (handle.name === "Z") {
-                    if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-                if (handle.name === "XY") {
-                    if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-                if (handle.name === "YZ") {
-                    if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-                if (handle.name === "XZ") {
-                    if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
-                        handle.scale.set(1e-10, 1e-10, 1e-10);
-                        handle.visible = false;
-                    }
-                }
-            } else if (this.mode === "rotate") {
-                _tempQuaternion2.copy(quaternion);
-                _alignVector.copy(this.eye).applyQuaternion(_tempQuaternion.copy(quaternion).invert());
-                if (handle.name.search("E") !== -1) {
-                    handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(this.eye, _zeroVector, _unitY));
-                }
-                if (handle.name === "X") {
-                    _tempQuaternion.setFromAxisAngle(_unitX, Math.atan2(-_alignVector.y, _alignVector.z));
-                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
-                    handle.quaternion.copy(_tempQuaternion);
-                }
-                if (handle.name === "Y") {
-                    _tempQuaternion.setFromAxisAngle(_unitY, Math.atan2(_alignVector.x, _alignVector.z));
-                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
-                    handle.quaternion.copy(_tempQuaternion);
-                }
-                if (handle.name === "Z") {
-                    _tempQuaternion.setFromAxisAngle(_unitZ, Math.atan2(_alignVector.y, _alignVector.x));
-                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
-                    handle.quaternion.copy(_tempQuaternion);
-                }
-            }
-            handle.visible = handle.visible && (handle.name.indexOf("X") === -1 || this.showX);
-            handle.visible = handle.visible && (handle.name.indexOf("Y") === -1 || this.showY);
-            handle.visible = handle.visible && (handle.name.indexOf("Z") === -1 || this.showZ);
-            handle.visible = handle.visible && (handle.name.indexOf("E") === -1 || this.showX && this.showY && this.showZ);
-            handle.material._color = handle.material._color || handle.material.color.clone();
-            handle.material._opacity = handle.material._opacity || handle.material.opacity;
-            handle.material.color.copy(handle.material._color);
-            handle.material.opacity = handle.material._opacity;
-            if (this.enabled && this.axis) {
-                if (handle.name === this.axis) {
-                    handle.material.color.setHex(16776960);
-                    handle.material.opacity = 1;
-                } else if (this.axis.split("").some((function(a) {
-                    return handle.name === a;
-                }))) {
-                    handle.material.color.setHex(16776960);
-                    handle.material.opacity = 1;
-                }
-            }
-        }
-        super.updateMatrixWorld(force);
-    }
-}
-
-class TransformControlsPlane extends Mesh {
-    constructor() {
-        super(new PlaneGeometry(1e5, 1e5, 2, 2), new MeshBasicMaterial({
-            visible: false,
-            wireframe: true,
-            side: DoubleSide,
-            transparent: true,
-            opacity: .1,
-            toneMapped: false
-        }));
-        this.isTransformControlsPlane = true;
-        this.type = "TransformControlsPlane";
-    }
-    updateMatrixWorld(force) {
-        let space = this.space;
-        this.position.copy(this.worldPosition);
-        if (this.mode === "scale") space = "local";
-        _v1.copy(_unitX).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
-        _v2.copy(_unitY).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
-        _v3.copy(_unitZ).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
-        _alignVector.copy(_v2);
-        switch (this.mode) {
-          case "translate":
-          case "scale":
-            switch (this.axis) {
-              case "X":
-                _alignVector.copy(this.eye).cross(_v1);
-                _dirVector.copy(_v1).cross(_alignVector);
-                break;
-
-              case "Y":
-                _alignVector.copy(this.eye).cross(_v2);
-                _dirVector.copy(_v2).cross(_alignVector);
-                break;
-
-              case "Z":
-                _alignVector.copy(this.eye).cross(_v3);
-                _dirVector.copy(_v3).cross(_alignVector);
-                break;
-
-              case "XY":
-                _dirVector.copy(_v3);
-                break;
-
-              case "YZ":
-                _dirVector.copy(_v1);
-                break;
-
-              case "XZ":
-                _alignVector.copy(_v3);
-                _dirVector.copy(_v2);
-                break;
-
-              case "XYZ":
-              case "E":
-                _dirVector.set(0, 0, 0);
-                break;
-            }
-            break;
-
-          case "rotate":
-          default:
-            _dirVector.set(0, 0, 0);
-        }
-        if (_dirVector.length() === 0) {
-            this.quaternion.copy(this.cameraQuaternion);
-        } else {
-            _tempMatrix.lookAt(_tempVector.set(0, 0, 0), _dirVector, _alignVector);
-            this.quaternion.setFromRotationMatrix(_tempMatrix);
-        }
-        super.updateMatrixWorld(force);
-    }
-}
-
 class PlaneHelper extends Line {
     constructor(plane, size = 1, color = 16776960, offset = new Vector3) {
         const positions = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0 ];
@@ -4694,7 +3801,7 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.transform.attach(this.planeCenter);
         this.transform.addEventListener("change", this.transformChange);
         this.transform.addEventListener("dragging-changed", this.transformDrag);
-        this.viewer.helpers.add(this.transform);
+        this.viewer.helpers.add(this.transform.getHelper());
         this.viewer.on("explode", this.viewerExplode);
         this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
         this.viewer.update();
@@ -4704,7 +3811,8 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
         this.transform.removeEventListener("change", this.transformChange);
         this.transform.removeEventListener("dragging-changed", this.transformDrag);
-        this.transform.removeFromParent();
+        this.transform.getHelper().removeFromParent();
+        this.transform.detach();
         this.transform.dispose();
         this.planeHelper.removeFromParent();
         this.planeHelper.dispose();
@@ -4731,13 +3839,362 @@ class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
     }
 }
 
+const PRECISION = .01;
+
+class MeasureLineDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.onPointerDown = event => {
+            if (event.button !== 0) return;
+            this.line.startPoint = this.snapper.getSnapPoint(event);
+            this.line.render();
+            this.viewer.canvas.setPointerCapture(event.pointerId);
+            this.orbit.enabled = !this.line.startPoint;
+        };
+        this.onPointerMove = event => {
+            if (this.orbit.enabled && this.orbit.state !== -1) return;
+            this.line.endPoint = this.snapper.getSnapPoint(event);
+            this.line.render();
+            if (this.line.startPoint) this.changed = true;
+        };
+        this.onPointerUp = event => {
+            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
+                this.line = new MeasureLine(this.overlay);
+                this.overlay.addLine(this.line);
+            } else {
+                this.line.startPoint = undefined;
+                this.line.endPoint = undefined;
+                this.line.render();
+            }
+            this.viewer.canvas.releasePointerCapture(event.pointerId);
+            this.orbit.enabled = true;
+        };
+        this.onPointerCancel = event => {
+            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onPointerLeave = () => {
+            this.line.endPoint = undefined;
+            this.line.render();
+        };
+        this.renderOverlay = () => {
+            this.overlay.render();
+        };
+        this.updateSnapper = () => {
+            this.snapper.update(this.viewer.scene);
+        };
+        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
+        this.overlay.attach();
+        this.line = new MeasureLine(this.overlay);
+        this.overlay.addLine(this.line);
+        this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
+        this.snapper.update(viewer.scene);
+        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.addEventListener("render", this.renderOverlay);
+        this.viewer.addEventListener("hide", this.updateSnapper);
+        this.viewer.addEventListener("isolate", this.updateSnapper);
+        this.viewer.addEventListener("showall", this.updateSnapper);
+    }
+    dispose() {
+        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.removeEventListener("render", this.renderOverlay);
+        this.viewer.removeEventListener("hide", this.updateSnapper);
+        this.viewer.removeEventListener("isolate", this.updateSnapper);
+        this.viewer.removeEventListener("showall", this.updateSnapper);
+        this.overlay.detach();
+        this.overlay.dispose();
+        super.dispose();
+    }
+}
+
+class MeasureSnapper {
+    constructor(camera, canvas) {
+        this.objects = [];
+        this.camera = camera;
+        this.canvas = canvas;
+        this.raycaster = new Raycaster;
+    }
+    getSnapPoint(event) {
+        const mouse = new Vector2(event.clientX, event.clientY);
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (mouse.x - rect.left) / rect.width * 2 - 1;
+        const y = -(mouse.y - rect.top) / rect.height * 2 + 1;
+        const coords = new Vector2(x, y);
+        this.raycaster.setFromCamera(coords, this.camera);
+        this.raycaster.params = {
+            Mesh: {},
+            Line: {
+                threshold: .25
+            },
+            Line2: {
+                threshold: .25
+            },
+            LOD: {},
+            Points: {
+                threshold: .1
+            },
+            Sprite: {}
+        };
+        const intersects = this.raycaster.intersectObjects(this.objects, false);
+        if (intersects.length === 0) return undefined;
+        return intersects[0].point;
+    }
+    update(scene) {
+        this.objects = [];
+        scene.traverseVisible((child => this.objects.push(child)));
+    }
+}
+
+class MeasureOverlay {
+    constructor(camera, canvas) {
+        this.lines = [];
+        this.camera = camera;
+        this.canvas = canvas;
+        this.projector = new MeasureProjector(camera, canvas);
+    }
+    attach() {
+        this.container = document.createElement("div");
+        this.container.id = "measure-container";
+        this.container.style.background = "rgba(0,0,0,0)";
+        this.container.style.position = "absolute";
+        this.container.style.top = "0px";
+        this.container.style.left = "0px";
+        this.container.style.width = "100%";
+        this.container.style.height = "100%";
+        this.container.style.outline = "none";
+        this.container.style.pointerEvents = "none";
+        this.container.style.overflow = "hidden";
+        this.canvas.parentElement.appendChild(this.container);
+    }
+    dispose() {
+        this.clear();
+    }
+    detach() {
+        this.container.remove();
+        this.container = undefined;
+    }
+    clear() {
+        this.lines.forEach((line => line.dispose()));
+        this.lines = [];
+    }
+    render() {
+        this.projector.updateProjectionMatrix();
+        this.lines.forEach((line => line.render()));
+    }
+    update() {
+        this.lines.forEach((line => line.update()));
+    }
+    addLine(line) {
+        this.lines.push(line);
+    }
+    removeLine(line) {
+        this.lines = this.lines.filter((x => x !== line));
+    }
+}
+
+const _middlePoint = new Vector3;
+
+class MeasureLine {
+    constructor(overlay) {
+        this.id = Date.now();
+        this.unit = "";
+        this.scale = 1;
+        this.size = 10;
+        this.lineWidth = 2;
+        this.style = {
+            border: "2px solid #FFFFFF",
+            background: "#009bff",
+            boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+            color: "white",
+            font: "1rem system-ui"
+        };
+        this.overlay = overlay;
+        this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
+        this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
+        this.elementLine = overlay.container.appendChild(document.createElement("div"));
+        this.elementLabel = overlay.container.appendChild(document.createElement("div"));
+        this.update();
+    }
+    dispose() {
+        this.elementStartPoint.remove();
+        this.elementEndPoint.remove();
+        this.elementLine.remove();
+        this.elementLabel.remove();
+    }
+    render() {
+        const projector = this.overlay.projector;
+        if (this.startPoint) {
+            const {point: point, visible: visible} = projector.projectPoint(this.startPoint);
+            this.elementStartPoint.style.display = visible ? "block" : "none";
+            this.elementStartPoint.style.left = `${point.x}px`;
+            this.elementStartPoint.style.top = `${point.y}px`;
+        } else {
+            this.elementStartPoint.style.display = "none";
+        }
+        if (this.endPoint) {
+            const {point: point, visible: visible} = projector.projectPoint(this.endPoint);
+            this.elementEndPoint.style.display = visible ? "block" : "none";
+            this.elementEndPoint.style.left = `${point.x}px`;
+            this.elementEndPoint.style.top = `${point.y}px`;
+        } else {
+            this.elementEndPoint.style.display = "none";
+        }
+        if (this.startPoint && this.endPoint) {
+            const {point1: point1, point2: point2, visible: visible} = projector.projectLine(this.startPoint, this.endPoint);
+            point2.sub(point1);
+            const angle = point2.angle();
+            const width = point2.length();
+            this.elementLine.style.display = visible ? "block" : "none";
+            this.elementLine.style.left = `${point1.x}px`;
+            this.elementLine.style.top = `${point1.y}px`;
+            this.elementLine.style.width = `${width}px`;
+            this.elementLine.style.transform = `translate(0px, ${-this.lineWidth / 2}px) rotate(${angle}rad)`;
+        } else {
+            this.elementLine.style.display = "none";
+        }
+        if (this.startPoint && this.endPoint) {
+            _middlePoint.lerpVectors(this.startPoint, this.endPoint, .5);
+            const {point: point, visible: visible} = projector.projectPoint(_middlePoint);
+            const distance = this.getDistance();
+            this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
+            this.elementLabel.style.left = `${point.x}px`;
+            this.elementLabel.style.top = `${point.y}px`;
+            this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
+        } else {
+            this.elementLabel.style.display = "none";
+        }
+    }
+    update() {
+        this.elementStartPoint.id = `markup-dot-start-${this.id}`;
+        this.elementStartPoint.style.position = "absolute";
+        this.elementStartPoint.style.zIndex = "2";
+        this.elementStartPoint.style.width = `${this.size}px`;
+        this.elementStartPoint.style.height = `${this.size}px`;
+        this.elementStartPoint.style.border = this.style.border;
+        this.elementStartPoint.style.borderRadius = `${this.size}px`;
+        this.elementStartPoint.style.background = this.style.background;
+        this.elementStartPoint.style.boxShadow = this.style.boxShadow;
+        this.elementStartPoint.style.transform = "translate(-50%, -50%)";
+        this.elementEndPoint.id = `markup-dot-end-${this.id}`;
+        this.elementEndPoint.style.position = "absolute";
+        this.elementEndPoint.style.zIndex = "2";
+        this.elementEndPoint.style.width = `${this.size}px`;
+        this.elementEndPoint.style.height = `${this.size}px`;
+        this.elementEndPoint.style.border = this.style.border;
+        this.elementEndPoint.style.borderRadius = `${this.size}px`;
+        this.elementEndPoint.style.background = this.style.background;
+        this.elementEndPoint.style.boxShadow = this.style.boxShadow;
+        this.elementEndPoint.style.transform = "translate(-50%, -50%)";
+        this.elementLine.id = `markup-line-${this.id}`;
+        this.elementLine.style.position = "absolute";
+        this.elementLine.style.zIndex = "1";
+        this.elementLine.style.height = `${this.lineWidth}px`;
+        this.elementLine.style.background = this.style.background;
+        this.elementLine.style.boxShadow = this.style.boxShadow;
+        this.elementLine.style.transformOrigin = `0px ${this.lineWidth / 2}px`;
+        this.elementLabel.id = `markup-label-${this.id}`;
+        this.elementLabel.style.position = "absolute";
+        this.elementLabel.style.zIndex = "3";
+        this.elementLabel.style.padding = "2px";
+        this.elementLabel.style.paddingInline = "5px";
+        this.elementLabel.style.borderRadius = "5px";
+        this.elementLabel.style.background = this.style.background;
+        this.elementLabel.style.boxShadow = this.style.boxShadow;
+        this.elementLabel.style.color = this.style.color;
+        this.elementLabel.style.font = this.style.font;
+        this.elementLabel.style.transform = "translate(-50%, -50%)";
+    }
+    getDistance() {
+        return this.startPoint.distanceTo(this.endPoint) / this.scale;
+    }
+}
+
+let _widthHalf;
+
+let _heightHalf;
+
+const _viewMatrix = new Matrix4;
+
+const _viewProjectionMatrix = new Matrix4;
+
+const _vector = new Vector3;
+
+const _vector1 = new Vector4;
+
+const _vector2 = new Vector4;
+
+const point = new Vector2;
+
+const point1 = new Vector2;
+
+const point2 = new Vector2;
+
+class MeasureProjector {
+    constructor(camera, canvas) {
+        this.camera = camera;
+        this.canvas = canvas;
+    }
+    updateProjectionMatrix() {
+        const rect = this.canvas.getBoundingClientRect();
+        _widthHalf = rect.width / 2;
+        _heightHalf = rect.height / 2;
+        _viewMatrix.copy(this.camera.matrixWorldInverse);
+        _viewProjectionMatrix.multiplyMatrices(this.camera.projectionMatrix, _viewMatrix);
+    }
+    projectPoint(p) {
+        _vector.copy(p).applyMatrix4(_viewProjectionMatrix);
+        const visible = _vector.z >= -1 && _vector.z <= 1;
+        point.x = (_vector.x + 1) * _widthHalf;
+        point.y = (-_vector.y + 1) * _heightHalf;
+        return {
+            point: point,
+            visible: visible
+        };
+    }
+    projectLine(p1, p2) {
+        let visible;
+        _vector1.copy(p1).applyMatrix4(_viewProjectionMatrix);
+        _vector2.copy(p2).applyMatrix4(_viewProjectionMatrix);
+        const bc1near = _vector1.z + _vector1.w;
+        const bc2near = _vector2.z + _vector2.w;
+        const bc1far = -_vector1.z + _vector1.w;
+        const bc2far = -_vector2.z + _vector2.w;
+        if (bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0) visible = true; else if (bc1near < 0 && bc2near < 0 || bc1far < 0 && bc2far < 0) visible = false; else {
+            let alpha1 = 0;
+            let alpha2 = 1;
+            if (bc1near < 0) alpha1 = Math.max(alpha1, bc1near / (bc1near - bc2near)); else if (bc2near < 0) alpha2 = Math.min(alpha2, bc1near / (bc1near - bc2near));
+            if (bc1far < 0) alpha1 = Math.max(alpha1, bc1far / (bc1far - bc2far)); else if (bc2far < 0) alpha2 = Math.min(alpha2, bc1far / (bc1far - bc2far));
+            visible = alpha2 >= alpha1;
+            if (visible) {
+                _vector1.lerp(_vector2, alpha1);
+                _vector2.lerp(_vector1, 1 - alpha2);
+            }
+        }
+        _vector1.multiplyScalar(1 / _vector1.w);
+        _vector2.multiplyScalar(1 / _vector2.w);
+        point1.x = (_vector1.x + 1) * _widthHalf;
+        point1.y = (-_vector1.y + 1) * _heightHalf;
+        point2.x = (_vector2.x + 1) * _widthHalf;
+        point2.y = (-_vector2.y + 1) * _heightHalf;
+        return {
+            point1: point1,
+            point2: point2,
+            visible: visible
+        };
+    }
+}
+
 class ExtentsComponent {
     constructor(viewer) {
         this.syncExtents = () => {
-            const extents = this.viewer.models.reduce(((result, gltf) => {
-                const modelExtents = (new Box3).setFromObject(gltf.scene);
-                return result.isEmpty() ? result.copy(modelExtents) : result.union(modelExtents);
-            }), new Box3);
+            const extents = this.viewer.models.reduce(((result, gltf) => result.expandByObject(gltf.scene)), new Box3);
             this.viewer.extents.copy(extents);
             this.viewer.target.copy(extents.getCenter(new Vector3));
         };
@@ -4934,7 +4391,9 @@ class WCSHelper extends Object3D {
 class WCSHelperComponent {
     constructor(viewer) {
         this.viewerRender = () => {
-            if (!this.viewer.extents.isEmpty()) this.wcsHelper.render(this.viewer.renderer);
+            if (!this.viewer.options.showWCS) return;
+            if (this.viewer.extents.isEmpty()) return;
+            this.wcsHelper.render(this.viewer.renderer);
         };
         this.wcsHelper = new WCSHelper(viewer.camera);
         this.viewer = viewer;
@@ -4962,7 +4421,8 @@ class Viewer extends EventEmitter2 {
             Walk: WalkDragger,
             CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
             CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
-            CuttingPlaneZAxis: CuttingPlaneZAxisDragger
+            CuttingPlaneZAxis: CuttingPlaneZAxisDragger,
+            MeasureLine: MeasureLineDragger
         };
         this._activeDragger = null;
         this.models = [];
@@ -5186,6 +4646,7 @@ class Viewer extends EventEmitter2 {
         this.setActiveDragger();
         this.clearSlices();
         this.clearOverlay();
+        this.clearSelected();
         this.helpers.traverse(disposeObject);
         this.helpers.clear();
         this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));