@inweb/viewer-three 25.9.8 → 25.11.0

package/dist/viewer-three.module.js

@@ -1,9 +1,7 @@
-import * as THREE 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" ];
@@ -380,6 +386,480 @@ class Dragger {
     updatePreview() {}
 }
 
+function applyModelTransform(viewer, model) {
+    console.warn("applyModelTransform not implemented");
+}
+
+commands("ThreeJS").registerCommand("applyModelTransform", applyModelTransform);
+
+commands("ThreeJS").registerCommand("clearMarkup", (viewer => console.warn("clearMarkup not implemented")));
+
+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();
+}
+
+commands("ThreeJS").registerCommand("clearSlices", clearSlices);
+
+function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
+    viewer.update(true);
+    return viewer.canvas.toDataURL(type, encoderOptions);
+}
+
+commands("ThreeJS").registerCommand("createPreview", createPreview);
+
+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));
+        }
+    }
+    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)));
+
+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(-.5, -.5, 1).normalize(),
+    se: new Vector3(.5, -.5, 1).normalize(),
+    ne: new Vector3(.5, .5, 1).normalize(),
+    nw: new Vector3(-.5, .5, 1).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("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");
+
+function getDefaultViewPositions() {
+    return Object.keys(defaultViewPositions);
+}
+
+commands("ThreeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+
+function getModels(viewer) {
+    const handles = viewer.models.map((model => model.userData.handle || "")).filter((handle => handle));
+    return handles;
+}
+
+commands("ThreeJS").registerCommand("getModels", getModels);
+
+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);
+
+function hideSelected(viewer) {
+    viewer.selected.forEach((object => object.visible = false));
+    const selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    selection.dispose();
+    viewer.update();
+    viewer.emitEvent({
+        type: "hide"
+    });
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: []
+    });
+}
+
+commands("ThreeJS").registerCommand("hideSelected", hideSelected);
+
+function isolateSelected(viewer) {
+    const selectedSet = new Set(viewer.selected);
+    function isolateObject(object, depth) {
+        let canBeIsolated = true;
+        object.children.forEach((object => {
+            if (selectedSet.has(object)) canBeIsolated = false; else isolateObject(object, depth + 1);
+        }));
+        if (canBeIsolated && depth > 0) object.visible = false;
+        return canBeIsolated;
+    }
+    isolateObject(viewer.scene, 0);
+    viewer.update();
+    viewer.emitEvent({
+        type: "isolate"
+    });
+}
+
+commands("ThreeJS").registerCommand("isolateSelected", isolateSelected);
+
+function regenerateAll(viewer) {
+    console.warn("regenerateAll not implemented");
+    viewer.emit({
+        type: "regenerateall"
+    });
+}
+
+commands("ThreeJS").registerCommand("regenerateAll", regenerateAll);
+
+function resetView(viewer) {
+    viewer.executeCommand("setActiveDragger", "");
+    viewer.executeCommand("clearSlices");
+    viewer.executeCommand("clearOverlay");
+    viewer.executeCommand("setMarkupColor");
+    viewer.executeCommand("clearSelected");
+    viewer.executeCommand("showAll");
+    viewer.executeCommand("explode", 0);
+    viewer.executeCommand("zoomToExtents", true);
+    viewer.executeCommand("k3DViewSW");
+    viewer.emit({
+        type: "resetview"
+    });
+}
+
+commands("ThreeJS").registerCommand("resetView", resetView);
+
+function selectModel(viewer, handle) {
+    console.warn("selectModel not implemented");
+    viewer.emit({
+        type: "select",
+        data: []
+    });
+}
+
+commands("ThreeJS").registerCommand("selectModel", selectModel);
+
+commands("ThreeJS").registerCommand("setActiveDragger", ((viewer, dragger = "") => {
+    viewer.setActiveDragger(dragger);
+}));
+
+commands("ThreeJS").registerCommand("setMarkupColor", ((viewer, r = 255, g = 0, b = 0) => {
+    console.warn("setMarkupColor not implemented");
+}));
+
+function setSelected(viewer, handles = []) {
+    const handleSet = new Set(handles);
+    const objects = [];
+    viewer.scene.traverseVisible((child => {
+        var _a;
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+    }));
+    const selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    objects.forEach((object => selection.select(object)));
+    selection.dispose();
+    viewer.update();
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: handles
+    });
+}
+
+commands("ThreeJS").registerCommand("setSelected", setSelected);
+
+function showAll(viewer) {
+    viewer.scene.traverse((object => object.visible = true));
+    viewer.update();
+    viewer.emitEvent({
+        type: "showall"
+    });
+}
+
+commands("ThreeJS").registerCommand("showAll", showAll);
+
+function zoomToExtents(viewer) {
+    if (viewer.extents.isEmpty()) return;
+    const center = viewer.extents.getCenter(new Vector3);
+    const distance = viewer.extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToExtents", zoomToExtents);
+
+commands("ThreeJS").registerCommandAlias("zoomToExtents", "zoomExtents");
+
+function zoomToObjects(viewer, handles = []) {
+    const handleSet = new Set(handles);
+    const objects = [];
+    viewer.scene.traverseVisible((child => {
+        var _a;
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+    }));
+    const extents = objects.reduce(((result, object) => {
+        const objectExtents = (new Box3).setFromObject(object);
+        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
+    }), new Box3);
+    const center = extents.getCenter(new Vector3);
+    const distance = extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToObjects", zoomToObjects);
+
+function zoomToSelected(viewer) {
+    const extents = viewer.selected.reduce(((result, object) => {
+        const objectExtents = (new Box3).setFromObject(object);
+        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
+    }), new Box3);
+    if (extents.isEmpty()) extents.copy(viewer.extents);
+    const center = extents.getCenter(new Vector3);
+    const distance = extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToSelected", zoomToSelected);
+
+class GLTFLoadingManager extends LoadingManager {
+    constructor(file, externalData = new Map, params = {}) {
+        super();
+        this.path = "";
+        this.resourcePath = "";
+        this.fileURL = "";
+        this.dataURLs = new Map;
+        this.path = params.path || "";
+        if (typeof file === "string") {
+            this.fileURL = file;
+            this.resourcePath = LoaderUtils.extractUrlBase(file);
+        } else {
+            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
+            externalData.set(this.fileURL, file);
+        }
+        externalData.forEach(((value, key) => {
+            let dataURL;
+            if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
+            this.dataURLs.set(key, dataURL);
+        }));
+        this.setURLModifier((url => {
+            const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
+            const dataURL = this.dataURLs.get(key);
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+        }));
+    }
+    dispose() {
+        this.dataURLs.forEach(URL.revokeObjectURL);
+    }
+}
+
 class EventEmitter2 {
     constructor() {
         this._listeners = {};
@@ -419,367 +899,2031 @@ class EventEmitter2 {
     }
 }
 
-class GLTFLoadingManager extends THREE.LoadingManager {
-    constructor(file, externalData = new Map, params = {}) {
-        super();
-        this.path = "";
-        this.resourcePath = "";
-        this.fileURL = "";
-        this.dataURLs = new Map;
-        this.path = params.path || "";
-        if (typeof file === "string") {
-            this.fileURL = file;
-            this.resourcePath = THREE.LoaderUtils.extractUrlBase(file);
-        } else {
-            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
-            externalData.set(this.fileURL, file);
-        }
-        externalData.forEach(((value, key) => {
-            let dataURL;
-            if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
-            this.dataURLs.set(key, dataURL);
-        }));
-        this.setURLModifier((url => {
-            const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
-            const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
-        }));
-    }
-    dispose() {
-        this.dataURLs.forEach(URL.revokeObjectURL);
-    }
-}
+const _changeEvent$2 = {
+    type: "change"
+};
 
-class OrbitDragger extends OrbitControls {
-    constructor(viewer) {
-        super(viewer.camera, viewer.canvas);
-        this.geometryEnd = event => {
-            const {data: scene} = event;
-            const box = (new THREE.Box3).setFromObject(scene);
-            const size = box.getSize(new THREE.Vector3).length();
-            this.maxDistance = size * 10;
-            this.update();
-        };
-        this.updateViewer = () => {
-            this.viewer.update();
+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: THREE.MOUSE.ROTATE,
-            MIDDLE: THREE.MOUSE.PAN,
-            RIGHT: THREE.MOUSE.PAN
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.DOLLY,
+            RIGHT: MOUSE.PAN
         };
         this.touches = {
-            ONE: THREE.TOUCH.ROTATE,
-            TWO: THREE.TOUCH.DOLLY_PAN
+            ONE: TOUCH.ROTATE,
+            TWO: TOUCH.DOLLY_PAN
         };
-        this.screenSpacePanning = true;
-        this.rotateSpeed = .33;
-        this.viewer = viewer;
-        this.viewer.addEventListener("geometryend", this.geometryEnd);
-        this.addEventListener("change", this.updateViewer);
-    }
-    dispose() {
-        this.removeEventListener("change", this.updateViewer);
-        this.viewer.removeEventListener("geometryend", this.geometryEnd);
-        super.dispose();
-    }
-}
-
-class PanDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.mouseButtons = {
-            LEFT: THREE.MOUSE.PAN,
-            MIDDLE: THREE.MOUSE.PAN,
-            RIGHT: THREE.MOUSE.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.touches = {
-            ONE: THREE.TOUCH.PAN,
-            TWO: THREE.TOUCH.DOLLY_ROTATE
+        this.getAzimuthalAngle = function() {
+            return spherical.theta;
         };
-    }
-}
-
-class ZoomDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.mouseButtons = {
-            LEFT: THREE.MOUSE.DOLLY,
-            MIDDLE: THREE.MOUSE.PAN,
-            RIGHT: THREE.MOUSE.PAN
+        this.getDistance = function() {
+            return this.object.position.distanceTo(this.target);
         };
-        this.touches = {
-            ONE: THREE.TOUCH.DOLLY_PAN,
-            TWO: THREE.TOUCH.DOLLY_PAN
+        this.listenToKeyEvents = function(domElement) {
+            domElement.addEventListener("keydown", onKeyDown);
+            this._domElementKeyEvents = domElement;
         };
-    }
-}
-
-class WalkDragger {
-    constructor(viewer) {
-        this.onKeyDown = event => {
-            switch (event.code) {
-              case "KeyW":
-                if (event.shiftKey) {
-                    this.speed.z = this.walkSpeed * this.boostSpeed;
-                } else {
-                    this.speed.z = this.walkSpeed;
+        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());
                 }
-                break;
-
-              case "KeyS":
-                if (event.shiftKey) {
-                    this.speed.z = -this.walkSpeed * this.boostSpeed;
+                if (scope.enableDamping) {
+                    spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+                    spherical.phi += sphericalDelta.phi * scope.dampingFactor;
                 } else {
-                    this.speed.z = -this.walkSpeed;
+                    spherical.theta += sphericalDelta.theta;
+                    spherical.phi += sphericalDelta.phi;
                 }
-                break;
-
-              case "KeyA":
-                if (event.shiftKey) {
-                    this.speed.x = this.walkSpeed * this.boostSpeed;
+                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 {
-                    this.speed.x = this.walkSpeed;
+                    scope.target.add(scope.panOffset);
                 }
-                break;
-
-              case "KeyD":
-                if (event.shiftKey) {
-                    this.speed.x = -this.walkSpeed * this.boostSpeed;
+                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 {
-                    this.speed.x = -this.walkSpeed;
+                    sphericalDelta.set(0, 0, 0);
+                    scope.panOffset.set(0, 0, 0);
                 }
-                break;
-            }
-        };
-        this.onKeyUp = event => {
-            switch (event.code) {
-              case "KeyW":
-                this.speed.z = 0;
-                break;
-
-              case "KeyS":
-                this.speed.z = 0;
-                break;
-
-              case "KeyA":
-                this.speed.x = 0;
-                break;
-
-              case "KeyD":
-                this.speed.x = 0;
-                break;
-            }
-        };
-        this.onMouseDown = event => {
-            const {clientX: clientX, clientY: clientY} = event;
-            this.mouseStart.set(clientX, clientY);
-            this.mouseDelta.set(0, 0);
-            this.quaternion.copy(this.viewer.camera.quaternion);
-            this.viewer.addEventListener("mousemove", this.onMouseMove);
-        };
-        this.onMouseMove = event => {
-            const {clientX: clientX, clientY: clientY} = event;
-            this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
-            this.rotateCamera(this.mouseDelta);
-        };
-        this.onMouseUp = event => {
-            this.speed.set(0, 0, 0);
-            this.mouseStart.set(0, 0);
-            this.mouseDelta.set(0, 0);
-            this.quaternion.copy(this.viewer.camera.quaternion);
-            this.viewer.removeEventListener("mousemove", this.onMouseMove);
-        };
-        this.onMouseWheel = event => {
-            event.preventDefault();
-            if (-event.deltaY < 0) {
-                this.walkSpeed = Math.max(.001, this.walkSpeed - 1);
-            } else if (-event.deltaY > 0) {
-                this.walkSpeed++;
+                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;
             }
         };
-        this.onContextMenu = event => {
-            console.log(event);
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        };
-        this.onTouchStart = event => {
-            if (event.touches.length > 1) {
-                this.touchStartDistance = this.getTouchsDistance(event.touches);
+        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 {
-                const {clientX: clientX, clientY: clientY} = event.touches[0];
-                this.mouseStart.set(clientX, clientY);
-                this.mouseDelta.set(0, 0);
-                this.quaternion.copy(this.viewer.camera.quaternion);
+                console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
+                scope.enableZoom = false;
             }
-        };
-        this.onTouchEnd = event => {
-            if (event.touches.length === 0) {
-                this.touchStartDistance = 0;
+        }
+        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;
             }
-            this.speed.set(0, 0, 0);
-            this.mouseStart.set(0, 0);
-            this.mouseDelta.set(0, 0);
-            this.quaternion.copy(this.viewer.camera.quaternion);
+            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 = () => {
+            this.orbit.maxDistance = this.viewer.camera.far;
+            this.orbit.minDistance = this.viewer.camera.near;
+            this.orbit.target.copy(this.viewer.target);
+            this.orbit.update();
         };
-        this.onTouchMove = event => {
-            if (event.touches.length === 1 && this.touchStartDistance === 0) {
-                const {clientX: clientX, clientY: clientY} = event.touches[0];
-                this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
-                this.rotateCamera(this.mouseDelta);
+        this.controlsStart = () => {
+            this.changed = false;
+        };
+        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;
             }
-            if (event.touches.length === 2) {
-                const distance = this.getTouchsDistance(event.touches);
-                this.speed.z = (distance - this.touchStartDistance) / 2;
+            this.changed = true;
+        };
+        this.stopContextMenu = event => {
+            if (this.changed) {
+                event.preventDefault();
+                event.stopPropagation();
             }
         };
-        this.onRender = event => {
-            this.viewer.camera.matrix.extractBasis(this.xAxis, this.yAxis, this.zAxis);
-            this.viewer.camera.position.add(this.zAxis.multiplyScalar(-event.deltaTime * this.speed.z));
-            this.viewer.camera.position.add(this.xAxis.multiplyScalar(-event.deltaTime * this.speed.x));
+        this.orbit = new OrbitControls(viewer.camera, viewer.canvas);
+        this.orbit.mouseButtons = {
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN
+        };
+        this.orbit.touches = {
+            ONE: TOUCH.ROTATE,
+            TWO: TOUCH.DOLLY_PAN
         };
+        this.orbit.screenSpacePanning = true;
+        this.orbit.rotateSpeed = .33;
+        this.orbit.addEventListener("start", this.controlsStart);
+        this.orbit.addEventListener("change", this.controlsChange);
+        this.changed = false;
         this.viewer = viewer;
-        this._target = new THREE.Vector3;
-        this.quaternion = this.viewer.camera.quaternion.clone();
-        this.xRotation = new THREE.Quaternion;
-        this.yRotation = new THREE.Quaternion;
-        this.mouseStart = new THREE.Vector2;
-        this.mouseDelta = new THREE.Vector2;
-        this.xAxis = new THREE.Vector3;
-        this.yAxis = new THREE.Vector3;
-        this.zAxis = new THREE.Vector3;
-        this.yRotationAxis = new THREE.Vector3(1, 0, 0);
-        this.walkSpeed = 1;
-        this.boostSpeed = 5;
-        this.speed = new THREE.Vector3;
-        this._maxDistance = 1;
-        this.touchStartDistance = 0;
-        this.viewer.addEventListener("render", this.onRender);
-        this.viewer.addEventListener("contextmenu", this.onContextMenu);
-        this.viewer.addEventListener("mousedown", this.onMouseDown);
-        this.viewer.addEventListener("mouseup", this.onMouseUp);
-        this.viewer.addEventListener("touchstart", this.onTouchStart);
-        this.viewer.addEventListener("touchmove", this.onTouchMove);
-        this.viewer.addEventListener("touchend", this.onTouchEnd);
-        this.viewer.addEventListener("wheel", this.onMouseWheel);
-        document.addEventListener("keydown", this.onKeyDown);
-        document.addEventListener("keyup", this.onKeyUp);
+        this.viewer.on("geometryend", this.updateControls);
+        this.viewer.on("viewposition", this.updateControls);
+        this.viewer.on("zoom", this.updateControls);
+        this.viewer.on("contextmenu", this.stopContextMenu);
+        this.updateControls();
     }
     dispose() {
-        this.viewer.removeEventListener("render", this.onRender);
-        this.viewer.removeEventListener("contextmenu", this.onContextMenu);
-        this.viewer.removeEventListener("mousedown", this.onMouseDown);
-        this.viewer.removeEventListener("mouseup", this.onMouseUp);
-        this.viewer.removeEventListener("mousemove", this.onMouseMove);
-        this.viewer.removeEventListener("touchstart", this.onTouchStart);
-        this.viewer.removeEventListener("touchmove", this.onTouchMove);
-        this.viewer.removeEventListener("touchend", this.onTouchEnd);
-        this.viewer.removeEventListener("wheel", this.onMouseWheel);
-        document.removeEventListener("keydown", this.onKeyDown);
-        document.removeEventListener("keyup", this.onKeyUp);
-    }
-    getTouchsDistance(touches) {
-        const [start, end] = touches;
-        const dx = start.clientX - end.clientX;
-        const dy = start.clientY - end.clientY;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-        return distance;
-    }
-    update() {}
-    rotateCamera(delta) {
-        const rotateX = Math.PI * delta.x / this.viewer.canvas.clientWidth;
-        const rotateY = Math.PI * delta.y / this.viewer.canvas.clientHeight;
-        const quaternion = this.quaternion.clone();
-        this.xRotation.setFromAxisAngle(this.viewer.camera.up, rotateX);
-        this.yRotation.setFromAxisAngle(this.yRotationAxis, rotateY);
-        quaternion.premultiply(this.xRotation).multiply(this.yRotation).normalize();
-        this.viewer.camera.setRotationFromQuaternion(quaternion);
+        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();
     }
 }
 
-class ClippingPlaneDragger {
+class PanDragger extends OrbitDragger {
     constructor(viewer) {
+        super(viewer);
+        this.orbit.mouseButtons = {
+            LEFT: MOUSE.PAN,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN
+        };
+    }
+}
+
+class ZoomDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.orbit.mouseButtons = {
+            LEFT: MOUSE.DOLLY,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN
+        };
+    }
+}
+
+const _changeEvent$1 = {
+    type: "change"
+};
+
+class WalkControls extends EventDispatcher {
+    constructor(camera, canvas) {
+        super();
+        this.movementSpeed = .2;
+        this.lookSpeed = 5;
+        this.multiplier = 5;
+        this.moveWheel = 0;
+        this.mouseDragOn = false;
         this.onPointerDown = event => {
-            this.viewer.addEventListener("pointermove", this.onPointerMove);
-            const {offsetX: offsetX, offsetY: offsetY} = event;
-            this.start.set(offsetX, offsetY, .5);
-            this.start = this.screenToPlane(this.start);
-            this.delta.set(0, 0, 0);
-            this.end.set(0, 0, 0);
+            if (!event.isPrimary || event.button !== 0) return;
+            this.canvas.setPointerCapture(event.pointerId);
+            this.downPosition.set(event.clientX, event.clientY);
+            this.quaternion.copy(this.camera.quaternion);
+            this.mouseDragOn = true;
+        };
+        this.onPointerMove = event => {
+            if (!event.isPrimary || !this.mouseDragOn) return;
+            const movePosition = new Vector2(event.clientX, event.clientY);
+            if (this.downPosition.distanceTo(movePosition) === 0) return;
+            this.rotateDelta.copy(this.downPosition).sub(movePosition);
+            this.rotateCamera(this.rotateDelta);
+            this.dispatchEvent(_changeEvent$1);
         };
         this.onPointerUp = event => {
-            this.viewer.removeEventListener("pointermove", this.onPointerMove);
-            if (this.end.length() === 0) {
-                const plane = this.plane;
-                plane.normal.multiplyScalar(-1);
-                plane.constant *= -1;
-            } else {
-                const {offsetX: offsetX, offsetY: offsetY} = event;
-                this.end.set(offsetX, offsetY, .5);
-                this.end = this.screenToPlane(this.end);
+            if (!event.isPrimary || event.button !== 0) return;
+            this.canvas.releasePointerCapture(event.pointerId);
+            this.mouseDragOn = false;
+        };
+        this.onPointerCancel = event => {
+            this.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onWheel = event => {
+            this.moveWheel = event.deltaY;
+            this.update();
+        };
+        this.onKeyDown = event => {
+            switch (event.code) {
+              case "NumpadSubtract":
+              case "Minus":
+                if (this.multiplier > 1) {
+                    this.multiplier = this.multiplier - 1;
+                    this.dispatchEvent({
+                        type: "walkspeedchange",
+                        data: this.multiplier
+                    });
+                }
+                break;
+
+              case "NumpadAdd":
+              case "Equal":
+                if (this.multiplier < 10) {
+                    this.multiplier = this.multiplier + 1;
+                    this.dispatchEvent({
+                        type: "walkspeedchange",
+                        data: this.multiplier
+                    });
+                }
+                break;
+
+              case "ArrowLeft":
+              case "ArrowRight":
+              case "ArrowUp":
+              case "ArrowDown":
+              case "KeyW":
+              case "KeyS":
+              case "KeyA":
+              case "KeyD":
+              case "KeyQ":
+              case "KeyE":
+                this.moveKeys.add(event.code);
+                this.update();
+                break;
             }
         };
-        this.onPointerMove = event => {
-            const {offsetX: offsetX, offsetY: offsetY} = event;
-            this.end.set(offsetX, offsetY, .5);
-            this.end = this.screenToPlane(this.end);
-            this.delta.copy(this.end).sub(this.start);
-            this.start.copy(this.end);
-            const plane = this.plane;
-            plane.translate(this.delta);
+        this.onKeyUp = event => {
+            switch (event.code) {
+              case "ArrowLeft":
+              case "ArrowRight":
+              case "ArrowUp":
+              case "ArrowDown":
+              case "KeyW":
+              case "KeyS":
+              case "KeyA":
+              case "KeyD":
+              case "KeyQ":
+              case "KeyE":
+                this.moveKeys.delete(event.code);
+                this.update();
+                break;
+            }
+        };
+        this.camera = camera;
+        this.canvas = canvas;
+        this.moveKeys = new Set;
+        this.moveClock = new Clock;
+        this.quaternion = camera.quaternion.clone();
+        this.downPosition = new Vector2(0, 0);
+        this.rotateDelta = new Vector2(0, 0);
+        this.canvas.addEventListener("pointerdown", this.onPointerDown);
+        this.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.canvas.addEventListener("pointercancel", this.onPointerCancel);
+        this.canvas.addEventListener("wheel", this.onWheel);
+        window.addEventListener("keydown", this.onKeyDown);
+        window.addEventListener("keyup", this.onKeyUp);
+    }
+    dispose() {
+        this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        this.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+        this.canvas.removeEventListener("wheel", this.onWheel);
+        window.removeEventListener("keydown", this.onKeyDown);
+        window.removeEventListener("keyup", this.onKeyUp);
+    }
+    update() {
+        if (this.moveKeys.size > 0) {
+            const timeDelta = this.moveClock.getDelta();
+            const moveDelta = timeDelta * this.movementSpeed * this.multiplier;
+            if (this.moveKeys.has("KeyW")) this.camera.translateZ(-moveDelta);
+            if (this.moveKeys.has("KeyS")) this.camera.translateZ(moveDelta);
+            if (this.moveKeys.has("KeyA")) this.camera.translateX(-moveDelta);
+            if (this.moveKeys.has("KeyD")) this.camera.translateX(moveDelta);
+            if (this.moveKeys.has("KeyQ")) this.camera.translateY(moveDelta);
+            if (this.moveKeys.has("KeyE")) this.camera.translateY(-moveDelta);
+            const lookDelta = this.lookSpeed + (this.multiplier - 1);
+            if (this.moveKeys.has("ArrowUp")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, -lookDelta / 2)));
+            if (this.moveKeys.has("ArrowDown")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, lookDelta / 2)));
+            if (this.moveKeys.has("ArrowLeft")) this.rotateCamera(this.rotateDelta.add(new Vector2(lookDelta, 0)));
+            if (this.moveKeys.has("ArrowRight")) this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
+            this.moveWheel = 0;
+            this.dispatchEvent(_changeEvent$1);
+        }
+        if (this.moveWheel !== 0) {
+            const moveDelta = this.moveWheel * 1e-4 * this.movementSpeed * this.multiplier;
+            this.camera.translateZ(-moveDelta);
+            this.moveWheel += -1 * Math.sign(this.moveWheel);
+            this.dispatchEvent(_changeEvent$1);
+        }
+        if (this.moveKeys.size === 0 && this.moveWheel === 0) {
+            this.moveClock.stop();
+            this.moveClock.autoStart = true;
+        }
+    }
+    rotateCamera(delta) {
+        const rotateX = Math.PI * delta.x / this.canvas.clientWidth;
+        const rotateY = Math.PI * delta.y / this.canvas.clientHeight;
+        const xRotation = new Quaternion;
+        xRotation.setFromAxisAngle(this.camera.up, rotateX);
+        const yRotation = new Quaternion;
+        yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
+        const quaternion = this.quaternion.clone();
+        quaternion.premultiply(xRotation).multiply(yRotation).normalize();
+        this.camera.setRotationFromQuaternion(quaternion);
+    }
+}
+
+class WalkDragger {
+    constructor(viewer) {
+        this.updateControls = () => {
+            const size = this.viewer.extents.getSize(new Vector3);
+            this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+        };
+        this.controlsChange = () => {
+            this.viewer.update();
+        };
+        this.walkspeedChange = event => {
+            this.viewer.emitEvent(event);
         };
+        this.viewerRender = () => {
+            this.controls.update();
+        };
+        this.viewerZoom = () => {
+            this.controls.rotateDelta.set(0, 0);
+        };
+        this.controls = new WalkControls(viewer.camera, viewer.canvas);
+        this.controls.addEventListener("change", this.controlsChange);
+        this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
         this.viewer = viewer;
-        this.viewer.addEventListener("pointerdown", this.onPointerDown);
-        this.viewer.addEventListener("pointerup", this.onPointerUp);
-        this.plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
-        this.start = new THREE.Vector3;
-        this.end = new THREE.Vector3;
-        this.delta = new THREE.Vector3;
-        if (!this.viewer.renderer.clippingPlanes) this.viewer.renderer.clippingPlanes = [];
-        this.viewer.renderer.clippingPlanes.push(this.plane);
-        this.planeHelper = new THREE.PlaneHelper(this.plane, 150, 16776960);
-        this.viewer.scene.add(this.planeHelper);
+        this.viewer.on("render", this.viewerRender);
+        this.viewer.on("zoom", this.viewerZoom);
+        this.updateControls();
     }
     dispose() {
-        this.viewer.removeEventListener("pointerdown", this.onPointerDown);
-        this.viewer.removeEventListener("pointerup", this.onPointerUp);
-        this.viewer.removeEventListener("pointermove", this.onPointerMove);
-        this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane => this.plane !== plane));
+        this.viewer.off("render", this.viewerRender);
+        this.viewer.off("zoom", this.viewerZoom);
+        this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+        this.controls.removeEventListener("change", this.controlsChange);
+        this.controls.dispose();
+    }
+}
+
+const _raycaster = new Raycaster;
+
+const _tempVector = new Vector3;
+
+const _tempVector2 = new Vector3;
+
+const _tempQuaternion = new Quaternion;
+
+const _unit = {
+    X: new Vector3(1, 0, 0),
+    Y: new Vector3(0, 1, 0),
+    Z: new Vector3(0, 0, 1)
+};
+
+const _changeEvent = {
+    type: "change"
+};
+
+const _mouseDownEvent = {
+    type: "mouseDown"
+};
+
+const _mouseUpEvent = {
+    type: "mouseUp",
+    mode: null
+};
+
+const _objectChangeEvent = {
+    type: "objectChange"
+};
+
+class TransformControls extends Object3D {
+    constructor(camera, domElement) {
+        super();
+        if (domElement === undefined) {
+            console.warn('THREE.TransformControls: The second parameter "domElement" is now mandatory.');
+            domElement = document;
+        }
+        this.isTransformControls = true;
+        this.visible = false;
+        this.domElement = domElement;
+        this.domElement.style.touchAction = "none";
+        const _gizmo = new TransformControlsGizmo;
+        this._gizmo = _gizmo;
+        this.add(_gizmo);
+        const _plane = new TransformControlsPlane;
+        this._plane = _plane;
+        this.add(_plane);
+        const scope = this;
+        function defineProperty(propName, defaultValue) {
+            let propValue = defaultValue;
+            Object.defineProperty(scope, propName, {
+                get: function() {
+                    return propValue !== undefined ? propValue : defaultValue;
+                },
+                set: function(value) {
+                    if (propValue !== value) {
+                        propValue = value;
+                        _plane[propName] = value;
+                        _gizmo[propName] = value;
+                        scope.dispatchEvent({
+                            type: propName + "-changed",
+                            value: value
+                        });
+                        scope.dispatchEvent(_changeEvent);
+                    }
+                }
+            });
+            scope[propName] = defaultValue;
+            _plane[propName] = defaultValue;
+            _gizmo[propName] = defaultValue;
+        }
+        defineProperty("camera", camera);
+        defineProperty("object", undefined);
+        defineProperty("enabled", true);
+        defineProperty("axis", null);
+        defineProperty("mode", "translate");
+        defineProperty("translationSnap", null);
+        defineProperty("rotationSnap", null);
+        defineProperty("scaleSnap", null);
+        defineProperty("space", "world");
+        defineProperty("size", 1);
+        defineProperty("dragging", false);
+        defineProperty("showX", true);
+        defineProperty("showY", true);
+        defineProperty("showZ", true);
+        const worldPosition = new Vector3;
+        const worldPositionStart = new Vector3;
+        const worldQuaternion = new Quaternion;
+        const worldQuaternionStart = new Quaternion;
+        const cameraPosition = new Vector3;
+        const cameraQuaternion = new Quaternion;
+        const pointStart = new Vector3;
+        const pointEnd = new Vector3;
+        const rotationAxis = new Vector3;
+        const rotationAngle = 0;
+        const eye = new Vector3;
+        defineProperty("worldPosition", worldPosition);
+        defineProperty("worldPositionStart", worldPositionStart);
+        defineProperty("worldQuaternion", worldQuaternion);
+        defineProperty("worldQuaternionStart", worldQuaternionStart);
+        defineProperty("cameraPosition", cameraPosition);
+        defineProperty("cameraQuaternion", cameraQuaternion);
+        defineProperty("pointStart", pointStart);
+        defineProperty("pointEnd", pointEnd);
+        defineProperty("rotationAxis", rotationAxis);
+        defineProperty("rotationAngle", rotationAngle);
+        defineProperty("eye", eye);
+        this._offset = new Vector3;
+        this._startNorm = new Vector3;
+        this._endNorm = new Vector3;
+        this._cameraScale = new Vector3;
+        this._parentPosition = new Vector3;
+        this._parentQuaternion = new Quaternion;
+        this._parentQuaternionInv = new Quaternion;
+        this._parentScale = new Vector3;
+        this._worldScaleStart = new Vector3;
+        this._worldQuaternionInv = new Quaternion;
+        this._worldScale = new Vector3;
+        this._positionStart = new Vector3;
+        this._quaternionStart = new Quaternion;
+        this._scaleStart = new Vector3;
+        this._getPointer = getPointer.bind(this);
+        this._onPointerDown = onPointerDown.bind(this);
+        this._onPointerHover = onPointerHover.bind(this);
+        this._onPointerMove = onPointerMove.bind(this);
+        this._onPointerUp = onPointerUp.bind(this);
+        this.domElement.addEventListener("pointerdown", this._onPointerDown);
+        this.domElement.addEventListener("pointermove", this._onPointerHover);
+        this.domElement.addEventListener("pointerup", this._onPointerUp);
+    }
+    updateMatrixWorld() {
+        if (this.object !== undefined) {
+            this.object.updateMatrixWorld();
+            if (this.object.parent === null) {
+                console.error("TransformControls: The attached 3D object must be a part of the scene graph.");
+            } else {
+                this.object.parent.matrixWorld.decompose(this._parentPosition, this._parentQuaternion, this._parentScale);
+            }
+            this.object.matrixWorld.decompose(this.worldPosition, this.worldQuaternion, this._worldScale);
+            this._parentQuaternionInv.copy(this._parentQuaternion).invert();
+            this._worldQuaternionInv.copy(this.worldQuaternion).invert();
+        }
+        this.camera.updateMatrixWorld();
+        this.camera.matrixWorld.decompose(this.cameraPosition, this.cameraQuaternion, this._cameraScale);
+        if (this.camera.isOrthographicCamera) {
+            this.camera.getWorldDirection(this.eye).negate();
+        } else {
+            this.eye.copy(this.cameraPosition).sub(this.worldPosition).normalize();
+        }
+        super.updateMatrixWorld(this);
+    }
+    pointerHover(pointer) {
+        if (this.object === undefined || this.dragging === true) return;
+        _raycaster.setFromCamera(pointer, this.camera);
+        const intersect = intersectObjectWithRay(this._gizmo.picker[this.mode], _raycaster);
+        if (intersect) {
+            this.axis = intersect.object.name;
+        } else {
+            this.axis = null;
+        }
+    }
+    pointerDown(pointer) {
+        if (this.object === undefined || this.dragging === true || pointer.button !== 0) return;
+        if (this.axis !== null) {
+            _raycaster.setFromCamera(pointer, this.camera);
+            const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true);
+            if (planeIntersect) {
+                this.object.updateMatrixWorld();
+                this.object.parent.updateMatrixWorld();
+                this._positionStart.copy(this.object.position);
+                this._quaternionStart.copy(this.object.quaternion);
+                this._scaleStart.copy(this.object.scale);
+                this.object.matrixWorld.decompose(this.worldPositionStart, this.worldQuaternionStart, this._worldScaleStart);
+                this.pointStart.copy(planeIntersect.point).sub(this.worldPositionStart);
+            }
+            this.dragging = true;
+            _mouseDownEvent.mode = this.mode;
+            this.dispatchEvent(_mouseDownEvent);
+        }
+    }
+    pointerMove(pointer) {
+        const axis = this.axis;
+        const mode = this.mode;
+        const object = this.object;
+        let space = this.space;
+        if (mode === "scale") {
+            space = "local";
+        } else if (axis === "E" || axis === "XYZE" || axis === "XYZ") {
+            space = "world";
+        }
+        if (object === undefined || axis === null || this.dragging === false || pointer.button !== -1) return;
+        _raycaster.setFromCamera(pointer, this.camera);
+        const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true);
+        if (!planeIntersect) return;
+        this.pointEnd.copy(planeIntersect.point).sub(this.worldPositionStart);
+        if (mode === "translate") {
+            this._offset.copy(this.pointEnd).sub(this.pointStart);
+            if (space === "local" && axis !== "XYZ") {
+                this._offset.applyQuaternion(this._worldQuaternionInv);
+            }
+            if (axis.indexOf("X") === -1) this._offset.x = 0;
+            if (axis.indexOf("Y") === -1) this._offset.y = 0;
+            if (axis.indexOf("Z") === -1) this._offset.z = 0;
+            if (space === "local" && axis !== "XYZ") {
+                this._offset.applyQuaternion(this._quaternionStart).divide(this._parentScale);
+            } else {
+                this._offset.applyQuaternion(this._parentQuaternionInv).divide(this._parentScale);
+            }
+            object.position.copy(this._offset).add(this._positionStart);
+            if (this.translationSnap) {
+                if (space === "local") {
+                    object.position.applyQuaternion(_tempQuaternion.copy(this._quaternionStart).invert());
+                    if (axis.search("X") !== -1) {
+                        object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
+                    }
+                    if (axis.search("Y") !== -1) {
+                        object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
+                    }
+                    if (axis.search("Z") !== -1) {
+                        object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
+                    }
+                    object.position.applyQuaternion(this._quaternionStart);
+                }
+                if (space === "world") {
+                    if (object.parent) {
+                        object.position.add(_tempVector.setFromMatrixPosition(object.parent.matrixWorld));
+                    }
+                    if (axis.search("X") !== -1) {
+                        object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap;
+                    }
+                    if (axis.search("Y") !== -1) {
+                        object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap;
+                    }
+                    if (axis.search("Z") !== -1) {
+                        object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap;
+                    }
+                    if (object.parent) {
+                        object.position.sub(_tempVector.setFromMatrixPosition(object.parent.matrixWorld));
+                    }
+                }
+            }
+        } else if (mode === "scale") {
+            if (axis.search("XYZ") !== -1) {
+                let d = this.pointEnd.length() / this.pointStart.length();
+                if (this.pointEnd.dot(this.pointStart) < 0) d *= -1;
+                _tempVector2.set(d, d, d);
+            } else {
+                _tempVector.copy(this.pointStart);
+                _tempVector2.copy(this.pointEnd);
+                _tempVector.applyQuaternion(this._worldQuaternionInv);
+                _tempVector2.applyQuaternion(this._worldQuaternionInv);
+                _tempVector2.divide(_tempVector);
+                if (axis.search("X") === -1) {
+                    _tempVector2.x = 1;
+                }
+                if (axis.search("Y") === -1) {
+                    _tempVector2.y = 1;
+                }
+                if (axis.search("Z") === -1) {
+                    _tempVector2.z = 1;
+                }
+            }
+            object.scale.copy(this._scaleStart).multiply(_tempVector2);
+            if (this.scaleSnap) {
+                if (axis.search("X") !== -1) {
+                    object.scale.x = Math.round(object.scale.x / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+                }
+                if (axis.search("Y") !== -1) {
+                    object.scale.y = Math.round(object.scale.y / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+                }
+                if (axis.search("Z") !== -1) {
+                    object.scale.z = Math.round(object.scale.z / this.scaleSnap) * this.scaleSnap || this.scaleSnap;
+                }
+            }
+        } else if (mode === "rotate") {
+            this._offset.copy(this.pointEnd).sub(this.pointStart);
+            const ROTATION_SPEED = 20 / this.worldPosition.distanceTo(_tempVector.setFromMatrixPosition(this.camera.matrixWorld));
+            if (axis === "E") {
+                this.rotationAxis.copy(this.eye);
+                this.rotationAngle = this.pointEnd.angleTo(this.pointStart);
+                this._startNorm.copy(this.pointStart).normalize();
+                this._endNorm.copy(this.pointEnd).normalize();
+                this.rotationAngle *= this._endNorm.cross(this._startNorm).dot(this.eye) < 0 ? 1 : -1;
+            } else if (axis === "XYZE") {
+                this.rotationAxis.copy(this._offset).cross(this.eye).normalize();
+                this.rotationAngle = this._offset.dot(_tempVector.copy(this.rotationAxis).cross(this.eye)) * ROTATION_SPEED;
+            } else if (axis === "X" || axis === "Y" || axis === "Z") {
+                this.rotationAxis.copy(_unit[axis]);
+                _tempVector.copy(_unit[axis]);
+                if (space === "local") {
+                    _tempVector.applyQuaternion(this.worldQuaternion);
+                }
+                this.rotationAngle = this._offset.dot(_tempVector.cross(this.eye).normalize()) * ROTATION_SPEED;
+            }
+            if (this.rotationSnap) this.rotationAngle = Math.round(this.rotationAngle / this.rotationSnap) * this.rotationSnap;
+            if (space === "local" && axis !== "E" && axis !== "XYZE") {
+                object.quaternion.copy(this._quaternionStart);
+                object.quaternion.multiply(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle)).normalize();
+            } else {
+                this.rotationAxis.applyQuaternion(this._parentQuaternionInv);
+                object.quaternion.copy(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle));
+                object.quaternion.multiply(this._quaternionStart).normalize();
+            }
+        }
+        this.dispatchEvent(_changeEvent);
+        this.dispatchEvent(_objectChangeEvent);
+    }
+    pointerUp(pointer) {
+        if (pointer.button !== 0) return;
+        if (this.dragging && this.axis !== null) {
+            _mouseUpEvent.mode = this.mode;
+            this.dispatchEvent(_mouseUpEvent);
+        }
+        this.dragging = false;
+        this.axis = null;
+    }
+    dispose() {
+        this.domElement.removeEventListener("pointerdown", this._onPointerDown);
+        this.domElement.removeEventListener("pointermove", this._onPointerHover);
+        this.domElement.removeEventListener("pointermove", this._onPointerMove);
+        this.domElement.removeEventListener("pointerup", this._onPointerUp);
+        this.traverse((function(child) {
+            if (child.geometry) child.geometry.dispose();
+            if (child.material) child.material.dispose();
+        }));
+    }
+    attach(object) {
+        this.object = object;
+        this.visible = true;
+        return this;
+    }
+    detach() {
+        this.object = undefined;
+        this.visible = false;
+        this.axis = null;
+        return this;
+    }
+    reset() {
+        if (!this.enabled) return;
+        if (this.dragging) {
+            this.object.position.copy(this._positionStart);
+            this.object.quaternion.copy(this._quaternionStart);
+            this.object.scale.copy(this._scaleStart);
+            this.dispatchEvent(_changeEvent);
+            this.dispatchEvent(_objectChangeEvent);
+            this.pointStart.copy(this.pointEnd);
+        }
+    }
+    getRaycaster() {
+        return _raycaster;
+    }
+    getMode() {
+        return this.mode;
+    }
+    setMode(mode) {
+        this.mode = mode;
+    }
+    setTranslationSnap(translationSnap) {
+        this.translationSnap = translationSnap;
+    }
+    setRotationSnap(rotationSnap) {
+        this.rotationSnap = rotationSnap;
+    }
+    setScaleSnap(scaleSnap) {
+        this.scaleSnap = scaleSnap;
+    }
+    setSize(size) {
+        this.size = size;
+    }
+    setSpace(space) {
+        this.space = space;
+    }
+}
+
+function getPointer(event) {
+    if (this.domElement.ownerDocument.pointerLockElement) {
+        return {
+            x: 0,
+            y: 0,
+            button: event.button
+        };
+    } else {
+        const rect = this.domElement.getBoundingClientRect();
+        return {
+            x: (event.clientX - rect.left) / rect.width * 2 - 1,
+            y: -(event.clientY - rect.top) / rect.height * 2 + 1,
+            button: event.button
+        };
+    }
+}
+
+function onPointerHover(event) {
+    if (!this.enabled) return;
+    switch (event.pointerType) {
+      case "mouse":
+      case "pen":
+        this.pointerHover(this._getPointer(event));
+        break;
+    }
+}
+
+function onPointerDown(event) {
+    if (!this.enabled) return;
+    if (!document.pointerLockElement) {
+        this.domElement.setPointerCapture(event.pointerId);
+    }
+    this.domElement.addEventListener("pointermove", this._onPointerMove);
+    this.pointerHover(this._getPointer(event));
+    this.pointerDown(this._getPointer(event));
+}
+
+function onPointerMove(event) {
+    if (!this.enabled) return;
+    this.pointerMove(this._getPointer(event));
+}
+
+function onPointerUp(event) {
+    if (!this.enabled) return;
+    this.domElement.releasePointerCapture(event.pointerId);
+    this.domElement.removeEventListener("pointermove", this._onPointerMove);
+    this.pointerUp(this._getPointer(event));
+}
+
+function intersectObjectWithRay(object, raycaster, includeInvisible) {
+    const allIntersections = raycaster.intersectObject(object, true);
+    for (let i = 0; i < allIntersections.length; i++) {
+        if (allIntersections[i].object.visible || includeInvisible) {
+            return allIntersections[i];
+        }
+    }
+    return false;
+}
+
+const _tempEuler = new Euler;
+
+const _alignVector = new Vector3(0, 1, 0);
+
+const _zeroVector = new Vector3(0, 0, 0);
+
+const _lookAtMatrix = new Matrix4;
+
+const _tempQuaternion2 = new Quaternion;
+
+const _identityQuaternion = new Quaternion;
+
+const _dirVector = new Vector3;
+
+const _tempMatrix = new Matrix4;
+
+const _unitX = new Vector3(1, 0, 0);
+
+const _unitY = new Vector3(0, 1, 0);
+
+const _unitZ = new Vector3(0, 0, 1);
+
+const _v1 = new Vector3;
+
+const _v2 = new Vector3;
+
+const _v3 = new Vector3;
+
+class TransformControlsGizmo extends Object3D {
+    constructor() {
+        super();
+        this.isTransformControlsGizmo = true;
+        this.type = "TransformControlsGizmo";
+        const gizmoMaterial = new MeshBasicMaterial({
+            depthTest: false,
+            depthWrite: false,
+            fog: false,
+            toneMapped: false,
+            transparent: true
+        });
+        const gizmoLineMaterial = new LineBasicMaterial({
+            depthTest: false,
+            depthWrite: false,
+            fog: false,
+            toneMapped: false,
+            transparent: true
+        });
+        const matInvisible = gizmoMaterial.clone();
+        matInvisible.opacity = .15;
+        const matHelper = gizmoLineMaterial.clone();
+        matHelper.opacity = .5;
+        const matRed = gizmoMaterial.clone();
+        matRed.color.setHex(16711680);
+        const matGreen = gizmoMaterial.clone();
+        matGreen.color.setHex(65280);
+        const matBlue = gizmoMaterial.clone();
+        matBlue.color.setHex(255);
+        const matRedTransparent = gizmoMaterial.clone();
+        matRedTransparent.color.setHex(16711680);
+        matRedTransparent.opacity = .5;
+        const matGreenTransparent = gizmoMaterial.clone();
+        matGreenTransparent.color.setHex(65280);
+        matGreenTransparent.opacity = .5;
+        const matBlueTransparent = gizmoMaterial.clone();
+        matBlueTransparent.color.setHex(255);
+        matBlueTransparent.opacity = .5;
+        const matWhiteTransparent = gizmoMaterial.clone();
+        matWhiteTransparent.opacity = .25;
+        const matYellowTransparent = gizmoMaterial.clone();
+        matYellowTransparent.color.setHex(16776960);
+        matYellowTransparent.opacity = .25;
+        const matYellow = gizmoMaterial.clone();
+        matYellow.color.setHex(16776960);
+        const matGray = gizmoMaterial.clone();
+        matGray.color.setHex(7895160);
+        const arrowGeometry = new CylinderGeometry(0, .04, .1, 12);
+        arrowGeometry.translate(0, .05, 0);
+        const scaleHandleGeometry = new BoxGeometry(.08, .08, .08);
+        scaleHandleGeometry.translate(0, .04, 0);
+        const lineGeometry = new BufferGeometry;
+        lineGeometry.setAttribute("position", new Float32BufferAttribute([ 0, 0, 0, 1, 0, 0 ], 3));
+        const lineGeometry2 = new CylinderGeometry(.0075, .0075, .5, 3);
+        lineGeometry2.translate(0, .25, 0);
+        function CircleGeometry(radius, arc) {
+            const geometry = new TorusGeometry(radius, .0075, 3, 64, arc * Math.PI * 2);
+            geometry.rotateY(Math.PI / 2);
+            geometry.rotateX(Math.PI / 2);
+            return geometry;
+        }
+        function TranslateHelperGeometry() {
+            const geometry = new BufferGeometry;
+            geometry.setAttribute("position", new Float32BufferAttribute([ 0, 0, 0, 1, 1, 1 ], 3));
+            return geometry;
+        }
+        const gizmoTranslate = {
+            X: [ [ new Mesh(arrowGeometry, matRed), [ .5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(arrowGeometry, matRed), [ -.5, 0, 0 ], [ 0, 0, Math.PI / 2 ] ], [ new Mesh(lineGeometry2, matRed), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ],
+            Y: [ [ new Mesh(arrowGeometry, matGreen), [ 0, .5, 0 ] ], [ new Mesh(arrowGeometry, matGreen), [ 0, -.5, 0 ], [ Math.PI, 0, 0 ] ], [ new Mesh(lineGeometry2, matGreen) ] ],
+            Z: [ [ new Mesh(arrowGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(arrowGeometry, matBlue), [ 0, 0, -.5 ], [ -Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry2, matBlue), null, [ Math.PI / 2, 0, 0 ] ] ],
+            XYZ: [ [ new Mesh(new OctahedronGeometry(.1, 0), matWhiteTransparent.clone()), [ 0, 0, 0 ] ] ],
+            XY: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matBlueTransparent.clone()), [ .15, .15, 0 ] ] ],
+            YZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matRedTransparent.clone()), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
+            XZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matGreenTransparent.clone()), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ]
+        };
+        const pickerTranslate = {
+            X: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ .3, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ -.3, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
+            Y: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, .3, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, -.3, 0 ], [ 0, 0, Math.PI ] ] ],
+            Z: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, .3 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, -.3 ], [ -Math.PI / 2, 0, 0 ] ] ],
+            XYZ: [ [ new Mesh(new OctahedronGeometry(.2, 0), matInvisible) ] ],
+            XY: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, .15, 0 ] ] ],
+            YZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
+            XZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ]
+        };
+        const helperTranslate = {
+            START: [ [ new Mesh(new OctahedronGeometry(.01, 2), matHelper), null, null, null, "helper" ] ],
+            END: [ [ new Mesh(new OctahedronGeometry(.01, 2), matHelper), null, null, null, "helper" ] ],
+            DELTA: [ [ new Line(TranslateHelperGeometry(), matHelper), null, null, null, "helper" ] ],
+            X: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ],
+            Y: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, -1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], "helper" ] ],
+            Z: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, 0, -1e3 ], [ 0, -Math.PI / 2, 0 ], [ 1e6, 1, 1 ], "helper" ] ]
+        };
+        const gizmoRotate = {
+            XYZE: [ [ new Mesh(CircleGeometry(.5, 1), matGray), null, [ 0, Math.PI / 2, 0 ] ] ],
+            X: [ [ new Mesh(CircleGeometry(.5, .5), matRed) ] ],
+            Y: [ [ new Mesh(CircleGeometry(.5, .5), matGreen), null, [ 0, 0, -Math.PI / 2 ] ] ],
+            Z: [ [ new Mesh(CircleGeometry(.5, .5), matBlue), null, [ 0, Math.PI / 2, 0 ] ] ],
+            E: [ [ new Mesh(CircleGeometry(.75, 1), matYellowTransparent), null, [ 0, Math.PI / 2, 0 ] ] ]
+        };
+        const helperRotate = {
+            AXIS: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ]
+        };
+        const pickerRotate = {
+            XYZE: [ [ new Mesh(new SphereGeometry(.25, 10, 8), matInvisible) ] ],
+            X: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ 0, -Math.PI / 2, -Math.PI / 2 ] ] ],
+            Y: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ] ],
+            Z: [ [ new Mesh(new TorusGeometry(.5, .1, 4, 24), matInvisible), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ] ],
+            E: [ [ new Mesh(new TorusGeometry(.75, .1, 2, 24), matInvisible) ] ]
+        };
+        const gizmoScale = {
+            X: [ [ new Mesh(scaleHandleGeometry, matRed), [ .5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(lineGeometry2, matRed), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(scaleHandleGeometry, matRed), [ -.5, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
+            Y: [ [ new Mesh(scaleHandleGeometry, matGreen), [ 0, .5, 0 ] ], [ new Mesh(lineGeometry2, matGreen) ], [ new Mesh(scaleHandleGeometry, matGreen), [ 0, -.5, 0 ], [ 0, 0, Math.PI ] ] ],
+            Z: [ [ new Mesh(scaleHandleGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry2, matBlue), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(scaleHandleGeometry, matBlue), [ 0, 0, -.5 ], [ -Math.PI / 2, 0, 0 ] ] ],
+            XY: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matBlueTransparent), [ .15, .15, 0 ] ] ],
+            YZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matRedTransparent), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
+            XZ: [ [ new Mesh(new BoxGeometry(.15, .15, .01), matGreenTransparent), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ],
+            XYZ: [ [ new Mesh(new BoxGeometry(.1, .1, .1), matWhiteTransparent.clone()) ] ]
+        };
+        const pickerScale = {
+            X: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ .3, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ -.3, 0, 0 ], [ 0, 0, Math.PI / 2 ] ] ],
+            Y: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, .3, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, -.3, 0 ], [ 0, 0, Math.PI ] ] ],
+            Z: [ [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, .3 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(new CylinderGeometry(.2, 0, .6, 4), matInvisible), [ 0, 0, -.3 ], [ -Math.PI / 2, 0, 0 ] ] ],
+            XY: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, .15, 0 ] ] ],
+            YZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ 0, .15, .15 ], [ 0, Math.PI / 2, 0 ] ] ],
+            XZ: [ [ new Mesh(new BoxGeometry(.2, .2, .01), matInvisible), [ .15, 0, .15 ], [ -Math.PI / 2, 0, 0 ] ] ],
+            XYZ: [ [ new Mesh(new BoxGeometry(.2, .2, .2), matInvisible), [ 0, 0, 0 ] ] ]
+        };
+        const helperScale = {
+            X: [ [ new Line(lineGeometry, matHelper.clone()), [ -1e3, 0, 0 ], null, [ 1e6, 1, 1 ], "helper" ] ],
+            Y: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, -1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], "helper" ] ],
+            Z: [ [ new Line(lineGeometry, matHelper.clone()), [ 0, 0, -1e3 ], [ 0, -Math.PI / 2, 0 ], [ 1e6, 1, 1 ], "helper" ] ]
+        };
+        function setupGizmo(gizmoMap) {
+            const gizmo = new Object3D;
+            for (const name in gizmoMap) {
+                for (let i = gizmoMap[name].length; i--; ) {
+                    const object = gizmoMap[name][i][0].clone();
+                    const position = gizmoMap[name][i][1];
+                    const rotation = gizmoMap[name][i][2];
+                    const scale = gizmoMap[name][i][3];
+                    const tag = gizmoMap[name][i][4];
+                    object.name = name;
+                    object.tag = tag;
+                    if (position) {
+                        object.position.set(position[0], position[1], position[2]);
+                    }
+                    if (rotation) {
+                        object.rotation.set(rotation[0], rotation[1], rotation[2]);
+                    }
+                    if (scale) {
+                        object.scale.set(scale[0], scale[1], scale[2]);
+                    }
+                    object.updateMatrix();
+                    const tempGeometry = object.geometry.clone();
+                    tempGeometry.applyMatrix4(object.matrix);
+                    object.geometry = tempGeometry;
+                    object.renderOrder = Infinity;
+                    object.position.set(0, 0, 0);
+                    object.rotation.set(0, 0, 0);
+                    object.scale.set(1, 1, 1);
+                    gizmo.add(object);
+                }
+            }
+            return gizmo;
+        }
+        this.gizmo = {};
+        this.picker = {};
+        this.helper = {};
+        this.add(this.gizmo["translate"] = setupGizmo(gizmoTranslate));
+        this.add(this.gizmo["rotate"] = setupGizmo(gizmoRotate));
+        this.add(this.gizmo["scale"] = setupGizmo(gizmoScale));
+        this.add(this.picker["translate"] = setupGizmo(pickerTranslate));
+        this.add(this.picker["rotate"] = setupGizmo(pickerRotate));
+        this.add(this.picker["scale"] = setupGizmo(pickerScale));
+        this.add(this.helper["translate"] = setupGizmo(helperTranslate));
+        this.add(this.helper["rotate"] = setupGizmo(helperRotate));
+        this.add(this.helper["scale"] = setupGizmo(helperScale));
+        this.picker["translate"].visible = false;
+        this.picker["rotate"].visible = false;
+        this.picker["scale"].visible = false;
+    }
+    updateMatrixWorld(force) {
+        const space = this.mode === "scale" ? "local" : this.space;
+        const quaternion = space === "local" ? this.worldQuaternion : _identityQuaternion;
+        this.gizmo["translate"].visible = this.mode === "translate";
+        this.gizmo["rotate"].visible = this.mode === "rotate";
+        this.gizmo["scale"].visible = this.mode === "scale";
+        this.helper["translate"].visible = this.mode === "translate";
+        this.helper["rotate"].visible = this.mode === "rotate";
+        this.helper["scale"].visible = this.mode === "scale";
+        let handles = [];
+        handles = handles.concat(this.picker[this.mode].children);
+        handles = handles.concat(this.gizmo[this.mode].children);
+        handles = handles.concat(this.helper[this.mode].children);
+        for (let i = 0; i < handles.length; i++) {
+            const handle = handles[i];
+            handle.visible = true;
+            handle.rotation.set(0, 0, 0);
+            handle.position.copy(this.worldPosition);
+            let factor;
+            if (this.camera.isOrthographicCamera) {
+                factor = (this.camera.top - this.camera.bottom) / this.camera.zoom;
+            } else {
+                factor = this.worldPosition.distanceTo(this.cameraPosition) * Math.min(1.9 * Math.tan(Math.PI * this.camera.fov / 360) / this.camera.zoom, 7);
+            }
+            handle.scale.set(1, 1, 1).multiplyScalar(factor * this.size / 4);
+            if (handle.tag === "helper") {
+                handle.visible = false;
+                if (handle.name === "AXIS") {
+                    handle.visible = !!this.axis;
+                    if (this.axis === "X") {
+                        _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, 0));
+                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+                        if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > .9) {
+                            handle.visible = false;
+                        }
+                    }
+                    if (this.axis === "Y") {
+                        _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, Math.PI / 2));
+                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+                        if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > .9) {
+                            handle.visible = false;
+                        }
+                    }
+                    if (this.axis === "Z") {
+                        _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
+                        handle.quaternion.copy(quaternion).multiply(_tempQuaternion);
+                        if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > .9) {
+                            handle.visible = false;
+                        }
+                    }
+                    if (this.axis === "XYZE") {
+                        _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0));
+                        _alignVector.copy(this.rotationAxis);
+                        handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(_zeroVector, _alignVector, _unitY));
+                        handle.quaternion.multiply(_tempQuaternion);
+                        handle.visible = this.dragging;
+                    }
+                    if (this.axis === "E") {
+                        handle.visible = false;
+                    }
+                } else if (handle.name === "START") {
+                    handle.position.copy(this.worldPositionStart);
+                    handle.visible = this.dragging;
+                } else if (handle.name === "END") {
+                    handle.position.copy(this.worldPosition);
+                    handle.visible = this.dragging;
+                } else if (handle.name === "DELTA") {
+                    handle.position.copy(this.worldPositionStart);
+                    handle.quaternion.copy(this.worldQuaternionStart);
+                    _tempVector.set(1e-10, 1e-10, 1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1);
+                    _tempVector.applyQuaternion(this.worldQuaternionStart.clone().invert());
+                    handle.scale.copy(_tempVector);
+                    handle.visible = this.dragging;
+                } else {
+                    handle.quaternion.copy(quaternion);
+                    if (this.dragging) {
+                        handle.position.copy(this.worldPositionStart);
+                    } else {
+                        handle.position.copy(this.worldPosition);
+                    }
+                    if (this.axis) {
+                        handle.visible = this.axis.search(handle.name) !== -1;
+                    }
+                }
+                continue;
+            }
+            handle.quaternion.copy(quaternion);
+            if (this.mode === "translate" || this.mode === "scale") {
+                const AXIS_HIDE_THRESHOLD = .99;
+                const PLANE_HIDE_THRESHOLD = .2;
+                if (handle.name === "X") {
+                    if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+                if (handle.name === "Y") {
+                    if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+                if (handle.name === "Z") {
+                    if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+                if (handle.name === "XY") {
+                    if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+                if (handle.name === "YZ") {
+                    if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+                if (handle.name === "XZ") {
+                    if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_THRESHOLD) {
+                        handle.scale.set(1e-10, 1e-10, 1e-10);
+                        handle.visible = false;
+                    }
+                }
+            } else if (this.mode === "rotate") {
+                _tempQuaternion2.copy(quaternion);
+                _alignVector.copy(this.eye).applyQuaternion(_tempQuaternion.copy(quaternion).invert());
+                if (handle.name.search("E") !== -1) {
+                    handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(this.eye, _zeroVector, _unitY));
+                }
+                if (handle.name === "X") {
+                    _tempQuaternion.setFromAxisAngle(_unitX, Math.atan2(-_alignVector.y, _alignVector.z));
+                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+                    handle.quaternion.copy(_tempQuaternion);
+                }
+                if (handle.name === "Y") {
+                    _tempQuaternion.setFromAxisAngle(_unitY, Math.atan2(_alignVector.x, _alignVector.z));
+                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+                    handle.quaternion.copy(_tempQuaternion);
+                }
+                if (handle.name === "Z") {
+                    _tempQuaternion.setFromAxisAngle(_unitZ, Math.atan2(_alignVector.y, _alignVector.x));
+                    _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion);
+                    handle.quaternion.copy(_tempQuaternion);
+                }
+            }
+            handle.visible = handle.visible && (handle.name.indexOf("X") === -1 || this.showX);
+            handle.visible = handle.visible && (handle.name.indexOf("Y") === -1 || this.showY);
+            handle.visible = handle.visible && (handle.name.indexOf("Z") === -1 || this.showZ);
+            handle.visible = handle.visible && (handle.name.indexOf("E") === -1 || this.showX && this.showY && this.showZ);
+            handle.material._color = handle.material._color || handle.material.color.clone();
+            handle.material._opacity = handle.material._opacity || handle.material.opacity;
+            handle.material.color.copy(handle.material._color);
+            handle.material.opacity = handle.material._opacity;
+            if (this.enabled && this.axis) {
+                if (handle.name === this.axis) {
+                    handle.material.color.setHex(16776960);
+                    handle.material.opacity = 1;
+                } else if (this.axis.split("").some((function(a) {
+                    return handle.name === a;
+                }))) {
+                    handle.material.color.setHex(16776960);
+                    handle.material.opacity = 1;
+                }
+            }
+        }
+        super.updateMatrixWorld(force);
+    }
+}
+
+class TransformControlsPlane extends Mesh {
+    constructor() {
+        super(new PlaneGeometry(1e5, 1e5, 2, 2), new MeshBasicMaterial({
+            visible: false,
+            wireframe: true,
+            side: DoubleSide,
+            transparent: true,
+            opacity: .1,
+            toneMapped: false
+        }));
+        this.isTransformControlsPlane = true;
+        this.type = "TransformControlsPlane";
+    }
+    updateMatrixWorld(force) {
+        let space = this.space;
+        this.position.copy(this.worldPosition);
+        if (this.mode === "scale") space = "local";
+        _v1.copy(_unitX).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
+        _v2.copy(_unitY).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
+        _v3.copy(_unitZ).applyQuaternion(space === "local" ? this.worldQuaternion : _identityQuaternion);
+        _alignVector.copy(_v2);
+        switch (this.mode) {
+          case "translate":
+          case "scale":
+            switch (this.axis) {
+              case "X":
+                _alignVector.copy(this.eye).cross(_v1);
+                _dirVector.copy(_v1).cross(_alignVector);
+                break;
+
+              case "Y":
+                _alignVector.copy(this.eye).cross(_v2);
+                _dirVector.copy(_v2).cross(_alignVector);
+                break;
+
+              case "Z":
+                _alignVector.copy(this.eye).cross(_v3);
+                _dirVector.copy(_v3).cross(_alignVector);
+                break;
+
+              case "XY":
+                _dirVector.copy(_v3);
+                break;
+
+              case "YZ":
+                _dirVector.copy(_v1);
+                break;
+
+              case "XZ":
+                _alignVector.copy(_v3);
+                _dirVector.copy(_v2);
+                break;
+
+              case "XYZ":
+              case "E":
+                _dirVector.set(0, 0, 0);
+                break;
+            }
+            break;
+
+          case "rotate":
+          default:
+            _dirVector.set(0, 0, 0);
+        }
+        if (_dirVector.length() === 0) {
+            this.quaternion.copy(this.cameraQuaternion);
+        } else {
+            _tempMatrix.lookAt(_tempVector.set(0, 0, 0), _dirVector, _alignVector);
+            this.quaternion.setFromRotationMatrix(_tempMatrix);
+        }
+        super.updateMatrixWorld(force);
+    }
+}
+
+class PlaneHelper extends Line {
+    constructor(plane, size = 1, color = 16776960, offset = new Vector3) {
+        const positions = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0 ];
+        const geometry = new BufferGeometry;
+        geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+        geometry.computeBoundingSphere();
+        super(geometry, new LineBasicMaterial({
+            color: color,
+            toneMapped: false
+        }));
+        this.type = "PlaneHelper";
+        this.plane = plane;
+        this.size = size;
+        this.offset = offset;
+        const positions2 = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0 ];
+        const geometry2 = new BufferGeometry;
+        geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
+        geometry2.computeBoundingSphere();
+        this.helper = new Mesh(geometry2, new MeshBasicMaterial({
+            color: color,
+            opacity: .2,
+            transparent: true,
+            depthWrite: false,
+            toneMapped: false,
+            side: DoubleSide
+        }));
+        this.add(this.helper);
+    }
+    dispose() {
+        this.geometry.dispose();
+        this.material.dispose();
+        this.children[0].geometry.dispose();
+        this.children[0].material.dispose();
+    }
+    updateMatrixWorld(force) {
+        this.position.set(0, 0, 0);
+        this.lookAt(this.plane.normal);
+        this.position.copy(this.offset);
+        this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
+        this.scale.set(.5 * this.size, .5 * this.size, 1);
+        super.updateMatrixWorld(force);
+    }
+}
+
+class CuttingPlaneDragger extends OrbitDragger {
+    constructor(viewer, normal, color) {
+        super(viewer);
+        this.transformChange = () => {
+            this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+            this.viewer.update();
+        };
+        this.transformDrag = event => {
+            this.orbit.enabled = !event.value;
+        };
+        this.viewerExplode = () => {
+            this.planeHelper.size = this.viewer.extents.getSize(new Vector3).length();
+            this.viewer.update();
+        };
+        this.onDoubleClick = event => {
+            event.stopPropagation();
+            this.plane.negate();
+            this.viewer.update();
+        };
+        const size = viewer.extents.getSize(new Vector3).length();
+        const center = viewer.extents.getCenter(new Vector3);
+        const constant = -center.dot(normal);
+        this.plane = new Plane(normal, constant);
+        if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
+        viewer.renderer.clippingPlanes.push(this.plane);
+        this.planeHelper = new PlaneHelper(this.plane, size, color, center);
+        this.viewer.helpers.add(this.planeHelper);
+        this.planeCenter = new Object3D;
+        this.planeCenter.position.copy(viewer.extents.getCenter(new Vector3));
+        this.viewer.helpers.add(this.planeCenter);
+        this.transform = new TransformControls(viewer.camera, viewer.canvas);
+        this.transform.showX = !!normal.x;
+        this.transform.showY = !!normal.y;
+        this.transform.showZ = !!normal.z;
+        this.transform.attach(this.planeCenter);
+        this.transform.addEventListener("change", this.transformChange);
+        this.transform.addEventListener("dragging-changed", this.transformDrag);
+        this.viewer.helpers.add(this.transform);
+        this.viewer.on("explode", this.viewerExplode);
+        this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+        this.viewer.update();
+    }
+    dispose() {
+        this.viewer.off("explode", this.viewerExplode);
+        this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+        this.transform.removeEventListener("change", this.transformChange);
+        this.transform.removeEventListener("dragging-changed", this.transformDrag);
+        this.transform.removeFromParent();
+        this.transform.dispose();
         this.planeHelper.removeFromParent();
+        this.planeHelper.dispose();
+        this.planeCenter.removeFromParent();
+        super.dispose();
     }
-    update() {}
-    screenToWorld(v) {
-        v.x = 2 * v.x / this.viewer.canvas.clientWidth - 1;
-        v.y = 1 - 2 * v.y / this.viewer.canvas.clientHeight;
-        return v.unproject(this.viewer.camera);
-    }
-    screenToPlane(v) {
-        v = this.screenToWorld(v);
-        const direction = v.sub(this.viewer.camera.position).normalize();
-        const ray = new THREE.Ray(this.viewer.camera.position, direction);
-        let plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-        const dot = plane.normal.dot(this.plane.normal);
-        if (Math.abs(dot) === 1) {
-            plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
-        }
-        const result = new THREE.Vector3;
-        ray.intersectPlane(plane, result);
-        return result;
+}
+
+class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(1, 0, 0), 16711680);
+    }
+}
+
+class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(0, 1, 0), 65280);
+    }
+}
+
+class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(0, 0, 1), 255);
+    }
+}
+
+class ExtentsComponent {
+    constructor(viewer) {
+        this.syncExtents = () => {
+            const extents = this.viewer.models.reduce(((result, gltf) => {
+                const modelExtents = (new Box3).setFromObject(gltf.scene);
+                return result.isEmpty() ? result.copy(modelExtents) : result.union(modelExtents);
+            }), new Box3);
+            this.viewer.extents.copy(extents);
+            this.viewer.target.copy(extents.getCenter(new Vector3));
+        };
+        this.viewer = viewer;
+        this.viewer.addEventListener("geometryend", this.syncExtents);
+        this.viewer.addEventListener("clear", this.syncExtents);
+        this.viewer.on("explode", this.syncExtents);
+    }
+    dispose() {
+        this.viewer.removeEventListener("geometryend", this.syncExtents);
+        this.viewer.removeEventListener("clear", this.syncExtents);
+        this.viewer.off("explode", this.syncExtents);
     }
 }
 
 class LightComponent {
     constructor(viewer) {
         this.viewer = viewer;
-        this.ambientLight = new THREE.AmbientLight(16777215, 0);
+        this.ambientLight = new AmbientLight(16777215, 0);
         this.viewer.camera.add(this.ambientLight);
-        this.directLight = new THREE.DirectionalLight(16777215, 1);
-        this.directLight.position.set(.5, 0, .866);
-        this.viewer.camera.add(this.directLight);
+        this.directionalLight = new DirectionalLight(16777215, 1);
+        this.directionalLight.position.set(.5, 0, .866);
+        this.viewer.camera.add(this.directionalLight);
     }
     dispose() {
         this.ambientLight.removeFromParent();
-        this.directLight.removeFromParent();
+        this.ambientLight = undefined;
+        this.directionalLight.removeFromParent();
+        this.directionalLight = undefined;
     }
 }
 
