@inweb/viewer-three 25.10.0 → 25.11.0

package/dist/viewer-three.module.js

@@ -1,9 +1,7 @@
-import { Box3, Vector3, Sphere, Vector2, Raycaster, MeshBasicMaterial, LoadingManager, LoaderUtils, MOUSE, TOUCH, EventDispatcher, Clock, Quaternion, Object3D, Euler, Matrix4, LineBasicMaterial, CylinderGeometry, BoxGeometry, BufferGeometry, Float32BufferAttribute, Mesh, OctahedronGeometry, Line, SphereGeometry, TorusGeometry, PlaneGeometry, DoubleSide, Plane, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Vector4, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Clock, Object3D, Euler, Matrix4, LineBasicMaterial, CylinderGeometry, BoxGeometry, BufferGeometry, Float32BufferAttribute, Mesh, OctahedronGeometry, Line, SphereGeometry, TorusGeometry, PlaneGeometry, DoubleSide, Plane, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Vector4, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 
 class Commands {
@@ -105,7 +103,8 @@ function defaultOptions() {
         reverseZoomWheel: false,
         enableZoomWheel: true,
         enableGestures: true,
-        geometryType: "vsfx"
+        geometryType: "vsfx",
+        rulerUnit: "Default"
     };
 }
 
@@ -365,6 +364,13 @@ class Options {
         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" ];
@@ -390,6 +396,101 @@ commands("ThreeJS").registerCommand("clearMarkup", (viewer => console.warn("clea
 
 commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");
 
+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: facesColor, facesTransparancy: 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: facesColor, facesTransparancy: 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 clearSelected(viewer) {
+    const selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    selection.dispose();
+    viewer.update();
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: []
+    });
+}
+
+commands("ThreeJS").registerCommand("clearSelected", clearSelected);
+
+commands("ThreeJS").registerCommandAlias("clearSelected", "unselect");
+
 function clearSlices(viewer) {
     viewer.renderer.clippingPlanes = [];
     viewer.update();
@@ -444,7 +545,7 @@ function explodeScene(scene, scale = 0) {
 function explode(viewer, index = 0) {
     viewer.models.forEach((gltf => explodeScene(gltf.scene, index)));
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "explode",
         data: index
     });
@@ -550,95 +651,16 @@ function getSelected(viewer) {
 
 commands("ThreeJS").registerCommand("getSelected", getSelected);
 
-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: facesColor, facesTransparancy: 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: facesColor, facesTransparancy: 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 hideSelected(viewer) {
     viewer.selected.forEach((object => object.visible = false));
     const selection = new SelectionComponent(viewer);
     selection.clearSelection();
     selection.dispose();
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "hide"
     });
-    viewer.emit({
+    viewer.emitEvent({
         type: "select",
         data: undefined,
         handles: []
@@ -659,7 +681,7 @@ function isolateSelected(viewer) {
     }
     isolateObject(viewer.scene, 0);
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "isolate"
     });
 }
@@ -680,7 +702,7 @@ function resetView(viewer) {
     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);
@@ -722,7 +744,7 @@ function setSelected(viewer, handles = []) {
     objects.forEach((object => selection.select(object)));
     selection.dispose();
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "select",
         data: undefined,
         handles: handles
@@ -734,27 +756,13 @@ commands("ThreeJS").registerCommand("setSelected", setSelected);
 function showAll(viewer) {
     viewer.scene.traverse((object => object.visible = true));
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "showall"
     });
 }
 
 commands("ThreeJS").registerCommand("showAll", showAll);
 
-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);
-
 function zoomToExtents(viewer) {
     if (viewer.extents.isEmpty()) return;
     const center = viewer.extents.getCenter(new Vector3);
@@ -891,6 +899,695 @@ class EventEmitter2 {
     }
 }
 
+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();
+        this.object = object;
+        this.domElement = domElement;
+        this.domElement.style.touchAction = "none";
+        this.enabled = true;
+        this.target = new Vector3;
+        this.minDistance = 0;
+        this.maxDistance = Infinity;
+        this.minZoom = 0;
+        this.maxZoom = Infinity;
+        this.minPolarAngle = 0;
+        this.maxPolarAngle = Math.PI;
+        this.minAzimuthAngle = -Infinity;
+        this.maxAzimuthAngle = Infinity;
+        this.enableDamping = false;
+        this.dampingFactor = .05;
+        this.enableZoom = true;
+        this.zoomSpeed = 1;
+        this.enableRotate = true;
+        this.rotateSpeed = 1;
+        this.enablePan = true;
+        this.panSpeed = 1;
+        this.screenSpacePanning = true;
+        this.keyPanSpeed = 7;
+        this.autoRotate = false;
+        this.autoRotateSpeed = 2;
+        this.keys = {
+            LEFT: "ArrowLeft",
+            UP: "ArrowUp",
+            RIGHT: "ArrowRight",
+            BOTTOM: "ArrowDown"
+        };
+        this.mouseButtons = {
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.DOLLY,
+            RIGHT: MOUSE.PAN
+        };
+        this.touches = {
+            ONE: TOUCH.ROTATE,
+            TWO: TOUCH.DOLLY_PAN
+        };
+        this.target0 = this.target.clone();
+        this.position0 = this.object.position.clone();
+        this.zoom0 = this.object.zoom;
+        this._domElementKeyEvents = null;
+        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();
+            scope.state = STATE.NONE;
+        };
+        this.update = function() {
+            const offset = new Vector3;
+            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);
+                offset.applyQuaternion(quat);
+                spherical.setFromVector3(offset);
+                if (scope.autoRotate && scope.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;
+                }
+                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);
+                    }
+                }
+                spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
+                spherical.makeSafe();
+                spherical.radius *= scope.scale;
+                spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
+                if (scope.enableDamping === true) {
+                    scope.target.addScaledVector(scope.panOffset, scope.dampingFactor);
+                } else {
+                    scope.target.add(scope.panOffset);
+                }
+                offset.setFromSpherical(spherical);
+                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;
+                    scope.panOffset.multiplyScalar(1 - scope.dampingFactor);
+                } else {
+                    sphericalDelta.set(0, 0, 0);
+                    scope.panOffset.set(0, 0, 0);
+                }
+                scope.scale = 1;
+                if (scope.zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS || lastTargetPosition.distanceToSquared(scope.target) > 0) {
+                    scope.dispatchEvent(_changeEvent$2);
+                    lastPosition.copy(scope.object.position);
+                    lastQuaternion.copy(scope.object.quaternion);
+                    lastTargetPosition.copy(scope.target);
+                    scope.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;
+            }
+        };
+        const scope = this;
+        scope.state = STATE.NONE;
+        const EPS = 1e-6;
+        const spherical = new Spherical;
+        const sphericalDelta = new Spherical;
+        scope.scale = 1;
+        scope.panOffset = new Vector3;
+        scope.zoomChanged = false;
+        scope.rotateStart = new Vector2;
+        scope.rotateEnd = new Vector2;
+        scope.rotateDelta = new Vector2;
+        scope.panStart = new Vector2;
+        scope.panEnd = new Vector2;
+        scope.panDelta = new Vector2;
+        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 getZoomScale() {
+            return Math.pow(.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);
+                v.multiplyScalar(-distance);
+                scope.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);
+                scope.panOffset.add(v);
+            };
+        }();
+        const pan = function() {
+            const offset = new Vector3;
+            return function pan(deltaX, deltaY) {
+                const element = scope.domElement;
+                if (scope.object.isPerspectiveCamera) {
+                    const position = scope.object.position;
+                    offset.copy(position).sub(scope.target);
+                    let targetDistance = offset.length();
+                    targetDistance *= Math.tan(scope.object.fov / 2 * Math.PI / 180);
+                    panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix);
+                    panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix);
+                } else if (scope.object.isOrthographicCamera) {
+                    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 {
+                    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 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;
+            }
+        }
+        function handleMouseDownRotate(event) {
+            scope.rotateStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseDownDolly(event) {
+            scope.dollyStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseDownPan(event) {
+            scope.panStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseMoveRotate(event) {
+            scope.rotateEnd.set(event.clientX, event.clientY);
+            scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
+            const element = scope.domElement;
+            rotateLeft(2 * Math.PI * scope.rotateDelta.x / element.clientHeight);
+            rotateUp(2 * Math.PI * scope.rotateDelta.y / element.clientHeight);
+            scope.rotateStart.copy(scope.rotateEnd);
+            scope.update();
+        }
+        function handleMouseMoveDolly(event) {
+            scope.dollyEnd.set(event.clientX, event.clientY);
+            scope.dollyDelta.subVectors(scope.dollyEnd, scope.dollyStart);
+            if (scope.dollyDelta.y < 0) {
+                scope.dollyScale = 1 / getZoomScale();
+                dollyOut(getZoomScale());
+            } else if (scope.dollyDelta.y > 0) {
+                scope.dollyScale = getZoomScale();
+                dollyIn(getZoomScale());
+            }
+            scope.dollyStart.copy(scope.dollyEnd);
+            scope.update();
+        }
+        function handleMouseMovePan(event) {
+            scope.panEnd.set(event.clientX, event.clientY);
+            scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
+            pan(scope.panDelta.x, scope.panDelta.y);
+            scope.panStart.copy(scope.panEnd);
+            scope.update();
+        }
+        function handleMouseWheel(event) {
+            scope.dollyEnd.set(scope.domElement.clientWidth / 2, scope.domElement.clientHeight / 2);
+            scope.dollyDelta.set(event.deltaX, event.deltaY);
+            if (event.deltaY < 0) {
+                scope.dollyScale = 1 / getZoomScale();
+                dollyIn(getZoomScale());
+            } else if (event.deltaY > 0) {
+                scope.dollyScale = getZoomScale();
+                dollyOut(getZoomScale());
+            }
+            scope.dollyStart.copy(scope.dollyEnd);
+            scope.update();
+            if (event.deltaY !== 0) {
+                scope.state = STATE.DOLLY;
+                scope.dispatchEvent(_changeEvent$2);
+                scope.state = STATE.NONE;
+            }
+        }
+        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) {
+                event.preventDefault();
+                scope.update();
+            }
+        }
+        function handleTouchStartRotate() {
+            if (scope.pointers.length === 1) {
+                scope.rotateStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+            } else {
+                const x = .5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+                const y = .5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
+                scope.rotateStart.set(x, y);
+            }
+        }
+        function handleTouchStartPan() {
+            if (scope.pointers.length === 1) {
+                scope.panStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+            } else {
+                const x = .5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+                const y = .5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
+                scope.panStart.set(x, y);
+            }
+        }
+        function handleTouchStartDolly() {
+            const dx = scope.pointers[0].pageX - scope.pointers[1].pageX;
+            const dy = scope.pointers[0].pageY - scope.pointers[1].pageY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            scope.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 (scope.pointers.length == 1) {
+                scope.rotateEnd.set(event.pageX, event.pageY);
+            } else {
+                const position = getSecondPointerPosition(event);
+                const x = .5 * (event.pageX + position.x);
+                const y = .5 * (event.pageY + position.y);
+                scope.rotateEnd.set(x, y);
+            }
+            scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
+            const element = scope.domElement;
+            rotateLeft(2 * Math.PI * scope.rotateDelta.x / element.clientHeight);
+            rotateUp(2 * Math.PI * scope.rotateDelta.y / element.clientHeight);
+            scope.rotateStart.copy(scope.rotateEnd);
+        }
+        function handleTouchMovePan(event) {
+            if (scope.pointers.length === 1) {
+                scope.panEnd.set(event.pageX, event.pageY);
+            } else {
+                const position = getSecondPointerPosition(event);
+                const x = .5 * (event.pageX + position.x);
+                const y = .5 * (event.pageY + position.y);
+                scope.panEnd.set(x, y);
+            }
+            scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
+            pan(scope.panDelta.x, scope.panDelta.y);
+            scope.panStart.copy(scope.panEnd);
+        }
+        function handleTouchMoveDolly(event) {
+            const position = getSecondPointerPosition(event);
+            const dx = event.pageX - position.x;
+            const dy = event.pageY - position.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            scope.dollyEnd.set(0, distance);
+            scope.dollyDelta.set(0, Math.pow(scope.dollyEnd.y / scope.dollyStart.y, scope.zoomSpeed));
+            dollyOut(scope.dollyDelta.y);
+            scope.dollyStart.copy(scope.dollyEnd);
+        }
+        function handleTouchMoveDollyPan(event) {
+            if (scope.enableZoom) handleTouchMoveDolly(event);
+            if (scope.enablePan) handleTouchMovePan(event);
+        }
+        function handleTouchMoveDollyRotate(event) {
+            if (scope.enableZoom) handleTouchMoveDolly(event);
+            if (scope.enableRotate) handleTouchMoveRotate(event);
+        }
+        function onPointerDown(event) {
+            if (scope.enabled === false) return;
+            if (scope.pointers.length === 0) {
+                scope.domElement.setPointerCapture(event.pointerId);
+                scope.domElement.addEventListener("pointermove", onPointerMove);
+                scope.domElement.addEventListener("pointerup", onPointerUp);
+            }
+            addPointer(event);
+            if (event.pointerType === "touch") {
+                onTouchStart(event);
+            } else {
+                onMouseDown(event);
+            }
+        }
+        function onPointerMove(event) {
+            if (scope.enabled === false) return;
+            if (event.pointerType === "touch") {
+                onTouchMove(event);
+            } else {
+                onMouseMove(event);
+            }
+        }
+        function onPointerUp(event) {
+            removePointer(event);
+            if (scope.pointers.length === 0) {
+                scope.domElement.releasePointerCapture(event.pointerId);
+                scope.domElement.removeEventListener("pointermove", onPointerMove);
+                scope.domElement.removeEventListener("pointerup", onPointerUp);
+            }
+            scope.dispatchEvent(_endEvent);
+            scope.state = STATE.NONE;
+        }
+        function onMouseDown(event) {
+            let mouseAction;
+            switch (event.button) {
+              case 0:
+                mouseAction = scope.mouseButtons.LEFT;
+                break;
+
+              case 1:
+                mouseAction = scope.mouseButtons.MIDDLE;
+                break;
+
+              case 2:
+                mouseAction = scope.mouseButtons.RIGHT;
+                break;
+
+              default:
+                mouseAction = -1;
+            }
+            switch (mouseAction) {
+              case MOUSE.DOLLY:
+                if (scope.enableZoom === false) return;
+                handleMouseDownDolly(event);
+                scope.state = STATE.DOLLY;
+                break;
+
+              case MOUSE.ROTATE:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    if (scope.enablePan === false) return;
+                    handleMouseDownPan(event);
+                    scope.state = STATE.PAN;
+                } else {
+                    if (scope.enableRotate === false) return;
+                    handleMouseDownRotate(event);
+                    scope.state = STATE.ROTATE;
+                }
+                break;
+
+              case MOUSE.PAN:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    if (scope.enableRotate === false) return;
+                    handleMouseDownRotate(event);
+                    scope.state = STATE.ROTATE;
+                } else {
+                    if (scope.enablePan === false) return;
+                    handleMouseDownPan(event);
+                    scope.state = STATE.PAN;
+                }
+                break;
+
+              default:
+                scope.state = STATE.NONE;
+            }
+            if (scope.state !== STATE.NONE) {
+                scope.dispatchEvent(_startEvent);
+            }
+        }
+        function onMouseMove(event) {
+            switch (scope.state) {
+              case STATE.ROTATE:
+                if (scope.enableRotate === false) return;
+                handleMouseMoveRotate(event);
+                break;
+
+              case STATE.DOLLY:
+                if (scope.enableZoom === false) return;
+                handleMouseMoveDolly(event);
+                break;
+
+              case STATE.PAN:
+                if (scope.enablePan === false) return;
+                handleMouseMovePan(event);
+                break;
+            }
+        }
+        function onMouseWheel(event) {
+            if (scope.enabled === false || scope.enableZoom === false || scope.state !== STATE.NONE) return;
+            event.preventDefault();
+            scope.dispatchEvent(_startEvent);
+            handleMouseWheel(event);
+            scope.dispatchEvent(_endEvent);
+        }
+        function onKeyDown(event) {
+            if (scope.enabled === false || scope.enablePan === false) return;
+            handleKeyDown(event);
+        }
+        function onTouchStart(event) {
+            trackPointer(event);
+            switch (scope.pointers.length) {
+              case 1:
+                switch (scope.touches.ONE) {
+                  case TOUCH.ROTATE:
+                    if (scope.enableRotate === false) return;
+                    handleTouchStartRotate();
+                    scope.state = STATE.TOUCH_ROTATE;
+                    break;
+
+                  case TOUCH.PAN:
+                    if (scope.enablePan === false) return;
+                    handleTouchStartPan();
+                    scope.state = STATE.TOUCH_PAN;
+                    break;
+
+                  default:
+                    scope.state = STATE.NONE;
+                }
+                break;
+
+              case 2:
+                switch (scope.touches.TWO) {
+                  case TOUCH.DOLLY_PAN:
+                    if (scope.enableZoom === false && scope.enablePan === false) return;
+                    handleTouchStartDollyPan();
+                    scope.state = STATE.TOUCH_DOLLY_PAN;
+                    break;
+
+                  case TOUCH.DOLLY_ROTATE:
+                    if (scope.enableZoom === false && scope.enableRotate === false) return;
+                    handleTouchStartDollyRotate();
+                    scope.state = STATE.TOUCH_DOLLY_ROTATE;
+                    break;
+
+                  default:
+                    scope.state = STATE.NONE;
+                }
+                break;
+
+              default:
+                scope.state = STATE.NONE;
+            }
+            if (scope.state !== STATE.NONE) {
+                scope.dispatchEvent(_startEvent);
+            }
+        }
+        function onTouchMove(event) {
+            trackPointer(event);
+            switch (scope.state) {
+              case STATE.TOUCH_ROTATE:
+                if (scope.enableRotate === false) return;
+                handleTouchMoveRotate(event);
+                scope.update();
+                break;
+
+              case STATE.TOUCH_PAN:
+                if (scope.enablePan === false) return;
+                handleTouchMovePan(event);
+                scope.update();
+                break;
+
+              case STATE.TOUCH_DOLLY_PAN:
+                if (scope.enableZoom === false && scope.enablePan === false) return;
+                handleTouchMoveDollyPan(event);
+                scope.update();
+                break;
+
+              case STATE.TOUCH_DOLLY_ROTATE:
+                if (scope.enableZoom === false && scope.enableRotate === false) return;
+                handleTouchMoveDollyRotate(event);
+                scope.update();
+                break;
+
+              default:
+                scope.state = STATE.NONE;
+            }
+        }
+        function onContextMenu(event) {
+            if (scope.enabled === false) return;
+            event.preventDefault();
+        }
+        function addPointer(event) {
+            scope.pointers.push(event);
+        }
+        function removePointer(event) {
+            delete scope.pointerPositions[event.pointerId];
+            for (let i = 0; i < scope.pointers.length; i++) {
+                if (scope.pointers[i].pointerId == event.pointerId) {
+                    scope.pointers.splice(i, 1);
+                    return;
+                }
+            }
+        }
+        function trackPointer(event) {
+            let position = scope.pointerPositions[event.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];
+            return scope.pointerPositions[pointer.pointerId];
+        }
+        scope.domElement.addEventListener("contextmenu", onContextMenu);
+        scope.domElement.addEventListener("pointerdown", onPointerDown);
+        scope.domElement.addEventListener("pointercancel", onPointerUp);
+        scope.domElement.addEventListener("wheel", onMouseWheel, {
+            passive: false
+        });
+        this.update();
+    }
+}
+
 class OrbitDragger {
     constructor(viewer) {
         this.updateControls = () => {
@@ -905,6 +1602,27 @@ class OrbitDragger {
         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 => {
@@ -936,10 +1654,10 @@ class OrbitDragger {
         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();
     }
@@ -2489,12 +3207,15 @@ class Viewer extends EventEmitter2 {
     render(time) {
         if (!this.renderNeeded) 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) / 1e3;
         this.renderTime = time;
         this.emitEvent({
@@ -2502,9 +3223,6 @@ class Viewer extends EventEmitter2 {
             time: time,
             deltaTime: deltaTime
         });
-        this.renderer.autoClear = true;
-        this.renderer.clippingPlanes = clippingPlanes;
-        this.renderNeeded = false;
     }
     update(force = false) {
         this.renderNeeded = true;
@@ -2628,6 +3346,30 @@ class Viewer extends EventEmitter2 {
         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;
     }
@@ -2665,12 +3407,6 @@ class Viewer extends EventEmitter2 {
     is3D() {
         return true;
     }
-    getSelected() {
-        return this.executeCommand("getSelected");
-    }
-    setSelected(handles) {
-        this.executeCommand("setSelected", handles);
-    }
     executeCommand(id, ...args) {
         return commands("ThreeJS").executeCommand(id, this, ...args);
     }