@inweb/viewer-three 26.1.1 → 26.1.3

package/src/Viewer/commands/Explode.ts

@@ -21,57 +21,56 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Object3D, Vector3 } from "three";
+import { Box3, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 
-function calcObjectDepth(object: Object3D, depth: number) {
+function calcExplodeDepth(object, depth: number): number {
   let res = depth;
   object.children.forEach((x) => {
-    const objectDepth = calcObjectDepth(x, depth + 1);
+    const objectDepth = calcExplodeDepth(x, depth + 1);
     if (res < objectDepth) res = objectDepth;
   });
 
-  (object as any).originalPosition = object.position.clone();
+  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: Object3D, scale = 0) {
+function explodeScene(scene, scale = 0, coeff = 4) {
   scale /= 100;
 
-  if (!(scene as any).maxDepth) (scene as any).maxDepth = calcObjectDepth(scene, 1);
-  const maxDepth = (scene as any).maxDepth;
+  if (!scene.explodeDepth) scene.explodeDepth = calcExplodeDepth(scene, 1);
+  const maxDepth = scene.explodeDepth;
 
-  let explodeDepth = scale * (maxDepth - 1) + 1;
-  if (maxDepth === 1) explodeDepth = 1;
+  const scaledExplodeDepth = scale * maxDepth + 1;
+  const explodeDepth = 0 | scaledExplodeDepth;
+  const currentSegmentFraction = scaledExplodeDepth - explodeDepth;
 
-  function explodeObject(object: Object3D, depth: number, parentCenter: Vector3, parentOffset: Vector3) {
-    const objectBox = new Box3().setFromObject(object);
-    const objectCenter = objectBox.getCenter(new Vector3());
+  function explodeObject(object, depth: number) {
+    object.position.copy(object.originalPosition);
 
-    const objectOffset = parentOffset.clone();
-    if (depth > 0 && depth <= explodeDepth) {
-      const offset = objectCenter.clone().sub(parentCenter).multiplyScalar(scale);
-      objectOffset.add(offset);
-    }
+    if (depth > 0 && depth <= explodeDepth && !object.isExplodeLocked) {
+      let objectScale = scale * coeff;
+      if (depth === explodeDepth) objectScale *= currentSegmentFraction;
 
-    object.children.forEach((object) => explodeObject(object, depth + 1, objectCenter, objectOffset));
+      const parentCenter = object.parent.originalCenter;
+      const objectCenter = object.originalCenter;
+      const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
 
-    const originalPosition = (object as any).originalPosition;
-    object.position.copy(originalPosition);
-    if (scale > 0) {
-      const direction = objectCenter.sub(parentCenter).normalize();
-      object.position.add(direction.add(objectOffset));
+      object.position.add(objectOffset);
     }
+
+    object.children.forEach((x) => explodeObject(x, depth + 1));
   }
 
-  const sceneExtents = new Box3().setFromObject(scene);
-  const sceneCenter = sceneExtents.getCenter(new Vector3());
-  explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
+  explodeObject(scene, 0);
 }
 
 export function explode(viewer: Viewer, index = 0): void {
-  viewer.models.forEach((gltf) => explodeScene(gltf.scene, index));
+  viewer.models.forEach((model) => explodeScene(model.scene, index));
+  viewer.scene.updateMatrixWorld();
 
   viewer.update();
   viewer.emitEvent({ type: "explode", data: index });

package/src/Viewer/commands/IsolateSelected.ts

@@ -21,25 +21,16 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D } from "three";
 import type { Viewer } from "../Viewer";
 
 export function isolateSelected(viewer: Viewer): void {
-  const selectedSet = new Set(viewer.selected);
+  const visibleSet = new Set();
+  viewer.selected.forEach((object) => {
+    visibleSet.add(object);
+    object.traverseAncestors((object2) => visibleSet.add(object2));
+  });
 
-  function isolateObject(object: Object3D, depth: number): boolean {
-    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.scene.traverse((object) => (object.visible = visibleSet.has(object)));
 
   viewer.update();
   viewer.emitEvent({ type: "isolate" });

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -23,6 +23,7 @@
 
 import { Sphere, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
+import { zoomTo } from "./ZoomTo";
 
 export const defaultViewPositions = {
   top: new Vector3(0, 0, 1),
@@ -42,12 +43,11 @@ export function setDefaultViewPosition(viewer: Viewer, position: string): void {
 
   const center = viewer.extents.getCenter(new Vector3());
   const sphere = viewer.extents.getBoundingSphere(new Sphere());
-  const offet = direction.clone().multiplyScalar(sphere.radius);
+  const offset = direction.clone().multiplyScalar(sphere.radius);
 
   const camera = viewer.camera;
-  camera.position.copy(center).add(offet);
+  camera.position.copy(center).add(offset);
   camera.lookAt(center);
-  camera.updateProjectionMatrix();
   camera.updateMatrixWorld();
 
   viewer.target.copy(center);
@@ -55,5 +55,5 @@ export function setDefaultViewPosition(viewer: Viewer, position: string): void {
   viewer.update();
   viewer.emit({ type: "viewposition", data: position });
 
-  viewer.executeCommand("zoomToExtents");
+  zoomTo(viewer, viewer.extents);
 }

package/src/Viewer/{components/DefaultPositionComponent.ts → commands/ZoomTo.ts}

@@ -21,34 +21,46 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
-import { GeometryEndEvent, IComponent } from "@inweb/viewer-core";
+import { Box3, MathUtils, Sphere, Vector2, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 
-export class DefaultPositionComponent implements IComponent {
-  protected viewer: Viewer;
-  public defaultCameraPositions: any;
+export function zoomTo(viewer: Viewer, box: Box3): void {
+  if (box.isEmpty()) return;
 
-  constructor(viewer: Viewer) {
-    this.viewer = viewer;
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
-  }
+  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 as any;
 
-  dispose() {
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+  if (camera.isPerspectiveCamera) {
+    const offset = new Vector3(0, 0, 1);
+    offset.applyQuaternion(camera.quaternion);
+    offset.multiplyScalar(sphere.radius / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.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);
 
-  geometryEnd = (event: GeometryEndEvent) => {
-    const box = this.viewer.extents;
-    const size = box.getSize(new Vector3()).length();
+    camera.position.copy(center).add(offset);
+    camera.updateMatrixWorld();
+  }
 
-    this.viewer.camera.near = size / 100;
-    this.viewer.camera.far = size * 100;
-    this.viewer.camera.updateMatrixWorld();
-    this.viewer.camera.updateProjectionMatrix();
+  viewer.target.copy(center);
 
-    this.viewer.executeCommand("setDefaultViewPosition", "sw");
-    this.viewer.executeCommand("zoomToExtents");
-  };
+  viewer.update();
+  viewer.emitEvent({ type: "zoom" });
 }

package/src/Viewer/commands/ZoomToExtents.ts

@@ -21,22 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
+import { zoomTo } from "./ZoomTo";
 
 export function zoomToExtents(viewer: Viewer): void {
-  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" });
+  zoomTo(viewer, viewer.extents);
 }

package/src/Viewer/commands/ZoomToObjects.ts

@@ -21,8 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Sphere, Vector3 } from "three";
+import { Box3 } from "three";
 import type { Viewer } from "../Viewer";
+import { zoomTo } from "./ZoomTo";
 
 export function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
   const handleSet = new Set(handles);
@@ -32,16 +33,7 @@ export function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
   });
 
   const extents = objects.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
-  const center = extents.getCenter(new Vector3());
-  const distance = extents.getBoundingSphere(new Sphere()).radius;
+  if (extents.isEmpty()) extents.copy(viewer.extents);
 
-  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" });
+  zoomTo(viewer, extents);
 }

package/src/Viewer/commands/ZoomToSelected.ts

@@ -21,24 +21,13 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, Sphere, Vector3 } from "three";
+import { Box3 } from "three";
 import type { Viewer } from "../Viewer";
+import { zoomTo } from "./ZoomTo";
 
 export function zoomToSelected(viewer: Viewer): void {
   const extents = viewer.selected.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
-
   if (extents.isEmpty()) extents.copy(viewer.extents);
 
-  const center = extents.getCenter(new Vector3());
-  const distance = extents.getBoundingSphere(new Sphere()).radius;
-
-  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" });
+  zoomTo(viewer, extents);
 }

package/src/Viewer/commands/index.ts

@@ -54,17 +54,23 @@ import { zoomToSelected } from "./ZoomToSelected";
  * 1. Define a command handler with a first `viewer` parameter.
  * 2. Register command handler in the commands registry by calling the {@link commands.registerCommand}.
  *
- * @example <caption>Implementing a custom command.</caption>
- *   import { commands, Viewer } from "@inweb/viewer-three";
+ * @example Implementing a custom command.
  *
- *   function commandHandler(viewer: Viewer, name = "world"): void {
- *     console.log(`Hello ${name}!!!`);
- *   }
+ * ```javascript
+ * import { commands, Viewer } from "@inweb/viewer-three";
  *
- *   commands.registerCommand("sayHello", commandHandler);
+ * function commandHandler(viewer: Viewer, name = "world"): void {
+ *   console.log(`Hello ${name}!!!`);
+ * }
  *
- * @example <caption>Calling a custom command.</caption>
- *   viewer.executeCommand("sayHello", "user");
+ * commands.registerCommand("sayHello", commandHandler);
+ * ```
+ *
+ * @example Calling a custom command.
+ *
+ * ```javascript
+ * viewer.executeCommand("sayHello", "user");
+ * ```
  */
 export const commands: ICommandsRegistry = commandsRegistry("threejs");
 

package/src/Viewer/components/CameraComponent.ts

@@ -0,0 +1,78 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Sphere, Vector2 } from "three";
+
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class CameraComponent implements IComponent {
+  protected viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+  }
+
+  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: any;
+    this.viewer.scene.traverse((object: any) => {
+      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); // <- visualize fix
+    }
+
+    const camera = this.viewer.camera as any;
+
+    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");
+    }
+  };
+}

package/src/Viewer/components/ExtentsComponent.ts

@@ -31,19 +31,26 @@ export class ExtentsComponent implements IComponent {
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
-    this.viewer.addEventListener("geometryend", this.syncExtents);
+    this.viewer.addEventListener("databasechunk", 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("geometryend", this.syncExtents);
+    this.viewer.removeEventListener("databasechunk", 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);
   }
 
   syncExtents = () => {
-    const extents = this.viewer.models.reduce((result: Box3, gltf) => result.expandByObject(gltf.scene), new Box3());
+    const extents = new Box3();
+    this.viewer.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object));
 
     this.viewer.extents.copy(extents);
     this.viewer.target.copy(extents.getCenter(new Vector3()));

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -43,8 +43,19 @@ export class ResizeCanvasComponent implements IComponent {
 
     if (!width || !height) return; // <- invisible viewer, or viewer with parent removed
 
-    this.viewer.camera.aspect = width / height;
-    this.viewer.camera.updateProjectionMatrix();
+    const camera = this.viewer.camera as any;
+    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.renderer.setSize(width, height, true);
 
     this.viewer.update(true);

package/src/Viewer/components/WCSHelperComponent.ts

@@ -32,14 +32,23 @@ export class WCSHelperComponent implements IComponent {
   constructor(viewer: Viewer) {
     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();
   }
 
+  geometryEnd = () => {
+    this.wcsHelper.dispose();
+    this.wcsHelper = new WCSHelper(this.viewer.camera);
+  };
+
   viewerRender = () => {
     if (!this.viewer.options.showWCS) return;
     if (this.viewer.extents.isEmpty()) return;

package/src/Viewer/components/index.ts

@@ -25,7 +25,7 @@ import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
 // import { AxesHelperComponent } from "./AxesHelperComponent";
 import { BackgroundComponent } from "./BackgroundComponent";
-import { DefaultPositionComponent } from "./DefaultPositionComponent";
+import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 // import { ExtentsHelperComponent } from "./ExtentsHelperComponent";
 import { LightComponent } from "./LightComponent";
@@ -42,36 +42,36 @@ import { WCSHelperComponent } from "./WCSHelperComponent";
  *
  * 1. Define a component class implements {@link IComponent}.
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown`
- *    event and select objects when the left mouse button is pressed.
+ * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
+ *    select objects when the left mouse button is pressed.
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
  * 5. Register component provider in the components registry by calling the
  *    {@link components.registerComponent}.
  *
- * @example <caption>Implementing a custom component.</caption>
- *   import { IComponent, components, Viewer } from "@inweb/viewer-three";
+ * @example Implementing a custom component.
  *
- *   class MyComponent implements IComponent {
- *     protected viewer: Viewer;
+ * ```javascript
+ * import { IComponent, components, Viewer } from "@inweb/viewer-three";
  *
- *     constructor(viewer: Viewer) {
- *       this.viewer = viewer;
- *       this.viewer.addEventListener("mousedown", this.onMouseDown);
- *     }
+ * class MyComponent implements IComponent {
+ *   protected viewer: Viewer;
  *
- *     override dispose() {
- *       this.viewer.removeEventListener("mousedown", this.onMouseDown);
- *     }
+ *   constructor(viewer: Viewer) {
+ *     this.viewer = viewer;
+ *     this.viewer.addEventListener("mousedown", this.onMouseDown);
+ *   }
  *
- *     onMouseDown = (event: PointerEvent) => {
- *       // place custom logic here
- *     };
+ *   override dispose() {
+ *     this.viewer.removeEventListener("mousedown", this.onMouseDown);
  *   }
  *
- *   components.registerComponent(
- *     "MyComponent",
- *     (viewer): IComponent => new MyComponent(viewer)
- *   );
+ *   onMouseDown = (event: PointerEvent) => {
+ *     // place custom logic here
+ *   };
+ * }
+ *
+ * components.registerComponent("MyComponent", (viewer): IComponent => new MyComponent(viewer));
+ * ```
  */
 export const components: IComponentsRegistry = componentsRegistry("threejs");
 
@@ -80,9 +80,9 @@ export const components: IComponentsRegistry = componentsRegistry("threejs");
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 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));
 

package/src/Viewer/draggers/OrbitDragger.ts

@@ -42,20 +42,22 @@ export class OrbitDragger implements IDragger {
     this.orbit.addEventListener("change", this.controlsChange);
     this.changed = false;
     this.viewer = viewer;
-    this.viewer.on("geometryend", this.updateControls);
+    this.viewer.addEventListener("databasechunk", this.updateControls);
     this.viewer.on("viewposition", this.updateControls);
-    this.viewer.on("zoom", this.updateControls);
-    this.viewer.on("drawviewpoint", this.updateControls);
-    this.viewer.on("contextmenu", this.stopContextMenu);
+    this.viewer.addEventListener("zoom", this.updateControls);
+    this.viewer.addEventListener("drawviewpoint", this.updateControls);
+    this.viewer.addEventListener("contextmenu", this.stopContextMenu);
     this.updateControls();
   }
 
+  initialize() {}
+
   dispose(): void {
-    this.viewer.off("geometryend", this.updateControls);
+    this.viewer.removeEventListener("databasechunk", this.updateControls);
     this.viewer.off("viewposition", this.updateControls);
-    this.viewer.off("zoom", this.updateControls);
-    this.viewer.off("drawviewpoint", this.updateControls);
-    this.viewer.off("contextmenu", this.stopContextMenu);
+    this.viewer.removeEventListener("zoom", this.updateControls);
+    this.viewer.removeEventListener("drawviewpoint", this.updateControls);
+    this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
 
     this.orbit.removeEventListener("start", this.controlsStart);
     this.orbit.removeEventListener("change", this.controlsChange);
@@ -65,6 +67,7 @@ export class OrbitDragger implements IDragger {
   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();
   };