@@ -789,9 +2933,10 @@ class BackgroundComponent {
             this.backgroundColor.setHex(16777215);
         };
         this.viewer = viewer;
-        this.backgroundColor = new THREE.Color(16777215);
+        this.backgroundColor = new Color(16777215);
         const environment = new RoomEnvironment;
-        const pmremGenerator = new THREE.PMREMGenerator(this.viewer.renderer);
+        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
+        this.viewer.renderer.setClearColor(this.backgroundColor);
         this.viewer.scene.background = this.backgroundColor;
         this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
         this.viewer.addEventListener("optionschange", this.syncOptions);
@@ -804,26 +2949,16 @@ class BackgroundComponent {
     }
 }
 
-class DefaultCameraPositionComponent {
+class DefaultPositionComponent {
     constructor(viewer) {
         this.geometryEnd = event => {
-            const {data: scene} = event;
-            scene.updateMatrixWorld();
-            const box = (new THREE.Box3).setFromObject(scene);
-            const size = box.getSize(new THREE.Vector3).length();
-            const center = box.getCenter(new THREE.Vector3);
-            scene.position.x += scene.position.x - center.x;
-            scene.position.y += scene.position.y - center.y;
-            scene.position.z += scene.position.z - center.z;
+            const box = this.viewer.extents;
+            const size = box.getSize(new Vector3).length();
             this.viewer.camera.near = size / 100;
             this.viewer.camera.far = size * 100;
-            this.viewer.camera.position.copy(center);
-            this.viewer.camera.position.x += size / 2;
-            this.viewer.camera.position.y += size / 5;
-            this.viewer.camera.position.z += size / 2;
             this.viewer.camera.updateMatrixWorld();
             this.viewer.camera.updateProjectionMatrix();
-            this.viewer.camera.lookAt(center);
+            this.viewer.executeCommand("zoomToExtents");
         };
         this.viewer = viewer;
         this.viewer.addEventListener("geometryend", this.geometryEnd);
@@ -859,38 +2994,136 @@ class ResizeCanvasComponent {
 
 class RenderLoopComponent {
     constructor(viewer) {
-        this.requestID = 0;
         this.animate = (time = 0) => {
-            this.requestID = requestAnimationFrame(this.animate);
+            this.requestId = requestAnimationFrame(this.animate);
             this.viewer.render(time);
         };
         this.viewer = viewer;
         this.animate();
     }
     dispose() {
-        cancelAnimationFrame(this.requestID);
+        cancelAnimationFrame(this.requestId);
+    }
+}
+
+class WCSHelper extends Object3D {
+    constructor(camera) {
+        super();
+        this.camera = camera;
+        this.size = 160;
+        this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
+        this.orthoCamera.position.set(0, 0, 2);
+        const matRed = new MeshBasicMaterial({
+            toneMapped: false,
+            color: "#aa0000"
+        });
+        const matGreen = new MeshBasicMaterial({
+            toneMapped: false,
+            color: "#00aa00"
+        });
+        const matBlue = new MeshBasicMaterial({
+            toneMapped: false,
+            color: "#0000aa"
+        });
+        const spriteRed = this.getSpriteMaterial(matRed.color, "X");
+        const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
+        const spriteBlue = this.getSpriteMaterial(matBlue.color, "Z");
+        const lineGeometry = new CylinderGeometry(.01, .01, 1, 3);
+        lineGeometry.translate(0, .5, 0);
+        const arrowGeometry = new CylinderGeometry(0, .1, .25, 12);
+        arrowGeometry.translate(0, .625, 0);
+        const axesMap = {
+            X: [ [ new Mesh(arrowGeometry, matRed), [ .5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Mesh(lineGeometry, matRed), [ 0, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ], [ new Sprite(spriteRed), [ 1.55, 0, 0 ] ] ],
+            Y: [ [ new Mesh(arrowGeometry, matGreen), [ 0, .5, 0 ], null ], [ new Mesh(lineGeometry, matGreen), null, null ], [ new Sprite(spriteGreen), [ 0, 1.55, 0 ] ] ],
+            Z: [ [ new Mesh(arrowGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry, matBlue), null, [ Math.PI / 2, 0, 0 ] ], [ new Sprite(spriteBlue), [ 0, 0, 1.55 ] ] ]
+        };
+        Object.keys(axesMap).forEach((key => {
+            axesMap[key].forEach((objects => {
+                const object = objects[0];
+                const position = objects[1];
+                const rotation = objects[2];
+                object.name = key;
+                if (position) object.position.set(position[0], position[1], position[2]);
+                if (rotation) object.rotation.set(rotation[0], rotation[1], rotation[2]);
+                object.updateMatrixWorld();
+                this.add(object);
+            }));
+        }));
+    }
+    dispose() {
+        this.traverse((object => {
+            if (object.geometry) object.geometry.dispose();
+            if (object.material) object.material.dispose();
+        }));
+    }
+    getSpriteMaterial(color, text) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 64;
+        canvas.height = 64;
+        const context = canvas.getContext("2d");
+        context.clearRect(0, 0, 64, 64);
+        context.font = "24px Arial";
+        context.textAlign = "center";
+        context.fillStyle = color.getStyle();
+        context.fillText(text, 32, 41);
+        const texture = new CanvasTexture(canvas);
+        texture.colorSpace = SRGBColorSpace;
+        return new SpriteMaterial({
+            map: texture,
+            toneMapped: false
+        });
+    }
+    render(renderer) {
+        this.quaternion.copy(this.camera.quaternion).invert();
+        this.updateMatrixWorld();
+        const clippingPlanes = renderer.clippingPlanes;
+        const viewport = renderer.getViewport(new Vector4);
+        renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
+        renderer.clippingPlanes = [];
+        renderer.clearDepth();
+        renderer.render(this, this.orthoCamera);
+        renderer.setViewport(viewport);
+        renderer.clippingPlanes = clippingPlanes;
+    }
+}
+
+class WCSHelperComponent {
+    constructor(viewer) {
+        this.viewerRender = () => {
+            if (!this.viewer.extents.isEmpty()) this.wcsHelper.render(this.viewer.renderer);
+        };
+        this.wcsHelper = new WCSHelper(viewer.camera);
+        this.viewer = viewer;
+        this.viewer.addEventListener("render", this.viewerRender);
+    }
+    dispose() {
+        this.viewer.removeEventListener("render", this.viewerRender);
+        this.wcsHelper.dispose();
     }
 }
 
 class Viewer extends EventEmitter2 {
     constructor(client) {
         super();
-        this.renderNeeded = false;
         this._options = new Options(this);
         this.client = client;
-        this.canvasEvents = CANVAS_EVENTS.slice();
+        this.canvasEvents = CANVAS_EVENTS;
         this.canvaseventlistener = event => this.emit(event);
+        this.extents = new Box3;
+        this.target = new Vector3;
         this.draggerFactory = {
             Pan: PanDragger,
             Zoom: ZoomDragger,
             Orbit: OrbitDragger,
             Walk: WalkDragger,
-            Clipping: ClippingPlaneDragger
+            CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
+            CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
+            CuttingPlaneZAxis: CuttingPlaneZAxisDragger
         };
         this._activeDragger = null;
         this.models = [];
         this.components = [];
-        this.selectedObjects = [];
+        this.selected = [];
         this.renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
@@ -903,30 +3136,35 @@ class Viewer extends EventEmitter2 {
     }
     initialize(canvas, onProgress) {
         this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
-        this.scene = new THREE.Scene;
+        this.scene = new Scene;
+        this.helpers = new Scene;
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
         const height = rect.height || 1;
-        this.camera = new THREE.PerspectiveCamera(45, width / height, .01, 1e3);
+        this.camera = new PerspectiveCamera(45, width / height, .01, 1e3);
         this.camera.up.set(0, 0, 1);
-        this.renderer = new THREE.WebGLRenderer({
+        this.renderer = new WebGLRenderer({
             canvas: canvas,
-            antialias: true
+            antialias: true,
+            preserveDrawingBuffer: true
         });
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
-        this.renderer.toneMapping = THREE.LinearToneMapping;
+        this.renderer.toneMapping = LinearToneMapping;
         this.canvas = canvas;
         this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
+        this.components.push(new ExtentsComponent(this));
         this.components.push(new LightComponent(this));
         this.components.push(new BackgroundComponent(this));
-        this.components.push(new DefaultCameraPositionComponent(this));
+        this.components.push(new DefaultPositionComponent(this));
         this.components.push(new ResizeCanvasComponent(this));
         this.components.push(new RenderLoopComponent(this));
+        this.components.push(new SelectionComponent(this));
+        this.components.push(new WCSHelperComponent(this));
         this.syncOptions();
         this.renderTime = performance.now();
         this.render(this.renderTime);
-        if (onProgress) onProgress(new ProgressEvent("progress", {
+        if (typeof onProgress === "function") onProgress(new ProgressEvent("progress", {
             lengthComputable: true,
             loaded: 1,
             total: 1
@@ -951,6 +3189,7 @@ class Viewer extends EventEmitter2 {
         this.components = [];
         this.setActiveDragger("");
         this.removeAllListeners();
+        this.clear();
         if (this.canvas) {
             this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
             this.canvas = undefined;
@@ -959,6 +3198,7 @@ class Viewer extends EventEmitter2 {
         this.renderer = undefined;
         this.camera = undefined;
         this.scene = undefined;
+        this.helpers = undefined;
         return this;
     }
     isInitialized() {
@@ -967,10 +3207,15 @@ class Viewer extends EventEmitter2 {
     render(time) {
         if (!this.renderNeeded) return;
         if (!this.renderer) return;
-        if (!this.scene) return;
-        if (!this.camera) return;
-        this.renderer.render(this.scene, this.camera);
         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({
@@ -1055,6 +3300,7 @@ class Viewer extends EventEmitter2 {
             this.models.push(gltf);
             this.scene.add(gltf.scene);
             this.update();
+            this.resetActiveDragger();
             this.emitEvent({
                 type: "databasechunk"
             });
@@ -1074,6 +3320,7 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     clear() {
+        if (!this.renderer) return this;
         function disposeMaterial(material) {
             const materials = Array.isArray(material) ? material : [ material ];
             materials.forEach((material => {
@@ -1084,49 +3331,97 @@ class Viewer extends EventEmitter2 {
             if (object.geometry) object.geometry.dispose();
             if (object.material) disposeMaterial(object.material);
         }
-        this.selectedObjects = [];
+        this.setActiveDragger();
+        this.selected = [];
+        this.renderer.clippingPlanes = [];
+        this.helpers.traverse(disposeObject);
+        this.helpers.clear();
         this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));
         this.models.forEach((gltf => gltf.scene.removeFromParent()));
         this.models = [];
-        this.update();
+        this.scene.clear();
         this.emitEvent({
             type: "clear"
         });
+        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;
     }
-    setActiveDragger(name) {
+    setActiveDragger(name = "") {
         if (!this._activeDragger || this._activeDragger.name !== name) {
             if (this._activeDragger) {
                 this._activeDragger.dispose();
                 this._activeDragger = null;
             }
-            const Constructor = this.draggerFactory[name];
-            if (Constructor) {
-                this._activeDragger = new Constructor(this);
-                this._activeDragger.name = name;
+            if (this.isInitialized()) {
+                const Constructor = this.draggerFactory[name];
+                if (Constructor) {
+                    this._activeDragger = new Constructor(this);
+                    this._activeDragger.name = name;
+                }
+            }
+            const canvas = this.canvas;
+            if (canvas) {
+                canvas.className = canvas.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${name.toLowerCase()}`).join(" ");
             }
+            this.emitEvent({
+                type: "changeactivedragger",
+                data: name
+            });
         }
         return this._activeDragger;
     }
     resetActiveDragger() {
         const dragger = this._activeDragger;
         if (dragger) {
-            this.setActiveDragger("");
+            this.setActiveDragger();
             this.setActiveDragger(dragger.name);
         }
     }
     is3D() {
-        return false;
+        return true;
     }
     executeCommand(id, ...args) {
         return commands("ThreeJS").executeCommand(id, this, ...args);
     }
+    getComponent(type) {
+        return this.components.find((component => component instanceof type));
+    }
     drawViewpoint(viewpoint) {}
     createViewpoint() {
-        return {};
+        var _a;
+        const viewpoint = {};
+        viewpoint.snapshot = {
+            data: (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL("image/jpeg", .25)
+        };
+        viewpoint.description = (new Date).toDateString();
+        return viewpoint;
     }
 }