@inweb/viewer-three 25.10.0 → 25.11.0

package/dist/viewer-three.js

@@ -103,7 +103,8 @@
             reverseZoomWheel: false,
             enableZoomWheel: true,
             enableGestures: true,
-            geometryType: "vsfx"
+            geometryType: "vsfx",
+            rulerUnit: "Default"
         };
     }
 
@@ -363,6 +364,13 @@
             this._data.geometryType = value;
             this.change();
         }
+        get rulerUnit() {
+            return this._data.rulerUnit;
+        }
+        set rulerUnit(value) {
+            this._data.rulerUnit = value;
+            this.change();
+        }
     }
 
     const CanvasEvents = [ "click", "contextmenu", "dblclick", "mousedown", "mouseleave", "mousemove", "mouseup", "pointercancel", "pointerdown", "pointerleave", "pointermove", "pointerup", "touchcancel", "touchend", "touchmove", "touchstart", "wheel" ];
@@ -432,62 +440,6 @@
     commands("ThreeJS").registerCommand("clearMarkup", (viewer) => console.warn("clearMarkup not implemented"));
     commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");
 
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    function clearSlices(viewer) {
-        viewer.renderer.clippingPlanes = [];
-        viewer.update();
-    }
-    commands("ThreeJS").registerCommand("clearSlices", clearSlices);
-
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    function createPreview(viewer, type = "image/jpeg", encoderOptions = 0.25) {
-        viewer.update(true);
-        return viewer.canvas.toDataURL(type, encoderOptions);
-    }
-    commands("ThreeJS").registerCommand("createPreview", createPreview);
-
     /**
      * @license
      * Copyright 2010-2023 Three.js Authors
@@ -37506,51 +37458,118 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    function calcObjectDepth(object, depth) {
-        let res = depth;
-        object.children.forEach((x) => {
-            const objectDepth = calcObjectDepth(x, depth + 1);
-            if (res < objectDepth)
-                res = objectDepth;
-        });
-        object.originalPosition = object.position.clone();
-        return res;
-    }
-    function explodeScene(scene, scale = 0) {
-        scale /= 100;
-        if (!scene.maxDepth)
-            scene.maxDepth = calcObjectDepth(scene, 1);
-        const maxDepth = scene.maxDepth;
-        let explodeDepth = scale * (maxDepth - 1) + 1;
-        if (maxDepth === 1)
-            explodeDepth = 1;
-        function explodeObject(object, depth, parentCenter, parentOffset) {
-            const objectBox = new Box3().setFromObject(object);
-            const objectCenter = objectBox.getCenter(new Vector3());
-            const objectOffset = parentOffset.clone();
-            if (depth > 0 && depth <= explodeDepth) {
-                const offset = objectCenter.clone().sub(parentCenter).multiplyScalar(scale);
-                objectOffset.add(offset);
-            }
-            object.children.forEach((object) => explodeObject(object, depth + 1, objectCenter, objectOffset));
-            const originalPosition = object.originalPosition;
-            object.position.copy(originalPosition);
-            if (scale > 0) {
-                const direction = objectCenter.sub(parentCenter).normalize();
-                object.position.add(direction.add(objectOffset));
-            }
+    class SelectionComponent {
+        constructor(viewer) {
+            this.onPointerDown = (event) => {
+                if (!event.isPrimary || event.button !== 0)
+                    return;
+                this.getMousePosition(event, this.downPosition);
+            };
+            this.onPointerUp = (event) => {
+                if (!event.isPrimary)
+                    return;
+                const upPosition = this.getMousePosition(event, new Vector2());
+                if (this.downPosition.distanceTo(upPosition) !== 0)
+                    return;
+                const intersects = this.getPointerIntersects(upPosition);
+                this.clearSelection();
+                if (intersects.length > 0)
+                    this.select(intersects[0].object);
+                this.viewer.update();
+                this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
+            };
+            this.onDoubleClick = (event) => {
+                if (event.button !== 0)
+                    return;
+                this.viewer.executeCommand("zoomToSelected");
+            };
+            this.optionsChange = () => {
+                const { facesColor, facesTransparancy } = this.viewer.options;
+                this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+                this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+                this.viewer.update();
+            };
+            this.viewer = viewer;
+            this.raycaster = new Raycaster();
+            this.downPosition = new Vector2();
+            const { facesColor, facesTransparancy } = this.viewer.options;
+            this.facesMaterial = new MeshBasicMaterial();
+            this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+            this.facesMaterial.transparent = true;
+            this.viewer.addEventListener("pointerdown", this.onPointerDown);
+            this.viewer.addEventListener("pointerup", this.onPointerUp);
+            this.viewer.addEventListener("dblclick", this.onDoubleClick);
+            this.viewer.addEventListener("optionschange", this.optionsChange);
+        }
+        dispose() {
+            this.facesMaterial.dispose();
+            this.viewer.removeEventListener("pointerdown", this.onPointerDown);
+            this.viewer.removeEventListener("pointerup", this.onPointerUp);
+            this.viewer.removeEventListener("dblclick", this.onDoubleClick);
+            this.viewer.removeEventListener("optionschange", this.optionsChange);
+        }
+        getMousePosition(event, position) {
+            const rect = this.viewer.canvas.getBoundingClientRect();
+            position.setX((event.clientX - rect.left) / rect.width);
+            position.setY((event.clientY - rect.top) / rect.height);
+            return position;
+        }
+        getPointerIntersects(position) {
+            const mouse = new Vector2(position.x * 2 - 1, -(position.y * 2) + 1);
+            this.raycaster.setFromCamera(mouse, this.viewer.camera);
+            const objects = [];
+            this.viewer.scene.traverseVisible((child) => objects.push(child));
+            return this.raycaster.intersectObjects(objects, false);
+        }
+        select(object) {
+            if (object.isSelected)
+                return;
+            object.isSelected = true;
+            object.originalMaterial = object.material;
+            object.material = this.facesMaterial;
+            this.viewer.selected.push(object);
+        }
+        clearSelection() {
+            this.viewer.selected.forEach((object) => {
+                object.isSelected = false;
+                object.material = object.originalMaterial;
+            });
+            this.viewer.selected.length = 0;
         }
-        const sceneExtents = new Box3().setFromObject(scene);
-        const sceneCenter = sceneExtents.getCenter(new Vector3());
-        explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
     }
-    function explode(viewer, index = 0) {
-        viewer.models.forEach((gltf) => explodeScene(gltf.scene, index));
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    function clearSelected(viewer) {
+        const selection = new SelectionComponent(viewer);
+        selection.clearSelection();
+        selection.dispose();
         viewer.update();
-        viewer.emit({ type: "explode", data: index });
+        viewer.emitEvent({ type: "select", data: undefined, handles: [] });
     }
-    commands("ThreeJS").registerCommand("explode", explode);
-    commands("ThreeJS").registerCommand("collect", (viewer) => explode(viewer, 0));
+    commands("ThreeJS").registerCommand("clearSelected", clearSelected);
+    commands("ThreeJS").registerCommandAlias("clearSelected", "unselect");
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37574,54 +37593,11 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    const defaultViewPositions = {
-        top: new Vector3(0, 0, 1),
-        bottom: new Vector3(0, 0, -1),
-        left: new Vector3(-1, 0, 0),
-        right: new Vector3(1, 0, 0),
-        front: new Vector3(0, 1, 0),
-        back: new Vector3(0, -1, 0),
-        sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
-        se: new Vector3(0.5, -0.5, 1.0).normalize(),
-        ne: new Vector3(0.5, 0.5, 1.0).normalize(),
-        nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
-    };
-    function setDefaultViewPosition(viewer, position) {
-        const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
-        const camera = viewer.camera;
-        const center = viewer.extents.getCenter(new Vector3());
-        const sphere = viewer.extents.getBoundingSphere(new Sphere());
-        const offset = new Vector3().copy(direction).multiplyScalar(sphere.radius);
-        camera.position.copy(center);
-        camera.position.add(offset);
-        camera.rotation.set(0, 0, 0);
-        camera.lookAt(center);
-        camera.updateProjectionMatrix();
+    function clearSlices(viewer) {
+        viewer.renderer.clippingPlanes = [];
         viewer.update();
-        viewer.emit({ type: "viewposition", data: position });
-        viewer.executeCommand("zoomToExtents");
     }
-    commands("ThreeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
-    commands("ThreeJS").registerCommand("top", (viewer) => setDefaultViewPosition(viewer, "top"));
-    commands("ThreeJS").registerCommand("bottom", (viewer) => setDefaultViewPosition(viewer, "bottom"));
-    commands("ThreeJS").registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "left"));
-    commands("ThreeJS").registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "right"));
-    commands("ThreeJS").registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "front"));
-    commands("ThreeJS").registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "back"));
-    commands("ThreeJS").registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
-    commands("ThreeJS").registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "se"));
-    commands("ThreeJS").registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "ne"));
-    commands("ThreeJS").registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "nw"));
-    commands("ThreeJS").registerCommandAlias("top", "k3DViewTop");
-    commands("ThreeJS").registerCommandAlias("bottom", "k3DViewBottom");
-    commands("ThreeJS").registerCommandAlias("left", "k3DViewLeft");
-    commands("ThreeJS").registerCommandAlias("right", "k3DViewRight");
-    commands("ThreeJS").registerCommandAlias("front", "k3DViewFront");
-    commands("ThreeJS").registerCommandAlias("back", "k3DViewBack");
-    commands("ThreeJS").registerCommandAlias("se", "k3DViewSE");
-    commands("ThreeJS").registerCommandAlias("sw", "k3DViewSW");
-    commands("ThreeJS").registerCommandAlias("ne", "k3DViewNE");
-    commands("ThreeJS").registerCommandAlias("nw", "k3DViewNW");
+    commands("ThreeJS").registerCommand("clearSlices", clearSlices);
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37645,10 +37621,11 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    function getDefaultViewPositions() {
-        return Object.keys(defaultViewPositions);
+    function createPreview(viewer, type = "image/jpeg", encoderOptions = 0.25) {
+        viewer.update(true);
+        return viewer.canvas.toDataURL(type, encoderOptions);
     }
-    commands("ThreeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+    commands("ThreeJS").registerCommand("createPreview", createPreview);
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37672,11 +37649,51 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    function getModels(viewer) {
-        const handles = viewer.models.map((model) => model.userData.handle || "").filter((handle) => handle);
-        return handles;
+    function calcObjectDepth(object, depth) {
+        let res = depth;
+        object.children.forEach((x) => {
+            const objectDepth = calcObjectDepth(x, depth + 1);
+            if (res < objectDepth)
+                res = objectDepth;
+        });
+        object.originalPosition = object.position.clone();
+        return res;
     }
-    commands("ThreeJS").registerCommand("getModels", getModels);
+    function explodeScene(scene, scale = 0) {
+        scale /= 100;
+        if (!scene.maxDepth)
+            scene.maxDepth = calcObjectDepth(scene, 1);
+        const maxDepth = scene.maxDepth;
+        let explodeDepth = scale * (maxDepth - 1) + 1;
+        if (maxDepth === 1)
+            explodeDepth = 1;
+        function explodeObject(object, depth, parentCenter, parentOffset) {
+            const objectBox = new Box3().setFromObject(object);
+            const objectCenter = objectBox.getCenter(new Vector3());
+            const objectOffset = parentOffset.clone();
+            if (depth > 0 && depth <= explodeDepth) {
+                const offset = objectCenter.clone().sub(parentCenter).multiplyScalar(scale);
+                objectOffset.add(offset);
+            }
+            object.children.forEach((object) => explodeObject(object, depth + 1, objectCenter, objectOffset));
+            const originalPosition = object.originalPosition;
+            object.position.copy(originalPosition);
+            if (scale > 0) {
+                const direction = objectCenter.sub(parentCenter).normalize();
+                object.position.add(direction.add(objectOffset));
+            }
+        }
+        const sceneExtents = new Box3().setFromObject(scene);
+        const sceneCenter = sceneExtents.getCenter(new Vector3());
+        explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
+    }
+    function explode(viewer, index = 0) {
+        viewer.models.forEach((gltf) => explodeScene(gltf.scene, index));
+        viewer.update();
+        viewer.emitEvent({ type: "explode", data: index });
+    }
+    commands("ThreeJS").registerCommand("explode", explode);
+    commands("ThreeJS").registerCommand("collect", (viewer) => explode(viewer, 0));
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37700,10 +37717,54 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    function getSelected(viewer) {
-        return viewer.selected.map((object) => { var _a; return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle; }).filter((handle) => handle);
+    const defaultViewPositions = {
+        top: new Vector3(0, 0, 1),
+        bottom: new Vector3(0, 0, -1),
+        left: new Vector3(-1, 0, 0),
+        right: new Vector3(1, 0, 0),
+        front: new Vector3(0, 1, 0),
+        back: new Vector3(0, -1, 0),
+        sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
+        se: new Vector3(0.5, -0.5, 1.0).normalize(),
+        ne: new Vector3(0.5, 0.5, 1.0).normalize(),
+        nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
+    };
+    function setDefaultViewPosition(viewer, position) {
+        const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
+        const camera = viewer.camera;
+        const center = viewer.extents.getCenter(new Vector3());
+        const sphere = viewer.extents.getBoundingSphere(new Sphere());
+        const offset = new Vector3().copy(direction).multiplyScalar(sphere.radius);
+        camera.position.copy(center);
+        camera.position.add(offset);
+        camera.rotation.set(0, 0, 0);
+        camera.lookAt(center);
+        camera.updateProjectionMatrix();
+        viewer.update();
+        viewer.emit({ type: "viewposition", data: position });
+        viewer.executeCommand("zoomToExtents");
     }
-    commands("ThreeJS").registerCommand("getSelected", getSelected);
+    commands("ThreeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
+    commands("ThreeJS").registerCommand("top", (viewer) => setDefaultViewPosition(viewer, "top"));
+    commands("ThreeJS").registerCommand("bottom", (viewer) => setDefaultViewPosition(viewer, "bottom"));
+    commands("ThreeJS").registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "left"));
+    commands("ThreeJS").registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "right"));
+    commands("ThreeJS").registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "front"));
+    commands("ThreeJS").registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "back"));
+    commands("ThreeJS").registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
+    commands("ThreeJS").registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "se"));
+    commands("ThreeJS").registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "ne"));
+    commands("ThreeJS").registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "nw"));
+    commands("ThreeJS").registerCommandAlias("top", "k3DViewTop");
+    commands("ThreeJS").registerCommandAlias("bottom", "k3DViewBottom");
+    commands("ThreeJS").registerCommandAlias("left", "k3DViewLeft");
+    commands("ThreeJS").registerCommandAlias("right", "k3DViewRight");
+    commands("ThreeJS").registerCommandAlias("front", "k3DViewFront");
+    commands("ThreeJS").registerCommandAlias("back", "k3DViewBack");
+    commands("ThreeJS").registerCommandAlias("se", "k3DViewSE");
+    commands("ThreeJS").registerCommandAlias("sw", "k3DViewSW");
+    commands("ThreeJS").registerCommandAlias("ne", "k3DViewNE");
+    commands("ThreeJS").registerCommandAlias("nw", "k3DViewNW");
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37727,86 +37788,65 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
-    class SelectionComponent {
-        constructor(viewer) {
-            this.onPointerDown = (event) => {
-                if (!event.isPrimary || event.button !== 0)
-                    return;
-                this.getMousePosition(event, this.downPosition);
-            };
-            this.onPointerUp = (event) => {
-                if (!event.isPrimary)
-                    return;
-                const upPosition = this.getMousePosition(event, new Vector2());
-                if (this.downPosition.distanceTo(upPosition) !== 0)
-                    return;
-                const intersects = this.getPointerIntersects(upPosition);
-                this.clearSelection();
-                if (intersects.length > 0)
-                    this.select(intersects[0].object);
-                this.viewer.update();
-                this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
-            };
-            this.onDoubleClick = (event) => {
-                if (event.button !== 0)
-                    return;
-                this.viewer.executeCommand("zoomToSelected");
-            };
-            this.optionsChange = () => {
-                const { facesColor, facesTransparancy } = this.viewer.options;
-                this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-                this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-                this.viewer.update();
-            };
-            this.viewer = viewer;
-            this.raycaster = new Raycaster();
-            this.downPosition = new Vector2();
-            const { facesColor, facesTransparancy } = this.viewer.options;
-            this.facesMaterial = new MeshBasicMaterial();
-            this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-            this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-            this.facesMaterial.transparent = true;
-            this.viewer.addEventListener("pointerdown", this.onPointerDown);
-            this.viewer.addEventListener("pointerup", this.onPointerUp);
-            this.viewer.addEventListener("dblclick", this.onDoubleClick);
-            this.viewer.addEventListener("optionschange", this.optionsChange);
-        }
-        dispose() {
-            this.facesMaterial.dispose();
-            this.viewer.removeEventListener("pointerdown", this.onPointerDown);
-            this.viewer.removeEventListener("pointerup", this.onPointerUp);
-            this.viewer.removeEventListener("dblclick", this.onDoubleClick);
-            this.viewer.removeEventListener("optionschange", this.optionsChange);
-        }
-        getMousePosition(event, position) {
-            const rect = this.viewer.canvas.getBoundingClientRect();
-            position.setX((event.clientX - rect.left) / rect.width);
-            position.setY((event.clientY - rect.top) / rect.height);
-            return position;
-        }
-        getPointerIntersects(position) {
-            const mouse = new Vector2(position.x * 2 - 1, -(position.y * 2) + 1);
-            this.raycaster.setFromCamera(mouse, this.viewer.camera);
-            const objects = [];
-            this.viewer.scene.traverseVisible((child) => objects.push(child));
-            return this.raycaster.intersectObjects(objects, false);
-        }
-        select(object) {
-            if (object.isSelected)
-                return;
-            object.isSelected = true;
-            object.originalMaterial = object.material;
-            object.material = this.facesMaterial;
-            this.viewer.selected.push(object);
-        }
-        clearSelection() {
-            this.viewer.selected.forEach((object) => {
-                object.isSelected = false;
-                object.material = object.originalMaterial;
-            });
-            this.viewer.selected.length = 0;
-        }
+    function getDefaultViewPositions() {
+        return Object.keys(defaultViewPositions);
     }
+    commands("ThreeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    function getModels(viewer) {
+        const handles = viewer.models.map((model) => model.userData.handle || "").filter((handle) => handle);
+        return handles;
+    }
+    commands("ThreeJS").registerCommand("getModels", getModels);
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    function getSelected(viewer) {
+        return viewer.selected.map((object) => { var _a; return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle; }).filter((handle) => handle);
+    }
+    commands("ThreeJS").registerCommand("getSelected", getSelected);
 
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
@@ -37836,8 +37876,8 @@
         selection.clearSelection();
         selection.dispose();
         viewer.update();
-        viewer.emit({ type: "hide" });
-        viewer.emit({ type: "select", data: undefined, handles: [] });
+        viewer.emitEvent({ type: "hide" });
+        viewer.emitEvent({ type: "select", data: undefined, handles: [] });
     }
     commands("ThreeJS").registerCommand("hideSelected", hideSelected);
 
@@ -37879,7 +37919,7 @@
         }
         isolateObject(viewer.scene, 0);
         viewer.update();
-        viewer.emit({ type: "isolate" });
+        viewer.emitEvent({ type: "isolate" });
     }
     commands("ThreeJS").registerCommand("isolateSelected", isolateSelected);
 
@@ -37938,7 +37978,7 @@
         viewer.executeCommand("clearSlices");
         viewer.executeCommand("clearOverlay");
         viewer.executeCommand("setMarkupColor");
-        viewer.executeCommand("unselect");
+        viewer.executeCommand("clearSelected");
         viewer.executeCommand("showAll");
         viewer.executeCommand("explode", 0);
         viewer.executeCommand("zoomToExtents", true);
@@ -38063,7 +38103,7 @@
         objects.forEach((object) => selection.select(object));
         selection.dispose();
         viewer.update();
-        viewer.emit({ type: "select", data: undefined, handles });
+        viewer.emitEvent({ type: "select", data: undefined, handles });
     }
     commands("ThreeJS").registerCommand("setSelected", setSelected);
 
@@ -38092,41 +38132,10 @@
     function showAll(viewer) {
         viewer.scene.traverse((object) => (object.visible = true));
         viewer.update();
-        viewer.emit({ type: "showall" });
+        viewer.emitEvent({ type: "showall" });
     }
     commands("ThreeJS").registerCommand("showAll", showAll);
 
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    function unselect(viewer) {
-        const selection = new SelectionComponent(viewer);
-        selection.clearSelection();
-        selection.dispose();
-        viewer.update();
-        viewer.emit({ type: "select", data: undefined, handles: [] });
-    }
-    commands("ThreeJS").registerCommand("unselect", unselect);
-
     ///////////////////////////////////////////////////////////////////////////////
     // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
@@ -42922,1252 +42931,1001 @@
     //    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
     //    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
 
-    const _changeEvent$2 = { type: 'change' };
-    const _startEvent = { type: 'start' };
-    const _endEvent = { type: 'end' };
+    const _changeEvent$2 = { type: "change" };
+    const _startEvent = { type: "start" };
+    const _endEvent = { type: "end" };
+
+    const STATE = {
+      NONE: -1,
+      ROTATE: 0,
+      DOLLY: 1,
+      PAN: 2,
+      TOUCH_ROTATE: 3,
+      TOUCH_PAN: 4,
+      TOUCH_DOLLY_PAN: 5,
+      TOUCH_DOLLY_ROTATE: 6,
+    };
 
     class OrbitControls extends EventDispatcher {
+      constructor(object, domElement) {
+        super();
 
-    	constructor( object, domElement ) {
-
-    		super();
-
-    		this.object = object;
-    		this.domElement = domElement;
-    		this.domElement.style.touchAction = 'none'; // disable touch scroll
-
-    		// Set to false to disable this control
-    		this.enabled = true;
-
-    		// "target" sets the location of focus, where the object orbits around
-    		this.target = new Vector3();
-
-    		// How far you can dolly in and out ( PerspectiveCamera only )
-    		this.minDistance = 0;
-    		this.maxDistance = Infinity;
-
-    		// How far you can zoom in and out ( OrthographicCamera only )
-    		this.minZoom = 0;
-    		this.maxZoom = Infinity;
-
-    		// How far you can orbit vertically, upper and lower limits.
-    		// Range is 0 to Math.PI radians.
-    		this.minPolarAngle = 0; // radians
-    		this.maxPolarAngle = Math.PI; // radians
-
-    		// How far you can orbit horizontally, upper and lower limits.
-    		// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
-    		this.minAzimuthAngle = - Infinity; // radians
-    		this.maxAzimuthAngle = Infinity; // radians
-
-    		// Set to true to enable damping (inertia)
-    		// If damping is enabled, you must call controls.update() in your animation loop
-    		this.enableDamping = false;
-    		this.dampingFactor = 0.05;
-
-    		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-    		// Set to false to disable zooming
-    		this.enableZoom = true;
-    		this.zoomSpeed = 1.0;
-
-    		// Set to false to disable rotating
-    		this.enableRotate = true;
-    		this.rotateSpeed = 1.0;
-
-    		// Set to false to disable panning
-    		this.enablePan = true;
-    		this.panSpeed = 1.0;
-    		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
-    		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
-
-    		// Set to true to automatically rotate around the target
-    		// If auto-rotate is enabled, you must call controls.update() in your animation loop
-    		this.autoRotate = false;
-    		this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
-
-    		// The four arrow keys
-    		this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
-
-    		// Mouse buttons
-    		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
-
-    		// Touch fingers
-    		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
-
-    		// for reset
-    		this.target0 = this.target.clone();
-    		this.position0 = this.object.position.clone();
-    		this.zoom0 = this.object.zoom;
-
-    		// the target DOM element for key events
-    		this._domElementKeyEvents = null;
-
-    		//
-    		// public methods
-    		//
-
-    		this.getPolarAngle = function () {
-
-    			return spherical.phi;
-
-    		};
-
-    		this.getAzimuthalAngle = function () {
-
-    			return spherical.theta;
-
-    		};
-
-    		this.getDistance = function () {
-
-    			return this.object.position.distanceTo( this.target );
-
-    		};
-
-    		this.listenToKeyEvents = function ( domElement ) {
-
-    			domElement.addEventListener( 'keydown', onKeyDown );
-    			this._domElementKeyEvents = domElement;
-
-    		};
-
-    		this.stopListenToKeyEvents = function () {
-
-    			this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
-    			this._domElementKeyEvents = null;
-
-    		};
-
-    		this.saveState = function () {
-
-    			scope.target0.copy( scope.target );
-    			scope.position0.copy( scope.object.position );
-    			scope.zoom0 = scope.object.zoom;
-
-    		};
-
-    		this.reset = function () {
-
-    			scope.target.copy( scope.target0 );
-    			scope.object.position.copy( scope.position0 );
-    			scope.object.zoom = scope.zoom0;
-
-    			scope.object.updateProjectionMatrix();
-    			scope.dispatchEvent( _changeEvent$2 );
-
-    			scope.update();
-
-    			state = STATE.NONE;
-
-    		};
-
-    		// this method is exposed, but perhaps it would be better if we can make it private...
-    		this.update = function () {
-
-    			const offset = new Vector3();
-
-    			// so camera.up is the orbit axis
-    			const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
-    			const quatInverse = quat.clone().invert();
-
-    			const lastPosition = new Vector3();
-    			const lastQuaternion = new Quaternion();
-    			const lastTargetPosition = new Vector3();
-
-    			const twoPI = 2 * Math.PI;
-
-    			return function update() {
-
-    				const position = scope.object.position;
-
-    				offset.copy( position ).sub( scope.target );
-
-    				// rotate offset to "y-axis-is-up" space
-    				offset.applyQuaternion( quat );
-
-    				// angle from z-axis around y-axis
-    				spherical.setFromVector3( offset );
-
-    				if ( scope.autoRotate && state === STATE.NONE ) {
-
-    					rotateLeft( getAutoRotationAngle() );
-
-    				}
-
-    				if ( scope.enableDamping ) {
-
-    					spherical.theta += sphericalDelta.theta * scope.dampingFactor;
-    					spherical.phi += sphericalDelta.phi * scope.dampingFactor;
-
-    				} else {
-
-    					spherical.theta += sphericalDelta.theta;
-    					spherical.phi += sphericalDelta.phi;
-
-    				}
-
-    				// restrict theta to be between desired limits
-
-    				let min = scope.minAzimuthAngle;
-    				let max = scope.maxAzimuthAngle;
-
-    				if ( isFinite( min ) && isFinite( max ) ) {
-
-    					if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
-
-    					if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
-
-    					if ( min <= max ) {
-
-    						spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
-
-    					} else {
-
-    						spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
-    							Math.max( min, spherical.theta ) :
-    							Math.min( max, spherical.theta );
-
-    					}
-
-    				}
-
-    				// restrict phi to be between desired limits
-    				spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
-
-    				spherical.makeSafe();
-
-
-    				spherical.radius *= scale;
-
-    				// restrict radius to be between desired limits
-    				spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
-    				// move target to panned location
-
-    				if ( scope.enableDamping === true ) {
-
-    					scope.target.addScaledVector( panOffset, scope.dampingFactor );
-
-    				} else {
-
-    					scope.target.add( panOffset );
-
-    				}
-
-    				offset.setFromSpherical( spherical );
-
-    				// rotate offset back to "camera-up-vector-is-up" space
-    				offset.applyQuaternion( quatInverse );
-
-    				position.copy( scope.target ).add( offset );
-
-    				scope.object.lookAt( scope.target );
-
-    				if ( scope.enableDamping === true ) {
-
-    					sphericalDelta.theta *= ( 1 - scope.dampingFactor );
-    					sphericalDelta.phi *= ( 1 - scope.dampingFactor );
-
-    					panOffset.multiplyScalar( 1 - scope.dampingFactor );
-
-    				} else {
-
-    					sphericalDelta.set( 0, 0, 0 );
-
-    					panOffset.set( 0, 0, 0 );
-
-    				}
-
-    				scale = 1;
-
-    				// update condition is:
-    				// min(camera displacement, camera rotation in radians)^2 > EPS
-    				// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-    				if ( zoomChanged ||
-    					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
-    					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
-    					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
-
-    					scope.dispatchEvent( _changeEvent$2 );
-
-    					lastPosition.copy( scope.object.position );
-    					lastQuaternion.copy( scope.object.quaternion );
-    					lastTargetPosition.copy( scope.target );
-
-    					zoomChanged = false;
-
-    					return true;
-
-    				}
-
-    				return false;
-
-    			};
-
-    		}();
-
-    		this.dispose = function () {
-
-    			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
-
-    			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
-    			scope.domElement.removeEventListener( 'pointercancel', onPointerUp );
-    			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
-
-    			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-    			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
-
-
-    			if ( scope._domElementKeyEvents !== null ) {
-
-    				scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
-    				scope._domElementKeyEvents = null;
-
-    			}
-
-    			//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
-
-    		};
-
-    		//
-    		// internals
-    		//
-
-    		const scope = this;
-
-    		const STATE = {
-    			NONE: - 1,
-    			ROTATE: 0,
-    			DOLLY: 1,
-    			PAN: 2,
-    			TOUCH_ROTATE: 3,
-    			TOUCH_PAN: 4,
-    			TOUCH_DOLLY_PAN: 5,
-    			TOUCH_DOLLY_ROTATE: 6
-    		};
-
-    		let state = STATE.NONE;
-
-    		const EPS = 0.000001;
-
-    		// current position in spherical coordinates
-    		const spherical = new Spherical();
-    		const sphericalDelta = new Spherical();
-
-    		let scale = 1;
-    		const panOffset = new Vector3();
-    		let zoomChanged = false;
-
-    		const rotateStart = new Vector2();
-    		const rotateEnd = new Vector2();
-    		const rotateDelta = new Vector2();
-
-    		const panStart = new Vector2();
-    		const panEnd = new Vector2();
-    		const panDelta = new Vector2();
-
-    		const dollyStart = new Vector2();
-    		const dollyEnd = new Vector2();
-    		const dollyDelta = new Vector2();
-
-    		const pointers = [];
-    		const pointerPositions = {};
-
-    		function getAutoRotationAngle() {
-
-    			return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-
-    		}
-
-    		function getZoomScale() {
-
-    			return Math.pow( 0.95, scope.zoomSpeed );
-
-    		}
-
-    		function rotateLeft( angle ) {
-
-    			sphericalDelta.theta -= angle;
-
-    		}
-
-    		function rotateUp( angle ) {
-
-    			sphericalDelta.phi -= angle;
-
-    		}
-
-    		const panLeft = function () {
-
-    			const v = new Vector3();
-
-    			return function panLeft( distance, objectMatrix ) {
-
-    				v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
-    				v.multiplyScalar( - distance );
-
-    				panOffset.add( v );
-
-    			};
-
-    		}();
-
-    		const panUp = function () {
-
-    			const v = new Vector3();
-
-    			return function panUp( distance, objectMatrix ) {
-
-    				if ( scope.screenSpacePanning === true ) {
-
-    					v.setFromMatrixColumn( objectMatrix, 1 );
-
-    				} else {
-
-    					v.setFromMatrixColumn( objectMatrix, 0 );
-    					v.crossVectors( scope.object.up, v );
-
-    				}
-
-    				v.multiplyScalar( distance );
-
-    				panOffset.add( v );
-
-    			};
-
-    		}();
-
-    		// deltaX and deltaY are in pixels; right and down are positive
-    		const pan = function () {
-
-    			const offset = new Vector3();
-
-    			return function pan( deltaX, deltaY ) {
-
-    				const element = scope.domElement;
-
-    				if ( scope.object.isPerspectiveCamera ) {
-
-    					// perspective
-    					const position = scope.object.position;
-    					offset.copy( position ).sub( scope.target );
-    					let targetDistance = offset.length();
-
-    					// half of the fov is center to top of screen
-    					targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
-
-    					// we use only clientHeight here so aspect ratio does not distort speed
-    					panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-    					panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-
-    				} else if ( scope.object.isOrthographicCamera ) {
-
-    					// orthographic
-    					panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
-    					panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
-
-    				} else {
-
-    					// camera neither orthographic nor perspective
-    					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
-    					scope.enablePan = false;
-
-    				}
-
-    			};
-
-    		}();
-
-    		function dollyOut( dollyScale ) {
-
-    			if ( scope.object.isPerspectiveCamera ) {
-
-    				scale /= dollyScale;
-
-    			} else if ( scope.object.isOrthographicCamera ) {
-
-    				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-    				scope.object.updateProjectionMatrix();
-    				zoomChanged = true;
-
-    			} else {
-
-    				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-    				scope.enableZoom = false;
-
-    			}
-
-    		}
-
-    		function dollyIn( dollyScale ) {
-
-    			if ( scope.object.isPerspectiveCamera ) {
-
-    				scale *= dollyScale;
-
-    			} else if ( scope.object.isOrthographicCamera ) {
-
-    				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-    				scope.object.updateProjectionMatrix();
-    				zoomChanged = true;
-
-    			} else {
-
-    				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-    				scope.enableZoom = false;
-
-    			}
-
-    		}
-
-    		//
-    		// event callbacks - update the object state
-    		//
-
-    		function handleMouseDownRotate( event ) {
-
-    			rotateStart.set( event.clientX, event.clientY );
-
-    		}
-
-    		function handleMouseDownDolly( event ) {
-
-    			dollyStart.set( event.clientX, event.clientY );
-
-    		}
-
-    		function handleMouseDownPan( event ) {
-
-    			panStart.set( event.clientX, event.clientY );
-
-    		}
-
-    		function handleMouseMoveRotate( event ) {
-
-    			rotateEnd.set( event.clientX, event.clientY );
-
-    			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-    			const element = scope.domElement;
-
-    			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-    			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-    			rotateStart.copy( rotateEnd );
-
-    			scope.update();
-
-    		}
-
-    		function handleMouseMoveDolly( event ) {
-
-    			dollyEnd.set( event.clientX, event.clientY );
-
-    			dollyDelta.subVectors( dollyEnd, dollyStart );
-
-    			if ( dollyDelta.y > 0 ) {
-
-    				dollyOut( getZoomScale() );
-
-    			} else if ( dollyDelta.y < 0 ) {
-
-    				dollyIn( getZoomScale() );
-
-    			}
-
-    			dollyStart.copy( dollyEnd );
+        this.object = object;
+        this.domElement = domElement;
+        this.domElement.style.touchAction = "none"; // disable touch scroll
 
-    			scope.update();
+        // Set to false to disable this control
+        this.enabled = true;
 
-    		}
-
-    		function handleMouseMovePan( event ) {
-
-    			panEnd.set( event.clientX, event.clientY );
-
-    			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-    			pan( panDelta.x, panDelta.y );
-
-    			panStart.copy( panEnd );
-
-    			scope.update();
-
-    		}
-
-    		function handleMouseWheel( event ) {
-
-    			if ( event.deltaY < 0 ) {
-
-    				dollyIn( getZoomScale() );
-
-    			} else if ( event.deltaY > 0 ) {
-
-    				dollyOut( getZoomScale() );
-
-    			}
-
-    			scope.update();
-
-    		}
-
-    		function handleKeyDown( event ) {
-
-    			let needsUpdate = false;
-
-    			switch ( event.code ) {
-
-    				case scope.keys.UP:
-
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-    						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-    					} else {
-
-    						pan( 0, scope.keyPanSpeed );
-
-    					}
-
-    					needsUpdate = true;
-    					break;
-
-    				case scope.keys.BOTTOM:
-
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-    						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-    					} else {
-
-    						pan( 0, - scope.keyPanSpeed );
-
-    					}
-
-    					needsUpdate = true;
-    					break;
-
-    				case scope.keys.LEFT:
-
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-    						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-    					} else {
-
-    						pan( scope.keyPanSpeed, 0 );
-
-    					}
-
-    					needsUpdate = true;
-    					break;
-
-    				case scope.keys.RIGHT:
-
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-    						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-    					} else {
-
-    						pan( - scope.keyPanSpeed, 0 );
-
-    					}
-
-    					needsUpdate = true;
-    					break;
-
-    			}
-
-    			if ( needsUpdate ) {
-
-    				// prevent the browser from scrolling on cursor keys
-    				event.preventDefault();
+        // "target" sets the location of focus, where the object orbits around
+        this.target = new Vector3();
 
-    				scope.update();
+        // How far you can dolly in and out ( PerspectiveCamera only )
+        this.minDistance = 0;
+        this.maxDistance = Infinity;
 
-    			}
-
-
-    		}
-
-    		function handleTouchStartRotate() {
-
-    			if ( pointers.length === 1 ) {
-
-    				rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-    			} else {
+        // How far you can zoom in and out ( OrthographicCamera only )
+        this.minZoom = 0;
+        this.maxZoom = Infinity;
 
-    				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-    				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+        // How far you can orbit vertically, upper and lower limits.
+        // Range is 0 to Math.PI radians.
+        this.minPolarAngle = 0; // radians
+        this.maxPolarAngle = Math.PI; // radians
 
-    				rotateStart.set( x, y );
+        // How far you can orbit horizontally, upper and lower limits.
+        // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
+        this.minAzimuthAngle = -Infinity; // radians
+        this.maxAzimuthAngle = Infinity; // radians
 
-    			}
-
-    		}
+        // Set to true to enable damping (inertia)
+        // If damping is enabled, you must call controls.update() in your animation loop
+        this.enableDamping = false;
+        this.dampingFactor = 0.05;
 
-    		function handleTouchStartPan() {
+        // This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+        // Set to false to disable zooming
+        this.enableZoom = true;
+        this.zoomSpeed = 1.0;
 
-    			if ( pointers.length === 1 ) {
+        // Set to false to disable rotating
+        this.enableRotate = true;
+        this.rotateSpeed = 1.0;
 
-    				panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-    			} else {
+        // Set to false to disable panning
+        this.enablePan = true;
+        this.panSpeed = 1.0;
+        this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
+        this.keyPanSpeed = 7.0; // pixels moved per arrow key push
 
-    				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-    				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+        // Set to true to automatically rotate around the target
+        // If auto-rotate is enabled, you must call controls.update() in your animation loop
+        this.autoRotate = false;
+        this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
 
-    				panStart.set( x, y );
-
-    			}
-
-    		}
+        // The four arrow keys
+        this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" };
 
-    		function handleTouchStartDolly() {
+        // Mouse buttons
+        this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
 
-    			const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
-    			const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
+        // Touch fingers
+        this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
 
-    			const distance = Math.sqrt( dx * dx + dy * dy );
+        // for reset
+        this.target0 = this.target.clone();
+        this.position0 = this.object.position.clone();
+        this.zoom0 = this.object.zoom;
 
-    			dollyStart.set( 0, distance );
-
-    		}
-
-    		function handleTouchStartDollyPan() {
-
-    			if ( scope.enableZoom ) handleTouchStartDolly();
-
-    			if ( scope.enablePan ) handleTouchStartPan();
-
-    		}
-
-    		function handleTouchStartDollyRotate() {
-
-    			if ( scope.enableZoom ) handleTouchStartDolly();
-
-    			if ( scope.enableRotate ) handleTouchStartRotate();
-
-    		}
-
-    		function handleTouchMoveRotate( event ) {
-
-    			if ( pointers.length == 1 ) {
-
-    				rotateEnd.set( event.pageX, event.pageY );
-
-    			} else {
+        // the target DOM element for key events
+        this._domElementKeyEvents = null;
 
-    				const position = getSecondPointerPosition( event );
+        //
+        // public methods
+        //
 
-    				const x = 0.5 * ( event.pageX + position.x );
-    				const y = 0.5 * ( event.pageY + position.y );
+        this.getPolarAngle = function () {
+          return spherical.phi;
+        };
 
-    				rotateEnd.set( x, y );
+        this.getAzimuthalAngle = function () {
+          return spherical.theta;
+        };
 
-    			}
+        this.getDistance = function () {
+          return this.object.position.distanceTo(this.target);
+        };
 
-    			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+        this.listenToKeyEvents = function (domElement) {
+          domElement.addEventListener("keydown", onKeyDown);
+          this._domElementKeyEvents = domElement;
+        };
 
-    			const element = scope.domElement;
+        this.stopListenToKeyEvents = function () {
+          this._domElementKeyEvents.removeEventListener("keydown", onKeyDown);
+          this._domElementKeyEvents = null;
+        };
 
-    			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+        this.saveState = function () {
+          scope.target0.copy(scope.target);
+          scope.position0.copy(scope.object.position);
+          scope.zoom0 = scope.object.zoom;
+        };
 
-    			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+        this.reset = function () {
+          scope.target.copy(scope.target0);
+          scope.object.position.copy(scope.position0);
+          scope.object.zoom = scope.zoom0;
 
-    			rotateStart.copy( rotateEnd );
+          scope.object.updateProjectionMatrix();
+          scope.dispatchEvent(_changeEvent$2);
 
-    		}
+          scope.update();
 
-    		function handleTouchMovePan( event ) {
+          scope.state = STATE.NONE;
+        };
 
-    			if ( pointers.length === 1 ) {
+        // this method is exposed, but perhaps it would be better if we can make it private...
+        this.update = (function () {
+          const offset = new Vector3();
 
-    				panEnd.set( event.pageX, event.pageY );
+          // so camera.up is the orbit axis
+          const quat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0));
+          const quatInverse = quat.clone().invert();
 
-    			} else {
+          const lastPosition = new Vector3();
+          const lastQuaternion = new Quaternion();
+          const lastTargetPosition = new Vector3();
 
-    				const position = getSecondPointerPosition( event );
+          const twoPI = 2 * Math.PI;
 
-    				const x = 0.5 * ( event.pageX + position.x );
-    				const y = 0.5 * ( event.pageY + position.y );
+          return function update() {
+            const position = scope.object.position;
 
-    				panEnd.set( x, y );
+            offset.copy(position).sub(scope.target);
 
-    			}
+            // rotate offset to "y-axis-is-up" space
+            offset.applyQuaternion(quat);
 
-    			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+            // angle from z-axis around y-axis
+            spherical.setFromVector3(offset);
 
-    			pan( panDelta.x, panDelta.y );
+            if (scope.autoRotate && scope.state === STATE.NONE) {
+              rotateLeft(getAutoRotationAngle());
+            }
 
-    			panStart.copy( panEnd );
+            if (scope.enableDamping) {
+              spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+              spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+            } else {
+              spherical.theta += sphericalDelta.theta;
+              spherical.phi += sphericalDelta.phi;
+            }
 
-    		}
+            // restrict theta to be between desired limits
 
-    		function handleTouchMoveDolly( event ) {
+            let min = scope.minAzimuthAngle;
+            let max = scope.maxAzimuthAngle;
 
-    			const position = getSecondPointerPosition( event );
+            if (isFinite(min) && isFinite(max)) {
+              if (min < -Math.PI) min += twoPI;
+              else if (min > Math.PI) min -= twoPI;
 
-    			const dx = event.pageX - position.x;
-    			const dy = event.pageY - position.y;
+              if (max < -Math.PI) max += twoPI;
+              else if (max > Math.PI) max -= twoPI;
 
-    			const distance = Math.sqrt( dx * dx + dy * dy );
+              if (min <= max) {
+                spherical.theta = Math.max(min, Math.min(max, spherical.theta));
+              } else {
+                spherical.theta =
+                  spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta);
+              }
+            }
 
-    			dollyEnd.set( 0, distance );
+            // restrict phi to be between desired limits
+            spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
 
-    			dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
+            spherical.makeSafe();
 
-    			dollyOut( dollyDelta.y );
+            spherical.radius *= scope.scale;
 
-    			dollyStart.copy( dollyEnd );
+            // restrict radius to be between desired limits
+            spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
 
-    		}
+            // move target to panned location
 
-    		function handleTouchMoveDollyPan( event ) {
+            if (scope.enableDamping === true) {
+              scope.target.addScaledVector(scope.panOffset, scope.dampingFactor);
+            } else {
+              scope.target.add(scope.panOffset);
+            }
 
-    			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+            offset.setFromSpherical(spherical);
 
-    			if ( scope.enablePan ) handleTouchMovePan( event );
+            // rotate offset back to "camera-up-vector-is-up" space
+            offset.applyQuaternion(quatInverse);
 
-    		}
+            position.copy(scope.target).add(offset);
 
-    		function handleTouchMoveDollyRotate( event ) {
+            scope.object.lookAt(scope.target);
 
-    			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+            if (scope.enableDamping === true) {
+              sphericalDelta.theta *= 1 - scope.dampingFactor;
+              sphericalDelta.phi *= 1 - scope.dampingFactor;
 
-    			if ( scope.enableRotate ) handleTouchMoveRotate( event );
+              scope.panOffset.multiplyScalar(1 - scope.dampingFactor);
+            } else {
+              sphericalDelta.set(0, 0, 0);
 
-    		}
+              scope.panOffset.set(0, 0, 0);
+            }
 
-    		//
-    		// event handlers - FSM: listen for events and reset state
-    		//
+            scope.scale = 1;
 
-    		function onPointerDown( event ) {
+            // update condition is:
+            // min(camera displacement, camera rotation in radians)^2 > EPS
+            // using small-angle approximation cos(x/2) = 1 - x^2 / 8
 
-    			if ( scope.enabled === false ) return;
+            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);
 
-    			if ( pointers.length === 0 ) {
+              lastPosition.copy(scope.object.position);
+              lastQuaternion.copy(scope.object.quaternion);
+              lastTargetPosition.copy(scope.target);
 
-    				scope.domElement.setPointerCapture( event.pointerId );
+              scope.zoomChanged = false;
 
-    				scope.domElement.addEventListener( 'pointermove', onPointerMove );
-    				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+              return true;
+            }
 
-    			}
+            return false;
+          };
+        })();
 
-    			//
+        this.dispose = function () {
+          scope.domElement.removeEventListener("contextmenu", onContextMenu);
 
-    			addPointer( event );
+          scope.domElement.removeEventListener("pointerdown", onPointerDown);
+          scope.domElement.removeEventListener("pointercancel", onPointerUp);
+          scope.domElement.removeEventListener("wheel", onMouseWheel);
 
-    			if ( event.pointerType === 'touch' ) {
+          scope.domElement.removeEventListener("pointermove", onPointerMove);
+          scope.domElement.removeEventListener("pointerup", onPointerUp);
 
-    				onTouchStart( event );
+          if (scope._domElementKeyEvents !== null) {
+            scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown);
+            scope._domElementKeyEvents = null;
+          }
 
-    			} else {
+          //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+        };
 
-    				onMouseDown( event );
+        //
+        // internals
+        //
 
-    			}
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const scope = this;
 
-    		}
+        scope.state = STATE.NONE;
 
-    		function onPointerMove( event ) {
+        const EPS = 0.000001;
 
-    			if ( scope.enabled === false ) return;
+        // current position in spherical coordinates
+        const spherical = new Spherical();
+        const sphericalDelta = new Spherical();
 
-    			if ( event.pointerType === 'touch' ) {
+        scope.scale = 1;
+        scope.panOffset = new Vector3();
+        scope.zoomChanged = false;
 
-    				onTouchMove( event );
+        scope.rotateStart = new Vector2();
+        scope.rotateEnd = new Vector2();
+        scope.rotateDelta = new Vector2();
 
-    			} else {
+        scope.panStart = new Vector2();
+        scope.panEnd = new Vector2();
+        scope.panDelta = new Vector2();
 
-    				onMouseMove( event );
+        scope.dollyStart = new Vector2();
+        scope.dollyEnd = new Vector2();
+        scope.dollyDelta = new Vector2();
+        scope.dollyScale = 0;
 
-    			}
+        scope.pointers = [];
+        scope.pointerPositions = {};
 
-    		}
+        function getAutoRotationAngle() {
+          return ((2 * Math.PI) / 60 / 60) * scope.autoRotateSpeed;
+        }
 
-    		function onPointerUp( event ) {
+        function getZoomScale() {
+          return Math.pow(0.95, scope.zoomSpeed);
+        }
 
-    			removePointer( event );
+        function rotateLeft(angle) {
+          sphericalDelta.theta -= angle;
+        }
 
-    			if ( pointers.length === 0 ) {
+        function rotateUp(angle) {
+          sphericalDelta.phi -= angle;
+        }
 
-    				scope.domElement.releasePointerCapture( event.pointerId );
+        const panLeft = (function () {
+          const v = new Vector3();
 
-    				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-    				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+          return function panLeft(distance, objectMatrix) {
+            v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
+            v.multiplyScalar(-distance);
 
-    			}
+            scope.panOffset.add(v);
+          };
+        })();
 
-    			scope.dispatchEvent( _endEvent );
+        const panUp = (function () {
+          const v = new Vector3();
 
-    			state = STATE.NONE;
+          return function panUp(distance, objectMatrix) {
+            if (scope.screenSpacePanning === true) {
+              v.setFromMatrixColumn(objectMatrix, 1);
+            } else {
+              v.setFromMatrixColumn(objectMatrix, 0);
+              v.crossVectors(scope.object.up, v);
+            }
 
-    		}
+            v.multiplyScalar(distance);
+
+            scope.panOffset.add(v);
+          };
+        })();
+
+        // deltaX and deltaY are in pixels; right and down are positive
+        const pan = (function () {
+          const offset = new Vector3();
+
+          return function pan(deltaX, deltaY) {
+            const element = scope.domElement;
+
+            if (scope.object.isPerspectiveCamera) {
+              // perspective
+              const position = scope.object.position;
+              offset.copy(position).sub(scope.target);
+              let targetDistance = offset.length();
+
+              // half of the fov is center to top of screen
+              targetDistance *= Math.tan(((scope.object.fov / 2) * Math.PI) / 180.0);
+
+              // we use only clientHeight here so aspect ratio does not distort speed
+              panLeft((2 * deltaX * targetDistance) / element.clientHeight, scope.object.matrix);
+              panUp((2 * deltaY * targetDistance) / element.clientHeight, scope.object.matrix);
+            } else if (scope.object.isOrthographicCamera) {
+              // orthographic
+              panLeft(
+                (deltaX * (scope.object.right - scope.object.left)) / scope.object.zoom / element.clientWidth,
+                scope.object.matrix
+              );
+              panUp(
+                (deltaY * (scope.object.top - scope.object.bottom)) / scope.object.zoom / element.clientHeight,
+                scope.object.matrix
+              );
+            } else {
+              // camera neither orthographic nor perspective
+              console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.");
+              scope.enablePan = false;
+            }
+          };
+        })();
+
+        function dollyOut(dollyScale) {
+          if (scope.object.isPerspectiveCamera) {
+            scope.scale /= dollyScale;
+          } else if (scope.object.isOrthographicCamera) {
+            scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
+            scope.object.updateProjectionMatrix();
+            scope.zoomChanged = true;
+          } else {
+            console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
+            scope.enableZoom = false;
+          }
+        }
 
-    		function onMouseDown( event ) {
+        function dollyIn(dollyScale) {
+          if (scope.object.isPerspectiveCamera) {
+            scope.scale *= dollyScale;
+          } else if (scope.object.isOrthographicCamera) {
+            scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
+            scope.object.updateProjectionMatrix();
+            scope.zoomChanged = true;
+          } else {
+            console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
+            scope.enableZoom = false;
+          }
+        }
 
-    			let mouseAction;
+        //
+        // event callbacks - update the object state
+        //
 
-    			switch ( event.button ) {
+        function handleMouseDownRotate(event) {
+          scope.rotateStart.set(event.clientX, event.clientY);
+        }
 
-    				case 0:
+        function handleMouseDownDolly(event) {
+          scope.dollyStart.set(event.clientX, event.clientY);
+        }
 
-    					mouseAction = scope.mouseButtons.LEFT;
-    					break;
+        function handleMouseDownPan(event) {
+          scope.panStart.set(event.clientX, event.clientY);
+        }
 
-    				case 1:
+        function handleMouseMoveRotate(event) {
+          scope.rotateEnd.set(event.clientX, event.clientY);
 
-    					mouseAction = scope.mouseButtons.MIDDLE;
-    					break;
+          scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
 
-    				case 2:
+          const element = scope.domElement;
 
-    					mouseAction = scope.mouseButtons.RIGHT;
-    					break;
+          rotateLeft((2 * Math.PI * scope.rotateDelta.x) / element.clientHeight); // yes, height
 
-    				default:
-
-    					mouseAction = - 1;
+          rotateUp((2 * Math.PI * scope.rotateDelta.y) / element.clientHeight);
 
-    			}
+          scope.rotateStart.copy(scope.rotateEnd);
 
-    			switch ( mouseAction ) {
+          scope.update();
+        }
 
-    				case MOUSE.DOLLY:
+        function handleMouseMoveDolly(event) {
+          scope.dollyEnd.set(event.clientX, event.clientY);
 
-    					if ( scope.enableZoom === false ) return;
+          scope.dollyDelta.subVectors(scope.dollyEnd, scope.dollyStart);
 
-    					handleMouseDownDolly( event );
+          if (scope.dollyDelta.y < 0) {
+            scope.dollyScale = 1 / getZoomScale();
+            dollyOut(getZoomScale());
+          } else if (scope.dollyDelta.y > 0) {
+            scope.dollyScale = getZoomScale();
+            dollyIn(getZoomScale());
+          }
 
-    					state = STATE.DOLLY;
+          scope.dollyStart.copy(scope.dollyEnd);
 
-    					break;
+          scope.update();
+        }
 
-    				case MOUSE.ROTATE:
+        function handleMouseMovePan(event) {
+          scope.panEnd.set(event.clientX, event.clientY);
 
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+          scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
 
-    						if ( scope.enablePan === false ) return;
+          pan(scope.panDelta.x, scope.panDelta.y);
 
-    						handleMouseDownPan( event );
+          scope.panStart.copy(scope.panEnd);
 
-    						state = STATE.PAN;
+          scope.update();
+        }
 
-    					} else {
+        function handleMouseWheel(event) {
+          scope.dollyEnd.set(scope.domElement.clientWidth / 2, scope.domElement.clientHeight / 2);
 
-    						if ( scope.enableRotate === false ) return;
+          scope.dollyDelta.set(event.deltaX, event.deltaY);
 
-    						handleMouseDownRotate( event );
+          if (event.deltaY < 0) {
+            scope.dollyScale = 1 / getZoomScale();
+            dollyIn(getZoomScale());
+          } else if (event.deltaY > 0) {
+            scope.dollyScale = getZoomScale();
+            dollyOut(getZoomScale());
+          }
 
-    						state = STATE.ROTATE;
+          scope.dollyStart.copy(scope.dollyEnd);
 
-    					}
+          scope.update();
 
-    					break;
+          if (event.deltaY !== 0) {
+            scope.state = STATE.DOLLY;
+            scope.dispatchEvent(_changeEvent$2);
+            scope.state = STATE.NONE;
+          }
+        }
 
-    				case MOUSE.PAN:
+        function handleKeyDown(event) {
+          let needsUpdate = false;
+
+          switch (event.code) {
+            case scope.keys.UP:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                rotateUp((2 * Math.PI * scope.rotateSpeed) / scope.domElement.clientHeight);
+              } else {
+                pan(0, scope.keyPanSpeed);
+              }
+
+              needsUpdate = true;
+              break;
+
+            case scope.keys.BOTTOM:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                rotateUp((-2 * Math.PI * scope.rotateSpeed) / scope.domElement.clientHeight);
+              } else {
+                pan(0, -scope.keyPanSpeed);
+              }
+
+              needsUpdate = true;
+              break;
+
+            case scope.keys.LEFT:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                rotateLeft((2 * Math.PI * scope.rotateSpeed) / scope.domElement.clientHeight);
+              } else {
+                pan(scope.keyPanSpeed, 0);
+              }
+
+              needsUpdate = true;
+              break;
+
+            case scope.keys.RIGHT:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                rotateLeft((-2 * Math.PI * scope.rotateSpeed) / scope.domElement.clientHeight);
+              } else {
+                pan(-scope.keyPanSpeed, 0);
+              }
+
+              needsUpdate = true;
+              break;
+          }
+
+          if (needsUpdate) {
+            // prevent the browser from scrolling on cursor keys
+            event.preventDefault();
+
+            scope.update();
+          }
+        }
 
-    					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+        function handleTouchStartRotate() {
+          if (scope.pointers.length === 1) {
+            scope.rotateStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+          } else {
+            const x = 0.5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+            const y = 0.5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
 
-    						if ( scope.enableRotate === false ) return;
+            scope.rotateStart.set(x, y);
+          }
+        }
 
-    						handleMouseDownRotate( event );
+        function handleTouchStartPan() {
+          if (scope.pointers.length === 1) {
+            scope.panStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+          } else {
+            const x = 0.5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+            const y = 0.5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
 
-    						state = STATE.ROTATE;
+            scope.panStart.set(x, y);
+          }
+        }
 
-    					} else {
+        function handleTouchStartDolly() {
+          const dx = scope.pointers[0].pageX - scope.pointers[1].pageX;
+          const dy = scope.pointers[0].pageY - scope.pointers[1].pageY;
 
-    						if ( scope.enablePan === false ) return;
+          const distance = Math.sqrt(dx * dx + dy * dy);
 
-    						handleMouseDownPan( event );
+          scope.dollyStart.set(0, distance);
+        }
 
-    						state = STATE.PAN;
+        function handleTouchStartDollyPan() {
+          if (scope.enableZoom) handleTouchStartDolly();
 
-    					}
+          if (scope.enablePan) handleTouchStartPan();
+        }
 
-    					break;
+        function handleTouchStartDollyRotate() {
+          if (scope.enableZoom) handleTouchStartDolly();
 
-    				default:
+          if (scope.enableRotate) handleTouchStartRotate();
+        }
 
-    					state = STATE.NONE;
+        function handleTouchMoveRotate(event) {
+          if (scope.pointers.length == 1) {
+            scope.rotateEnd.set(event.pageX, event.pageY);
+          } else {
+            const position = getSecondPointerPosition(event);
 
-    			}
+            const x = 0.5 * (event.pageX + position.x);
+            const y = 0.5 * (event.pageY + position.y);
 
-    			if ( state !== STATE.NONE ) {
+            scope.rotateEnd.set(x, y);
+          }
 
-    				scope.dispatchEvent( _startEvent );
+          scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
 
-    			}
+          const element = scope.domElement;
 
-    		}
+          rotateLeft((2 * Math.PI * scope.rotateDelta.x) / element.clientHeight); // yes, height
 
-    		function onMouseMove( event ) {
+          rotateUp((2 * Math.PI * scope.rotateDelta.y) / element.clientHeight);
 
-    			switch ( state ) {
+          scope.rotateStart.copy(scope.rotateEnd);
+        }
 
-    				case STATE.ROTATE:
+        function handleTouchMovePan(event) {
+          if (scope.pointers.length === 1) {
+            scope.panEnd.set(event.pageX, event.pageY);
+          } else {
+            const position = getSecondPointerPosition(event);
 
-    					if ( scope.enableRotate === false ) return;
+            const x = 0.5 * (event.pageX + position.x);
+            const y = 0.5 * (event.pageY + position.y);
 
-    					handleMouseMoveRotate( event );
+            scope.panEnd.set(x, y);
+          }
 
-    					break;
+          scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
 
-    				case STATE.DOLLY:
+          pan(scope.panDelta.x, scope.panDelta.y);
 
-    					if ( scope.enableZoom === false ) return;
+          scope.panStart.copy(scope.panEnd);
+        }
 
-    					handleMouseMoveDolly( event );
+        function handleTouchMoveDolly(event) {
+          const position = getSecondPointerPosition(event);
 
-    					break;
+          const dx = event.pageX - position.x;
+          const dy = event.pageY - position.y;
 
-    				case STATE.PAN:
+          const distance = Math.sqrt(dx * dx + dy * dy);
 
-    					if ( scope.enablePan === false ) return;
+          scope.dollyEnd.set(0, distance);
 
-    					handleMouseMovePan( event );
+          scope.dollyDelta.set(0, Math.pow(scope.dollyEnd.y / scope.dollyStart.y, scope.zoomSpeed));
 
-    					break;
+          dollyOut(scope.dollyDelta.y);
 
-    			}
+          scope.dollyStart.copy(scope.dollyEnd);
+        }
 
-    		}
+        function handleTouchMoveDollyPan(event) {
+          if (scope.enableZoom) handleTouchMoveDolly(event);
 
-    		function onMouseWheel( event ) {
+          if (scope.enablePan) handleTouchMovePan(event);
+        }
 
-    			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
+        function handleTouchMoveDollyRotate(event) {
+          if (scope.enableZoom) handleTouchMoveDolly(event);
 
-    			event.preventDefault();
+          if (scope.enableRotate) handleTouchMoveRotate(event);
+        }
 
-    			scope.dispatchEvent( _startEvent );
+        //
+        // event handlers - FSM: listen for events and reset state
+        //
 
-    			handleMouseWheel( event );
+        function onPointerDown(event) {
+          if (scope.enabled === false) return;
 
-    			scope.dispatchEvent( _endEvent );
+          if (scope.pointers.length === 0) {
+            scope.domElement.setPointerCapture(event.pointerId);
 
-    		}
+            scope.domElement.addEventListener("pointermove", onPointerMove);
+            scope.domElement.addEventListener("pointerup", onPointerUp);
+          }
 
-    		function onKeyDown( event ) {
+          //
 
-    			if ( scope.enabled === false || scope.enablePan === false ) return;
+          addPointer(event);
 
-    			handleKeyDown( event );
+          if (event.pointerType === "touch") {
+            onTouchStart(event);
+          } else {
+            onMouseDown(event);
+          }
+        }
 
-    		}
+        function onPointerMove(event) {
+          if (scope.enabled === false) return;
 
-    		function onTouchStart( event ) {
+          if (event.pointerType === "touch") {
+            onTouchMove(event);
+          } else {
+            onMouseMove(event);
+          }
+        }
 
-    			trackPointer( event );
+        function onPointerUp(event) {
+          removePointer(event);
 
-    			switch ( pointers.length ) {
+          if (scope.pointers.length === 0) {
+            scope.domElement.releasePointerCapture(event.pointerId);
 
-    				case 1:
+            scope.domElement.removeEventListener("pointermove", onPointerMove);
+            scope.domElement.removeEventListener("pointerup", onPointerUp);
+          }
 
-    					switch ( scope.touches.ONE ) {
+          scope.dispatchEvent(_endEvent);
 
-    						case TOUCH.ROTATE:
+          scope.state = STATE.NONE;
+        }
 
-    							if ( scope.enableRotate === false ) return;
+        function onMouseDown(event) {
+          let mouseAction;
 
-    							handleTouchStartRotate();
+          switch (event.button) {
+            case 0:
+              mouseAction = scope.mouseButtons.LEFT;
+              break;
 
-    							state = STATE.TOUCH_ROTATE;
+            case 1:
+              mouseAction = scope.mouseButtons.MIDDLE;
+              break;
 
-    							break;
+            case 2:
+              mouseAction = scope.mouseButtons.RIGHT;
+              break;
 
-    						case TOUCH.PAN:
+            default:
+              mouseAction = -1;
+          }
 
-    							if ( scope.enablePan === false ) return;
+          switch (mouseAction) {
+            case MOUSE.DOLLY:
+              if (scope.enableZoom === false) return;
 
-    							handleTouchStartPan();
+              handleMouseDownDolly(event);
 
-    							state = STATE.TOUCH_PAN;
+              scope.state = STATE.DOLLY;
 
-    							break;
+              break;
 
-    						default:
+            case MOUSE.ROTATE:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                if (scope.enablePan === false) return;
 
-    							state = STATE.NONE;
+                handleMouseDownPan(event);
 
-    					}
+                scope.state = STATE.PAN;
+              } else {
+                if (scope.enableRotate === false) return;
 
-    					break;
+                handleMouseDownRotate(event);
 
-    				case 2:
+                scope.state = STATE.ROTATE;
+              }
 
-    					switch ( scope.touches.TWO ) {
+              break;
 
-    						case TOUCH.DOLLY_PAN:
+            case MOUSE.PAN:
+              if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                if (scope.enableRotate === false) return;
 
-    							if ( scope.enableZoom === false && scope.enablePan === false ) return;
+                handleMouseDownRotate(event);
 
-    							handleTouchStartDollyPan();
+                scope.state = STATE.ROTATE;
+              } else {
+                if (scope.enablePan === false) return;
 
-    							state = STATE.TOUCH_DOLLY_PAN;
+                handleMouseDownPan(event);
 
-    							break;
+                scope.state = STATE.PAN;
+              }
 
-    						case TOUCH.DOLLY_ROTATE:
+              break;
 
-    							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+            default:
+              scope.state = STATE.NONE;
+          }
 
-    							handleTouchStartDollyRotate();
+          if (scope.state !== STATE.NONE) {
+            scope.dispatchEvent(_startEvent);
+          }
+        }
 
-    							state = STATE.TOUCH_DOLLY_ROTATE;
+        function onMouseMove(event) {
+          switch (scope.state) {
+            case STATE.ROTATE:
+              if (scope.enableRotate === false) return;
 
-    							break;
+              handleMouseMoveRotate(event);
 
-    						default:
+              break;
 
-    							state = STATE.NONE;
+            case STATE.DOLLY:
+              if (scope.enableZoom === false) return;
 
-    					}
+              handleMouseMoveDolly(event);
 
-    					break;
+              break;
 
-    				default:
+            case STATE.PAN:
+              if (scope.enablePan === false) return;
 
-    					state = STATE.NONE;
+              handleMouseMovePan(event);
 
-    			}
+              break;
+          }
+        }
 
-    			if ( state !== STATE.NONE ) {
+        function onMouseWheel(event) {
+          if (scope.enabled === false || scope.enableZoom === false || scope.state !== STATE.NONE) return;
 
-    				scope.dispatchEvent( _startEvent );
+          event.preventDefault();
 
-    			}
+          scope.dispatchEvent(_startEvent);
 
-    		}
+          handleMouseWheel(event);
 
-    		function onTouchMove( event ) {
+          scope.dispatchEvent(_endEvent);
+        }
 
-    			trackPointer( event );
+        function onKeyDown(event) {
+          if (scope.enabled === false || scope.enablePan === false) return;
 
-    			switch ( state ) {
+          handleKeyDown(event);
+        }
 
-    				case STATE.TOUCH_ROTATE:
+        function onTouchStart(event) {
+          trackPointer(event);
 
-    					if ( scope.enableRotate === false ) return;
+          switch (scope.pointers.length) {
+            case 1:
+              switch (scope.touches.ONE) {
+                case TOUCH.ROTATE:
+                  if (scope.enableRotate === false) return;
 
-    					handleTouchMoveRotate( event );
+                  handleTouchStartRotate();
 
-    					scope.update();
+                  scope.state = STATE.TOUCH_ROTATE;
 
-    					break;
+                  break;
 
-    				case STATE.TOUCH_PAN:
+                case TOUCH.PAN:
+                  if (scope.enablePan === false) return;
 
-    					if ( scope.enablePan === false ) return;
+                  handleTouchStartPan();
 
-    					handleTouchMovePan( event );
+                  scope.state = STATE.TOUCH_PAN;
 
-    					scope.update();
+                  break;
 
-    					break;
+                default:
+                  scope.state = STATE.NONE;
+              }
 
-    				case STATE.TOUCH_DOLLY_PAN:
+              break;
 
-    					if ( scope.enableZoom === false && scope.enablePan === false ) return;
+            case 2:
+              switch (scope.touches.TWO) {
+                case TOUCH.DOLLY_PAN:
+                  if (scope.enableZoom === false && scope.enablePan === false) return;
 
-    					handleTouchMoveDollyPan( event );
+                  handleTouchStartDollyPan();
 
-    					scope.update();
+                  scope.state = STATE.TOUCH_DOLLY_PAN;
 
-    					break;
+                  break;
 
-    				case STATE.TOUCH_DOLLY_ROTATE:
+                case TOUCH.DOLLY_ROTATE:
+                  if (scope.enableZoom === false && scope.enableRotate === false) return;
 
-    					if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+                  handleTouchStartDollyRotate();
 
-    					handleTouchMoveDollyRotate( event );
+                  scope.state = STATE.TOUCH_DOLLY_ROTATE;
 
-    					scope.update();
+                  break;
 
-    					break;
+                default:
+                  scope.state = STATE.NONE;
+              }
 
-    				default:
+              break;
 
-    					state = STATE.NONE;
+            default:
+              scope.state = STATE.NONE;
+          }
 
-    			}
+          if (scope.state !== STATE.NONE) {
+            scope.dispatchEvent(_startEvent);
+          }
+        }
 
-    		}
+        function onTouchMove(event) {
+          trackPointer(event);
 
-    		function onContextMenu( event ) {
+          switch (scope.state) {
+            case STATE.TOUCH_ROTATE:
+              if (scope.enableRotate === false) return;
 
-    			if ( scope.enabled === false ) return;
+              handleTouchMoveRotate(event);
 
-    			event.preventDefault();
+              scope.update();
 
-    		}
+              break;
 
-    		function addPointer( event ) {
+            case STATE.TOUCH_PAN:
+              if (scope.enablePan === false) return;
 
-    			pointers.push( event );
+              handleTouchMovePan(event);
 
-    		}
+              scope.update();
 
-    		function removePointer( event ) {
+              break;
 
-    			delete pointerPositions[ event.pointerId ];
+            case STATE.TOUCH_DOLLY_PAN:
+              if (scope.enableZoom === false && scope.enablePan === false) return;
 
-    			for ( let i = 0; i < pointers.length; i ++ ) {
+              handleTouchMoveDollyPan(event);
 
-    				if ( pointers[ i ].pointerId == event.pointerId ) {
+              scope.update();
 
-    					pointers.splice( i, 1 );
-    					return;
+              break;
 
-    				}
+            case STATE.TOUCH_DOLLY_ROTATE:
+              if (scope.enableZoom === false && scope.enableRotate === false) return;
 
-    			}
+              handleTouchMoveDollyRotate(event);
 
-    		}
+              scope.update();
 
-    		function trackPointer( event ) {
+              break;
 
-    			let position = pointerPositions[ event.pointerId ];
-
-    			if ( position === undefined ) {
+            default:
+              scope.state = STATE.NONE;
+          }
+        }
 
-    				position = new Vector2();
-    				pointerPositions[ event.pointerId ] = position;
+        function onContextMenu(event) {
+          if (scope.enabled === false) return;
 
-    			}
+          event.preventDefault();
+        }
 
-    			position.set( event.pageX, event.pageY );
+        function addPointer(event) {
+          scope.pointers.push(event);
+        }
 
-    		}
+        function removePointer(event) {
+          delete scope.pointerPositions[event.pointerId];
 
-    		function getSecondPointerPosition( event ) {
+          for (let i = 0; i < scope.pointers.length; i++) {
+            if (scope.pointers[i].pointerId == event.pointerId) {
+              scope.pointers.splice(i, 1);
+              return;
+            }
+          }
+        }
 
-    			const pointer = ( event.pointerId === pointers[ 0 ].pointerId ) ? pointers[ 1 ] : pointers[ 0 ];
+        function trackPointer(event) {
+          let position = scope.pointerPositions[event.pointerId];
 
-    			return pointerPositions[ pointer.pointerId ];
+          if (position === undefined) {
+            position = new Vector2();
+            scope.pointerPositions[event.pointerId] = position;
+          }
 
-    		}
+          position.set(event.pageX, event.pageY);
+        }
 
-    		//
+        function getSecondPointerPosition(event) {
+          const pointer = event.pointerId === scope.pointers[0].pointerId ? scope.pointers[1] : scope.pointers[0];
 
-    		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
+          return scope.pointerPositions[pointer.pointerId];
+        }
 
-    		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
-    		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
-    		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+        //
 
-    		// force an update at start
+        scope.domElement.addEventListener("contextmenu", onContextMenu);
 
-    		this.update();
+        scope.domElement.addEventListener("pointerdown", onPointerDown);
+        scope.domElement.addEventListener("pointercancel", onPointerUp);
+        scope.domElement.addEventListener("wheel", onMouseWheel, { passive: false });
 
-    	}
+        // force an update at start
 
+        this.update();
+      }
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -44206,6 +43964,26 @@
             this.controlsChange = () => {
                 this.viewer.target.copy(this.orbit.target);
                 this.viewer.update();
+                switch (this.orbit.state) {
+                    case STATE.PAN:
+                    case STATE.TOUCH_PAN:
+                        this.viewer.emitEvent({
+                            type: "pan",
+                            x: this.orbit.panEnd.x,
+                            y: this.orbit.panEnd.y,
+                            dX: this.orbit.panDelta.x,
+                            dY: this.orbit.panDelta.y,
+                        });
+                        break;
+                    case STATE.DOLLY:
+                        this.viewer.emitEvent({
+                            type: "zoomat",
+                            data: this.orbit.dollyScale,
+                            x: this.orbit.dollyEnd.x,
+                            y: this.orbit.dollyEnd.y,
+                        });
+                        break;
+                }
                 this.changed = true;
             };
             this.stopContextMenu = (event) => {
@@ -44230,10 +44008,10 @@
             this.updateControls();
         }
         dispose() {
-            this.viewer.off("contextmenu", this.stopContextMenu);
-            this.viewer.off("zoom", this.updateControls);
-            this.viewer.off("viewposition", this.updateControls);
             this.viewer.off("geometryend", this.updateControls);
+            this.viewer.off("viewposition", this.updateControls);
+            this.viewer.off("zoom", this.updateControls);
+            this.viewer.off("contextmenu", this.stopContextMenu);
             this.orbit.removeEventListener("change", this.controlsChange);
             this.orbit.dispose();
         }
@@ -46937,18 +46715,18 @@
                 return;
             if (!this.renderer)
                 return;
-            const clippingPlanes = this.renderer.clippingPlanes;
+            this.renderNeeded = false;
             this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
+            this.renderer.autoClear = true;
             this.renderer.render(this.scene, this.camera);
+            const clippingPlanes = this.renderer.clippingPlanes;
             this.renderer.clippingPlanes = [];
             this.renderer.autoClear = false;
             this.renderer.render(this.helpers, this.camera);
+            this.renderer.clippingPlanes = clippingPlanes;
             const deltaTime = (time - this.renderTime) / 1000;
             this.renderTime = time;
             this.emitEvent({ type: "render", time, deltaTime });
-            this.renderer.autoClear = true;
-            this.renderer.clippingPlanes = clippingPlanes;
-            this.renderNeeded = false;
         }
         update(force = false) {
             this.renderNeeded = true;
@@ -47145,6 +46923,30 @@
             this.update(true);
             return this;
         }
+        getSelected() {
+            return this.executeCommand("getSelected");
+        }
+        setSelected(handles) {
+            this.executeCommand("setSelected", handles);
+        }
+        clearSelected() {
+            this.executeCommand("clearSelected");
+        }
+        hideSelected() {
+            this.executeCommand("hideSelected");
+        }
+        isolateSelected() {
+            this.executeCommand("isolateSelected");
+        }
+        showAll() {
+            this.executeCommand("showAll");
+        }
+        explode(index = 0) {
+            this.executeCommand("explode", index);
+        }
+        collect() {
+            this.executeCommand("collect");
+        }
         activeDragger() {
             return this._activeDragger;
         }
@@ -47184,12 +46986,6 @@
         is3D() {
             return true;
         }
-        getSelected() {
-            return this.executeCommand("getSelected");
-        }
-        setSelected(handles) {
-            this.executeCommand("setSelected", handles);
-        }
         executeCommand(id, ...args) {
             return commands("ThreeJS").executeCommand(id, this, ...args);
         }