@inweb/viewer-three 26.1.2 → 26.1.4

package/dist/viewer-three.module.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, MathUtils, Color, PMREMGenerator, AmbientLight, DirectionalLight, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Vector3, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, Color, PMREMGenerator, AmbientLight, DirectionalLight, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
@@ -43,7 +43,7 @@ class CommandsRegistry {
         }
         const {handler: handler, thisArg: thisArg} = command;
         const result = handler.apply(thisArg, [ viewer, ...args ]);
-        viewer === null || viewer === undefined ? undefined : viewer.emit({
+        viewer === null || viewer === void 0 ? void 0 : viewer.emit({
             type: "command",
             data: id,
             args: args
@@ -539,8 +539,8 @@ class KonvaLine {
         const konvaPoints = [];
         params.points.forEach((point => konvaPoints.push(point.x, point.y)));
         this._ref = new Konva.Line({
-            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-            strokeWidth: (_b = params.width) !== null && _b !== undefined ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
@@ -647,12 +647,12 @@ class KonvaText {
             x: params.position.x,
             y: params.position.y,
             text: params.text,
-            fontSize: (_a = params.fontSize) !== null && _a !== undefined ? _a : 34,
+            fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
             fontFamily: this.TEXT_FONT_FAMILY,
-            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
             align: "left",
             draggable: true,
-            rotation: (_c = params.rotation) !== null && _c !== undefined ? _c : 0
+            rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
         });
         this._ref.width(this._ref.getTextWidth());
         this._ref.on("transform", (e => {
@@ -750,15 +750,15 @@ class KonvaRectangle {
             y: 100
         };
         this._ref = new Konva.Rect({
-            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
             x: params.position.x,
             y: params.position.y,
-            width: (_c = params.width) !== null && _c !== undefined ? _c : 200,
-            height: (_d = params.height) !== null && _d !== undefined ? _d : 200,
+            width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
+            height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
             draggable: true,
             strokeScaleEnabled: false
         });
@@ -868,8 +868,8 @@ class KonvaEllipse {
             y: 25
         };
         this._ref = new Konva.Ellipse({
-            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-            strokeWidth: (_b = params.lineWidth) !== null && _b !== undefined ? _b : 4,
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
@@ -998,8 +998,8 @@ class KonvaArrow {
             y: 100
         };
         this._ref = new Konva.Arrow({
-            stroke: (_a = params.color) !== null && _a !== undefined ? _a : "#ff0000",
-            fill: (_b = params.color) !== null && _b !== undefined ? _b : "#ff0000",
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
             strokeWidth: 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
@@ -1139,8 +1139,8 @@ class KonvaImage {
             x: params.position.x,
             y: params.position.y,
             image: this._canvasImage,
-            width: (_a = params.width) !== null && _a !== undefined ? _a : 0,
-            height: (_b = params.height) !== null && _b !== undefined ? _b : 0,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
             draggable: true
         });
         this._ref.on("transform", (e => {
@@ -1250,10 +1250,10 @@ class KonvaCloud {
         this._ref = new Konva.Shape({
             x: params.position.x,
             y: params.position.y,
-            width: (_a = params.width) !== null && _a !== undefined ? _a : 200,
-            height: (_b = params.height) !== null && _b !== undefined ? _b : 200,
-            stroke: (_c = params.color) !== null && _c !== undefined ? _c : "#ff0000",
-            strokeWidth: (_d = params.lineWidth) !== null && _d !== undefined ? _d : 4,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
+            stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
+            strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
             draggable: true,
             strokeScaleEnabled: false,
             globalCompositeOperation: "source-over",
@@ -1502,9 +1502,9 @@ class KonvaMarkup {
     initialize(container, containerEvents, viewer, worldTransformer) {
         if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
         this._viewer = viewer;
-        this._worldTransformer = worldTransformer !== null && worldTransformer !== undefined ? worldTransformer : new WorldTransform;
+        this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
         this._container = container;
-        this._containerEvents = containerEvents !== null && containerEvents !== undefined ? containerEvents : [];
+        this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
         this._markupContainer = document.createElement("div");
         this._markupContainer.id = "markup-container";
         this._markupContainer.style.position = "absolute";
@@ -1532,9 +1532,9 @@ class KonvaMarkup {
             this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
         }
         this.destroyKonva();
-        (_a = this._resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this._resizeObserver = undefined;
-        (_b = this._markupContainer) === null || _b === undefined ? undefined : _b.remove();
+        (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
         this._markupContainer = undefined;
         this._container = undefined;
         this._viewer = undefined;
@@ -1566,14 +1566,14 @@ class KonvaMarkup {
         const hexColor = new MarkupColor(r, g, b).asHex();
         this.getObjects().filter((obj => {
             var _a;
-            return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
     }
     colorizeSelectedMarkups(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).asHex();
         this.getSelectedObjects().filter((obj => {
             var _a;
-            return (_a = obj.setColor) === null || _a === undefined ? undefined : _a.call(obj, hexColor);
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
     }
     setViewpoint(viewpoint) {
@@ -1589,13 +1589,13 @@ class KonvaMarkup {
             x: 0,
             y: 0
         });
-        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === undefined ? undefined : _a.markup_color) || {
+        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
             r: 255,
             g: 0,
             b: 0
         };
         this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-        (_b = viewpoint.lines) === null || _b === undefined ? undefined : _b.forEach((line => {
+        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line => {
             const linePoints = [];
             line.points.forEach((point => {
                 const screenPoint = this._worldTransformer.worldToScreen(point);
@@ -1604,28 +1604,28 @@ class KonvaMarkup {
             }));
             this.addLine(linePoints, line.color, line.type, line.width, line.id);
         }));
-        (_c = viewpoint.texts) === null || _c === undefined ? undefined : _c.forEach((text => {
+        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text => {
             const screenPoint = this._worldTransformer.worldToScreen(text.position);
             this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
         }));
-        (_d = viewpoint.rectangles) === null || _d === undefined ? undefined : _d.forEach((rect => {
+        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect => {
             const screenPoint = this._worldTransformer.worldToScreen(rect.position);
             this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
         }));
-        (_e = viewpoint.ellipses) === null || _e === undefined ? undefined : _e.forEach((ellipse => {
+        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse => {
             const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
             this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
         }));
-        (_f = viewpoint.arrows) === null || _f === undefined ? undefined : _f.forEach((arrow => {
+        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow => {
             const startPoint = this._worldTransformer.worldToScreen(arrow.start);
             const endPoint = this._worldTransformer.worldToScreen(arrow.end);
             this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
         }));
-        (_g = viewpoint.clouds) === null || _g === undefined ? undefined : _g.forEach((cloud => {
+        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud => {
             const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
             this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
         }));
-        (_h = viewpoint.images) === null || _h === undefined ? undefined : _h.forEach((image => {
+        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image => {
             const screenPoint = this._worldTransformer.worldToScreen(image.position);
             this.addImage(screenPoint, image.src, image.width, image.height, image.id);
         }));
@@ -1919,7 +1919,7 @@ class KonvaMarkup {
         this.removeTextInput();
         this.removeImageInput();
         this.clearOverlay();
-        (_a = this._konvaStage) === null || _a === undefined ? undefined : _a.destroy();
+        (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
         this._groupImages = undefined;
         this._groupGeometry = undefined;
         this._groupTexts = undefined;
@@ -2169,7 +2169,7 @@ class KonvaMarkup {
     }
     removeTextInput() {
         var _a;
-        (_a = this._textInputRef) === null || _a === undefined ? undefined : _a.remove();
+        (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
         this._textInputRef = null;
         this._textInputPos = null;
         this._textInputAngle = 0;
@@ -2212,14 +2212,14 @@ class KonvaMarkup {
     }
     removeImageInput() {
         var _a;
-        (_a = this._imageInputRef) === null || _a === undefined ? undefined : _a.remove();
+        (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
         this._imageInputRef = null;
         this._imageInputPos = null;
     }
     addText(text, position, angle, color, textSize, fontSize, id) {
         var _a;
         if (!text) return;
-        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
         this.clearSelected();
         this.removeTextInput();
         const tolerance = 1e-6;
@@ -2294,7 +2294,7 @@ class KonvaMarkup {
     addImage(position, src, width, height, id) {
         var _a;
         if (!position || !src) return;
-        (_a = this.getSelectedObjects().at(0)) === null || _a === undefined ? undefined : _a.delete();
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
         this.clearSelected();
         this.removeImageInput();
         const konvaImage = new KonvaImage({
@@ -3049,7 +3049,6 @@ class OrbitDragger {
         this.updateControls = () => {
             this.orbit.maxDistance = this.viewer.camera.far;
             this.orbit.minDistance = this.viewer.camera.near;
-            this.orbit.object = this.viewer.camera;
             this.orbit.target.copy(this.viewer.target);
             this.orbit.update();
         };
@@ -3104,20 +3103,19 @@ class OrbitDragger {
         this.orbit.addEventListener("change", this.controlsChange);
         this.changed = false;
         this.viewer = viewer;
-        this.viewer.addEventListener("databasechunk", this.updateControls);
+        this.viewer.on("geometryend", this.updateControls);
         this.viewer.on("viewposition", this.updateControls);
-        this.viewer.addEventListener("zoom", this.updateControls);
-        this.viewer.addEventListener("drawviewpoint", this.updateControls);
-        this.viewer.addEventListener("contextmenu", this.stopContextMenu);
+        this.viewer.on("zoom", this.updateControls);
+        this.viewer.on("drawviewpoint", this.updateControls);
+        this.viewer.on("contextmenu", this.stopContextMenu);
         this.updateControls();
     }
-    initialize() {}
     dispose() {
-        this.viewer.removeEventListener("databasechunk", this.updateControls);
+        this.viewer.off("geometryend", this.updateControls);
         this.viewer.off("viewposition", this.updateControls);
-        this.viewer.removeEventListener("zoom", this.updateControls);
-        this.viewer.removeEventListener("drawviewpoint", this.updateControls);
-        this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
+        this.viewer.off("zoom", this.updateControls);
+        this.viewer.off("drawviewpoint", this.updateControls);
+        this.viewer.off("contextmenu", this.stopContextMenu);
         this.orbit.removeEventListener("start", this.controlsStart);
         this.orbit.removeEventListener("change", this.controlsChange);
         this.orbit.dispose();
@@ -3895,43 +3893,45 @@ function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
     return viewer.canvas.toDataURL(type, encoderOptions);
 }
 
-function calcExplodeDepth(object, depth) {
+function calcObjectDepth(object, depth) {
     let res = depth;
     object.children.forEach((x => {
-        const objectDepth = calcExplodeDepth(x, depth + 1);
+        const objectDepth = calcObjectDepth(x, depth + 1);
         if (res < objectDepth) res = objectDepth;
     }));
     object.originalPosition = object.position.clone();
-    object.originalCenter = (new Box3).setFromObject(object).getCenter(new Vector3);
-    object.isExplodeLocked = depth > 2 && object.children.length === 0;
     return res;
 }
 
-function explodeScene(scene, scale = 0, coeff = 4) {
+function explodeScene(scene, scale = 0) {
     scale /= 100;
-    if (!scene.explodeDepth) scene.explodeDepth = calcExplodeDepth(scene, 1);
-    const maxDepth = scene.explodeDepth;
-    const scaledExplodeDepth = scale * maxDepth + 1;
-    const explodeDepth = 0 | scaledExplodeDepth;
-    const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
-    function explodeObject(object, depth) {
-        object.position.copy(object.originalPosition);
-        if (depth > 0 && depth <= explodeDepth && !object.isExplodeLocked) {
-            let objectScale = scale * coeff;
-            if (depth === explodeDepth) objectScale *= currentSegmentFraction;
-            const parentCenter = object.parent.originalCenter;
-            const objectCenter = object.originalCenter;
-            const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
-            object.position.add(objectOffset);
+    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));
         }
-        object.children.forEach((x => explodeObject(x, depth + 1)));
     }
-    explodeObject(scene, 0);
+    const sceneExtents = (new Box3).setFromObject(scene);
+    const sceneCenter = sceneExtents.getCenter(new Vector3);
+    explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
 }
 
 function explode(viewer, index = 0) {
-    viewer.models.forEach((model => explodeScene(model.scene, index)));
-    viewer.scene.updateMatrixWorld();
+    viewer.models.forEach((gltf => explodeScene(gltf.scene, index)));
     viewer.update();
     viewer.emitEvent({
         type: "explode",
@@ -3943,40 +3943,6 @@ function collect(viewer) {
     explode(viewer, 0);
 }
 
-function zoomTo(viewer, box) {
-    if (box.isEmpty()) return;
-    const center = box.getCenter(new Vector3);
-    const sphere = box.getBoundingSphere(new Sphere);
-    const rendererSize = viewer.renderer.getSize(new Vector2);
-    const aspect = rendererSize.x / rendererSize.y;
-    const camera = viewer.camera;
-    if (camera.isPerspectiveCamera) {
-        const offset = new Vector3(0, 0, 1);
-        offset.applyQuaternion(camera.quaternion);
-        offset.multiplyScalar(sphere.radius / Math.tan(MathUtils.DEG2RAD * camera.fov * .5));
-        camera.position.copy(center).add(offset);
-        camera.updateMatrixWorld();
-    }
-    if (camera.isOrthographicCamera) {
-        camera.top = sphere.radius;
-        camera.bottom = -sphere.radius;
-        camera.left = camera.bottom * aspect;
-        camera.right = camera.top * aspect;
-        camera.zoom = 1;
-        camera.updateProjectionMatrix();
-        const offset = new Vector3(0, 0, 1);
-        offset.applyQuaternion(camera.quaternion);
-        offset.multiplyScalar(viewer.extents.getBoundingSphere(new Sphere).radius * 3);
-        camera.position.copy(center).add(offset);
-        camera.updateMatrixWorld();
-    }
-    viewer.target.copy(center);
-    viewer.update();
-    viewer.emitEvent({
-        type: "zoom"
-    });
-}
-
 const defaultViewPositions = {
     top: new Vector3(0, 0, 1),
     bottom: new Vector3(0, 0, -1),
@@ -3994,10 +3960,11 @@ function setDefaultViewPosition(viewer, position) {
     const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
     const center = viewer.extents.getCenter(new Vector3);
     const sphere = viewer.extents.getBoundingSphere(new Sphere);
-    const offset = direction.clone().multiplyScalar(sphere.radius);
+    const offet = direction.clone().multiplyScalar(sphere.radius);
     const camera = viewer.camera;
-    camera.position.copy(center).add(offset);
+    camera.position.copy(center).add(offet);
     camera.lookAt(center);
+    camera.updateProjectionMatrix();
     camera.updateMatrixWorld();
     viewer.target.copy(center);
     viewer.update();
@@ -4005,7 +3972,7 @@ function setDefaultViewPosition(viewer, position) {
         type: "viewposition",
         data: position
     });
-    zoomTo(viewer, viewer.extents);
+    viewer.executeCommand("zoomToExtents");
 }
 
 function getDefaultViewPositions() {
@@ -4015,14 +3982,14 @@ function getDefaultViewPositions() {
 function getModels(viewer) {
     return viewer.models.map((model => {
         var _a;
-        return ((_a = model.userData) === null || _a === undefined ? undefined : _a.handle) || "";
+        return ((_a = model.userData) === null || _a === void 0 ? void 0 : _a.handle) || "";
     })).filter((handle => handle));
 }
 
 function getSelected(viewer) {
     return viewer.selected.map((object => {
         var _a;
-        return (_a = object.userData) === null || _a === undefined ? undefined : _a.handle;
+        return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle;
     })).filter((handle => handle));
 }
 
@@ -4043,12 +4010,16 @@ function hideSelected(viewer) {
 }
 
 function isolateSelected(viewer) {
-    const visibleSet = new Set;
-    viewer.selected.forEach((object => {
-        visibleSet.add(object);
-        object.traverseAncestors((object2 => visibleSet.add(object2)));
-    }));
-    viewer.scene.traverse((object => object.visible = visibleSet.has(object)));
+    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"
@@ -4097,7 +4068,7 @@ function setSelected(viewer, handles = []) {
     const objects = [];
     viewer.scene.traverseVisible((child => {
         var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle)) objects.push(child);
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
     }));
     const selection = new SelectionComponent(viewer);
     selection.clearSelection();
@@ -4120,7 +4091,18 @@ function showAll(viewer) {
 }
 
 function zoomToExtents(viewer) {
-    zoomTo(viewer, viewer.extents);
+    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"
+    });
 }
 
 function zoomToObjects(viewer, handles = []) {
@@ -4128,17 +4110,36 @@ function zoomToObjects(viewer, handles = []) {
     const objects = [];
     viewer.scene.traverseVisible((child => {
         var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle)) objects.push(child);
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
     }));
     const extents = objects.reduce(((result, object) => result.expandByObject(object)), new Box3);
-    if (extents.isEmpty()) extents.copy(viewer.extents);
-    zoomTo(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"
+    });
 }
 
 function zoomToSelected(viewer) {
     const extents = viewer.selected.reduce(((result, object) => result.expandByObject(object)), new Box3);
     if (extents.isEmpty()) extents.copy(viewer.extents);
-    zoomTo(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"
+    });
 }
 
 const commands = commandsRegistry("threejs");
@@ -4257,70 +4258,42 @@ class BackgroundComponent {
     }
 }
 
-class CameraComponent {
+class DefaultPositionComponent {
     constructor(viewer) {
-        this.geometryEnd = () => {
-            const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius * 2;
-            const rendererSize = this.viewer.renderer.getSize(new Vector2);
-            const aspect = rendererSize.x / rendererSize.y;
-            let sceneCamera;
-            this.viewer.scene.traverse((object => {
-                if (object.isCamera) if (!sceneCamera) sceneCamera = object; else if (object.isPerspectiveCamera && sceneCamera.isOrthographicCamera) sceneCamera = object;
-            }));
-            if (sceneCamera) {
-                this.viewer.camera = sceneCamera.clone();
-                this.viewer.camera.up.set(0, 0, 1);
-                this.viewer.camera.scale.set(1, 1, 1);
-            }
-            const camera = this.viewer.camera;
-            if (camera.isPerspectiveCamera) {
-                camera.aspect = aspect;
-                camera.near = extentsSize / 100;
-                camera.far = extentsSize * 100;
-                camera.updateProjectionMatrix();
-            }
-            if (camera.isOrthographicCamera) {
-                camera.left = camera.bottom * aspect;
-                camera.right = camera.top * aspect;
-                camera.near = 0;
-                camera.far = extentsSize * 100;
-                camera.updateProjectionMatrix();
-            }
-            if (!sceneCamera) {
-                this.viewer.executeCommand("setDefaultViewPosition");
-            }
+        this.geometryEnd = event => {
+            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.updateMatrixWorld();
+            this.viewer.camera.updateProjectionMatrix();
+            this.viewer.executeCommand("setDefaultViewPosition", "sw");
+            this.viewer.executeCommand("zoomToExtents");
         };
         this.viewer = viewer;
-        this.viewer.addEventListener("databasechunk", this.geometryEnd);
+        this.viewer.addEventListener("geometryend", this.geometryEnd);
     }
     dispose() {
-        this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+        this.viewer.removeEventListener("geometryend", this.geometryEnd);
     }
 }
 
 class ExtentsComponent {
     constructor(viewer) {
         this.syncExtents = () => {
-            const extents = new Box3;
-            this.viewer.scene.traverseVisible((object => !object.children.length && extents.expandByObject(object)));
+            const extents = this.viewer.models.reduce(((result, gltf) => result.expandByObject(gltf.scene)), new Box3);
             this.viewer.extents.copy(extents);
             this.viewer.target.copy(extents.getCenter(new Vector3));
         };
         this.viewer = viewer;
-        this.viewer.addEventListener("databasechunk", this.syncExtents);
+        this.viewer.addEventListener("geometryend", this.syncExtents);
         this.viewer.addEventListener("clear", this.syncExtents);
         this.viewer.on("explode", this.syncExtents);
-        this.viewer.on("isolate", this.syncExtents);
-        this.viewer.on("hide", this.syncExtents);
-        this.viewer.on("showall", this.syncExtents);
     }
     dispose() {
-        this.viewer.removeEventListener("databasechunk", this.syncExtents);
+        this.viewer.removeEventListener("geometryend", this.syncExtents);
         this.viewer.removeEventListener("clear", this.syncExtents);
         this.viewer.off("explode", this.syncExtents);
-        this.viewer.off("isolate", this.syncExtents);
-        this.viewer.off("hide", this.syncExtents);
-        this.viewer.off("showall", this.syncExtents);
     }
 }
 
@@ -4360,17 +4333,8 @@ class ResizeCanvasComponent {
         this.resizeViewer = entries => {
             const {width: width, height: height} = entries[0].contentRect;
             if (!width || !height) return;
-            const camera = this.viewer.camera;
-            const aspect = width / height;
-            if (camera.isPerspectiveCamera) {
-                camera.aspect = aspect;
-                camera.updateProjectionMatrix();
-            }
-            if (camera.isOrthographicCamera) {
-                camera.left = camera.bottom * aspect;
-                camera.right = camera.top * aspect;
-                camera.updateProjectionMatrix();
-            }
+            this.viewer.camera.aspect = width / height;
+            this.viewer.camera.updateProjectionMatrix();
             this.viewer.renderer.setSize(width, height, true);
             this.viewer.update(true);
             this.viewer.emitEvent({
@@ -4471,10 +4435,6 @@ class WCSHelper extends Object3D {
 
 class WCSHelperComponent {
     constructor(viewer) {
-        this.geometryEnd = () => {
-            this.wcsHelper.dispose();
-            this.wcsHelper = new WCSHelper(this.viewer.camera);
-        };
         this.viewerRender = () => {
             if (!this.viewer.options.showWCS) return;
             if (this.viewer.extents.isEmpty()) return;
@@ -4482,13 +4442,9 @@ class WCSHelperComponent {
         };
         this.wcsHelper = new WCSHelper(viewer.camera);
         this.viewer = viewer;
-        this.viewer.addEventListener("databasechunk", this.geometryEnd);
-        this.viewer.addEventListener("drawviewpoint", this.geometryEnd);
         this.viewer.addEventListener("render", this.viewerRender);
     }
     dispose() {
-        this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-        this.viewer.removeEventListener("drawviewpoint", this.geometryEnd);
         this.viewer.removeEventListener("render", this.viewerRender);
         this.wcsHelper.dispose();
     }
@@ -4502,12 +4458,12 @@ components.registerComponent("LightComponent", (viewer => new LightComponent(vie
 
 components.registerComponent("BackgroundComponent", (viewer => new BackgroundComponent(viewer)));
 
-components.registerComponent("CameraComponent", (viewer => new CameraComponent(viewer)));
-
 components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
 
 components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
 
+components.registerComponent("DefaultPositionComponent", (viewer => new DefaultPositionComponent(viewer)));
+
 components.registerComponent("SelectionComponent", (viewer => new SelectionComponent(viewer)));
 
 components.registerComponent("WCSHelperComponent", (viewer => new WCSHelperComponent(viewer)));
@@ -4535,7 +4491,7 @@ class GLTFLoadingManager extends LoadingManager {
         this.setURLModifier((url => {
             const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
             const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== undefined ? dataURL : url;
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
         }));
     }
     dispose() {
@@ -4619,8 +4575,7 @@ class Viewer extends EventEmitter2 {
         const rect = canvas.parentElement.getBoundingClientRect();
         const width = rect.width || 1;
         const height = rect.height || 1;
-        const aspect = width / height;
-        this.camera = new PerspectiveCamera(45, aspect, .01, 1e3);
+        this.camera = new PerspectiveCamera(45, width / height, .01, 1e3);
         this.camera.up.set(0, 0, 1);
         this.renderer = new WebGLRenderer({
             canvas: canvas,
@@ -4633,7 +4588,7 @@ class Viewer extends EventEmitter2 {
         this.canvas = canvas;
         this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
         this._markup.initialize(this.canvas, this.canvasEvents, this, this);
-        for (const name of components.getComponents().keys()) {
+        for (let name of components.getComponents().keys()) {
             this._components.push(components.createComponent(name, this));
         }
         this.syncOptions();
@@ -4694,7 +4649,7 @@ class Viewer extends EventEmitter2 {
         this.renderer.autoClear = false;
         this.renderer.render(this.helpers, this.camera);
         this.renderer.clippingPlanes = clippingPlanes;
-        (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
         const deltaTime = (time - this.renderTime) / 1e3;
         this.renderTime = time;
         this.emitEvent({
@@ -4884,7 +4839,7 @@ class Viewer extends EventEmitter2 {
                 newDragger = draggers.createDragger(name, this);
                 if (newDragger) {
                     this._activeDragger = newDragger;
-                    (_b = (_a = this._activeDragger).initialize) === null || _b === undefined ? undefined : _b.call(_a);
+                    (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
             }
             const canvas = this.canvas;
@@ -4959,66 +4914,38 @@ class Viewer extends EventEmitter2 {
         var _a, _b, _c;
         if (!this.renderer) return;
         const getVector3FromPoint3d = ({x: x, y: y, z: z}) => new Vector3(x, y, z);
-        const setOrthogonalCamera = orthogonal_camera => {
-            if (orthogonal_camera) {
-                const extentsSize = this.extents.getBoundingSphere(new Sphere).radius * 2;
-                const rendererSize = this.renderer.getSize(new Vector2);
-                const aspect = rendererSize.x / rendererSize.y;
-                this.camera = new OrthographicCamera;
-                this.camera.top = orthogonal_camera.field_height / 2;
-                this.camera.bottom = -orthogonal_camera.field_height / 2;
-                this.camera.left = this.camera.bottom * aspect;
-                this.camera.right = this.camera.top * aspect;
-                this.camera.near = 0;
-                this.camera.far = extentsSize * 100;
-                this.camera.zoom = orthogonal_camera.view_to_world_scale;
-                this.camera.updateProjectionMatrix();
-                this.camera.up.copy(getVector3FromPoint3d(orthogonal_camera.up_vector));
-                this.camera.position.copy(getVector3FromPoint3d(orthogonal_camera.view_point));
-                this.camera.lookAt(getVector3FromPoint3d(orthogonal_camera.direction).add(this.camera.position));
+        const setPerspectiveCamera = camera => {
+            if (camera) {
+                this.camera.up.copy(getVector3FromPoint3d(camera.up_vector));
+                this.camera.fov = camera.field_of_view;
+                this.camera.position.copy(getVector3FromPoint3d(camera.view_point));
+                this.camera.lookAt(getVector3FromPoint3d(camera.direction).add(this.camera.position));
                 this.camera.updateMatrixWorld();
-            }
-        };
-        const setPerspectiveCamera = perspective_camera => {
-            if (perspective_camera) {
-                const extentsSize = this.extents.getBoundingSphere(new Sphere).radius * 2;
-                const rendererSize = this.renderer.getSize(new Vector2);
-                const aspect = rendererSize.x / rendererSize.y;
-                this.camera = new PerspectiveCamera;
-                this.camera.fov = perspective_camera.field_of_view;
-                this.camera.aspect = aspect;
-                this.camera.near = extentsSize / 100;
-                this.camera.far = extentsSize * 100;
                 this.camera.updateProjectionMatrix();
-                this.camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));
-                this.camera.position.copy(getVector3FromPoint3d(perspective_camera.view_point));
-                this.camera.lookAt(getVector3FromPoint3d(perspective_camera.direction).add(this.camera.position));
-                this.camera.updateMatrixWorld();
             }
         };
         const setClippingPlanes = clipping_planes => {
-            clipping_planes === null || clipping_planes === undefined ? undefined : clipping_planes.forEach((clipping_plane => {
+            clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane => {
                 const plane = new Plane;
                 plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
                 this.renderer.clippingPlanes.push(plane);
             }));
         };
         const setSelection = selection => {
-            if (selection) this.setSelected(selection.map((component => component.handle)));
+            this.setSelected(selection === null || selection === void 0 ? void 0 : selection.map((component => component.handle)));
         };
-        const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
+        const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
         this.setActiveDragger();
         this.clearSlices();
         this.clearOverlay();
         this.clearSelected();
         this.showAll();
         this.explode();
-        setOrthogonalCamera(viewpoint.orthogonal_camera);
         setPerspectiveCamera(viewpoint.perspective_camera);
         setClippingPlanes(viewpoint.clipping_planes);
         setSelection(viewpoint.selection);
         this._markup.setViewpoint(viewpoint);
-        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === undefined ? undefined : _b.camera_target) !== null && _c !== undefined ? _c : this.target);
+        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
         this.setActiveDragger(draggerName);
         this.emitEvent({
             type: "drawviewpoint",
@@ -5033,24 +4960,12 @@ class Viewer extends EventEmitter2 {
             y: y,
             z: z
         });
-        const getOrthogonalCamera = () => {
-            if (this.camera["isOrthographicCamera"]) return {
-                view_point: getPoint3dFromVector3(this.camera.position),
-                direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3)),
-                up_vector: getPoint3dFromVector3(this.camera.up),
-                field_width: this.camera["right"] - this.camera["left"],
-                field_height: this.camera["top"] - this.camera["bottom"],
-                view_to_world_scale: this.camera.zoom
-            }; else return undefined;
-        };
-        const getPerspectiveCamera = () => {
-            if (this.camera["isPerspectiveCamera"]) return {
-                view_point: getPoint3dFromVector3(this.camera.position),
-                direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3)),
-                up_vector: getPoint3dFromVector3(this.camera.up),
-                field_of_view: this.camera["fov"]
-            }; else return undefined;
-        };
+        const getPerspectiveCamera = () => ({
+            view_point: getPoint3dFromVector3(this.camera.position),
+            direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3)),
+            up_vector: getPoint3dFromVector3(this.camera.up),
+            field_of_view: this.camera.fov
+        });
         const getClippingPlanes = () => {
             const clipping_planes = [];
             this.renderer.clippingPlanes.forEach((plane => {
@@ -5068,7 +4983,6 @@ class Viewer extends EventEmitter2 {
         const viewpoint = {
             custom_fields: {}
         };
-        viewpoint.orthogonal_camera = getOrthogonalCamera();
         viewpoint.perspective_camera = getPerspectiveCamera();
         viewpoint.clipping_planes = getClippingPlanes();
         viewpoint.selection = getSelection();