@inweb/viewer-three 25.9.8 → 25.11.0

package/src/Viewer/commands/SetSelected.ts

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+import { SelectionComponent } from "../components/SelectionComponent";
+
+function setSelected(viewer: Viewer, handles: string[] = []): void {
+  const handleSet = new Set(handles);
+  const objects = [];
+  viewer.scene.traverseVisible((child) => {
+    if (handleSet.has(child.userData?.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 });
+}
+
+commands("ThreeJS").registerCommand("setSelected", setSelected);

package/src/Viewer/commands/ShowAll.ts

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+function showAll(viewer: Viewer): void {
+  viewer.scene.traverse((object) => (object.visible = true));
+
+  viewer.update();
+  viewer.emitEvent({ type: "showall" });
+}
+
+commands("ThreeJS").registerCommand("showAll", showAll);

package/src/Viewer/commands/ZoomToExtents.ts

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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, Vector3 } from "three";
+
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+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" });
+}
+
+commands("ThreeJS").registerCommand("zoomToExtents", zoomToExtents);
+commands("ThreeJS").registerCommandAlias("zoomToExtents", "zoomExtents");

package/src/Viewer/commands/ZoomToObjects.ts

@@ -0,0 +1,55 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Box3, Sphere, Vector3 } from "three";
+
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
+  const handleSet = new Set(handles);
+  const objects = [];
+  viewer.scene.traverseVisible((child) => {
+    if (handleSet.has(child.userData?.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);

package/src/Viewer/commands/ZoomToSelected.ts

@@ -0,0 +1,51 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Box3, Sphere, Vector3 } from "three";
+
+import { commands } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+function zoomToSelected(viewer: Viewer): void {
+  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);

package/src/Viewer/commands/index.ts

@@ -0,0 +1,45 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 "./ApplyModelTransform";
+import "./ClearMarkup";
+import "./ClearSelected";
+import "./ClearSlices";
+import "./CreatePreview";
+import "./Explode";
+import "./GetDefaultViewPositions";
+import "./GetModels";
+import "./GetSelected";
+import "./HideSelected";
+import "./IsolateSelected";
+import "./RegenerateAll";
+import "./ResetView";
+import "./SelectModel";
+import "./SetActiveDragger";
+import "./SetDefaultViewPosition";
+import "./SetMarkupColor";
+import "./SetSelected";
+import "./ShowAll";
+import "./ZoomToExtents";
+import "./ZoomToObjects";
+import "./ZoomToSelected";

package/src/Viewer/components/AxesHelperComponent.ts

@@ -0,0 +1,70 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { AxesHelper, Vector3 } from "three";
+
+import { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+
+export class AxesHelperComponent implements IDisposable {
+  private viewer: Viewer;
+  private axesHelper1: AxesHelper;
+  private axesHelper2: AxesHelper;
+
+  constructor(viewer: Viewer) {
+    this.axesHelper1 = new AxesHelper();
+    this.axesHelper2 = new AxesHelper();
+    this.viewer = viewer;
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("clear", this.geometryEnd);
+  }
+
+  dispose() {
+    this.axesHelper1.removeFromParent();
+    this.axesHelper1 = undefined;
+
+    this.axesHelper2.removeFromParent();
+    this.axesHelper2 = undefined;
+
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("clear", this.geometryEnd);
+  }
+
+  geometryEnd = () => {
+    this.axesHelper1.removeFromParent();
+    this.axesHelper2.removeFromParent();
+
+    if (!this.viewer.extents.isEmpty()) {
+      const size = this.viewer.extents.getSize(new Vector3()).length();
+      const center = this.viewer.extents.getCenter(new Vector3());
+
+      this.axesHelper1 = new AxesHelper(size);
+      this.axesHelper1.position.copy(center);
+      this.viewer.helpers.add(this.axesHelper1);
+
+      this.axesHelper2 = new AxesHelper(size);
+      this.axesHelper2.position.set(0, 0, 0);
+      this.viewer.helpers.add(this.axesHelper2);
+    }
+  };
+}

package/src/Viewer/components/BackgroundComponent.ts

@@ -21,23 +21,25 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
+import { Color, PMREMGenerator } from "three";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
-import { IComponent } from "../IComponent";
+
+import { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class BackgroundComponent implements IComponent {
+export class BackgroundComponent implements IDisposable {
   protected viewer: Viewer;
-  protected backgroundColor: THREE.Color;
+  protected backgroundColor: Color;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
-    this.backgroundColor = new THREE.Color(0xffffff);
+    this.backgroundColor = new Color(0xffffff);
 
     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);
@@ -45,7 +47,7 @@ export class BackgroundComponent implements IComponent {
     environment.dispose();
   }
 
-  dispose(): void {
+  dispose() {
     this.viewer.removeEventListener("optionschange", this.syncOptions);
     this.viewer.scene.environment = undefined;
     this.viewer.scene.background = undefined;

package/src/Viewer/components/{DefaultCameraPositionComponent.ts → DefaultPositionComponent.ts}

@@ -21,46 +21,35 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import { Vector3 } from "three";
+
 import { GeometryEndEvent } from "@inweb/viewer-core";
-import * as THREE from "three";
-import { IComponent } from "../IComponent";
+import { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class DefaultCameraPositionComponent implements IComponent {
+export class DefaultPositionComponent implements IDisposable {
   protected viewer: Viewer;
+  public defaultCameraPositions: any;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.viewer.addEventListener("geometryend", this.geometryEnd);
   }
 
-  dispose(): void {
+  dispose() {
     this.viewer.removeEventListener("geometryend", this.geometryEnd);
   }
 
   geometryEnd = (event: GeometryEndEvent) => {
-    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.0;
-    this.viewer.camera.position.y += size / 5.0;
-    this.viewer.camera.position.z += size / 2.0;
-
     this.viewer.camera.updateMatrixWorld();
     this.viewer.camera.updateProjectionMatrix();
-    this.viewer.camera.lookAt(center);
+
+    // this.viewer.executeCommand("setDefaultViewPosition", "sw");
+    this.viewer.executeCommand("zoomToExtents");
   };
 }

package/src/Viewer/components/ExtentsComponent.ts

@@ -0,0 +1,54 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Box3, Vector3 } from "three";
+
+import { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+
+export class ExtentsComponent implements IDisposable {
+  private viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    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);
+  }
+
+  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()));
+  };
+}

package/src/Viewer/components/ExtentsHelperComponent.ts

@@ -0,0 +1,58 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Box3, Box3Helper, Color } from "three";
+
+import { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+
+export class ExtentsHelperComponent implements IDisposable {
+  private viewer: Viewer;
+  private boxHelper: Box3Helper;
+
+  constructor(viewer: Viewer) {
+    this.boxHelper = new Box3Helper(new Box3());
+    this.viewer = viewer;
+    this.viewer.on("geometryend", this.geometryEnd);
+    this.viewer.on("explode", this.geometryEnd);
+    this.viewer.on("clear", this.geometryEnd);
+  }
+
+  dispose() {
+    this.boxHelper.removeFromParent();
+    this.boxHelper = undefined;
+
+    this.viewer.off("geometryend", this.geometryEnd);
+    this.viewer.off("explode", this.geometryEnd);
+    this.viewer.off("clear", this.geometryEnd);
+  }
+
+  geometryEnd = () => {
+    this.boxHelper.removeFromParent();
+
+    if (!this.viewer.extents.isEmpty()) {
+      this.boxHelper = new Box3Helper(this.viewer.extents, new Color(0xff0000));
+      this.viewer.helpers.add(this.boxHelper);
+    }
+  };
+}

package/src/Viewer/components/LightComponent.ts

@@ -21,28 +21,32 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
-import { IComponent } from "../IComponent";
+import { AmbientLight, DirectionalLight } from "three";
+
+import { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class LightComponent implements IComponent {
+export class LightComponent implements IDisposable {
   protected viewer: Viewer;
-  protected ambientLight: THREE.AmbientLight;
-  protected directLight: THREE.DirectionalLight;
+  protected ambientLight: AmbientLight;
+  protected directionalLight: DirectionalLight;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
 
-    this.ambientLight = new THREE.AmbientLight(0xffffff, 0);
+    this.ambientLight = new AmbientLight(0xffffff, 0);
     this.viewer.camera.add(this.ambientLight);
 
-    this.directLight = new THREE.DirectionalLight(0xffffff, 1);
-    this.directLight.position.set(0.5, 0, 0.866); // ~60º
-    this.viewer.camera.add(this.directLight);
+    this.directionalLight = new DirectionalLight(0xffffff, 1);
+    this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
+    this.viewer.camera.add(this.directionalLight);
   }
 
   dispose(): void {
     this.ambientLight.removeFromParent();
-    this.directLight.removeFromParent();
+    this.ambientLight = undefined;
+
+    this.directionalLight.removeFromParent();
+    this.directionalLight = undefined;
   }
 }

package/src/Viewer/components/RenderLoopComponent.ts

@@ -21,24 +21,24 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { IComponent } from "../IComponent";
+import { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class RenderLoopComponent implements IComponent {
+export class RenderLoopComponent implements IDisposable {
   protected viewer: Viewer;
-  protected requestID = 0;
+  protected requestId: number;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.animate();
   }
 
-  dispose(): void {
-    cancelAnimationFrame(this.requestID);
+  dispose() {
+    cancelAnimationFrame(this.requestId);
   }
 
   animate = (time = 0) => {
-    this.requestID = requestAnimationFrame(this.animate);
+    this.requestId = requestAnimationFrame(this.animate);
     this.viewer.render(time);
   };
 }