@inweb/viewer-three 26.1.1 → 26.1.2

package/lib/Viewer/Viewer.d.ts

@@ -1,4 +1,4 @@
-import { Box3, Object3D, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { Box3, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
 import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
@@ -15,7 +15,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     canvasEvents: string[];
     scene: Scene | undefined;
     helpers: Scene | undefined;
-    camera: PerspectiveCamera | undefined;
+    camera: PerspectiveCamera | OrthographicCamera | undefined;
     renderer: WebGLRenderer | undefined;
     models: Array<GLTF>;
     selected: Array<Object3D>;
@@ -27,9 +27,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     private renderTime;
     private _markup;
     /**
-     * @param client - The `Client` instance that is used to load model reference files from the
-     *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
-     *   view `glTF` files from the web or from local computer.
+     * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
+     *   Server. Do not specify `Client` if you need a standalone viewer instance to view `glTF` files from
+     *   the web or from local computer.
      */
     constructor(client?: Client);
     get options(): IOptions;
@@ -53,12 +53,12 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *
      * The file geometry data on the server must be converted to `glTF` format.
      *
-     * This method requires a `Client` instance to be specified when creating the viewer to load
-     * model reference files from the Open Cloud Server. For a standalone viewer instance use
+     * This method requires a `Client` instance to be specified when creating the viewer to load model
+     * reference files from the Open Cloud Server. For a standalone viewer instance use
      * {@link openGltfFile | openGltfFile()}.
      *
-     * If there was an active dragger before opening the file, it will be deactivated. After
-     * opening the file, you must manually activate the required dragger.
+     * If there was an active dragger before opening the file, it will be deactivated. After opening the
+     * file, you must manually activate the required dragger.
      *
      * Fires:
      *
@@ -70,17 +70,17 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * - {@link GeometryEndEvent | geometryend}
      * - {@link GeometryErrorEvent | geometryerror}
      *
-     * @param file - File, assembly or specific model to load. If a `File` instance with multiple
-     *   models is specified, the default model will be loaded. If there is no default model,
-     *   first availiable model will be loaded.
+     * @param file - File, assembly or specific model to load. If a `File` instance with multiple models is
+     *   specified, the default model will be loaded. If there is no default model, first availiable model
+     *   will be loaded.
      */
     open(file: Model | File | Assembly): Promise<this>;
     cancel(): this;
     /**
      * Loads a `glTF` file into the viewer.
      *
-     * If there was an active dragger before opening the file, it will be deactivated. After
-     * opening the file, you must manually activate the required dragger.
+     * If there was an active dragger before opening the file, it will be deactivated. After opening the
+     * file, you must manually activate the required dragger.
      *
      * Fires:
      *
@@ -92,22 +92,22 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * - {@link GeometryErrorEvent | geometryerror}
      *
      * @param file - File URL or binary data buffer to load.
-     * @param externalData - External resource map such as binary data buffers or images. Each
-     *   resource should be represented by a `uri` and a corresponding resource URL, or
+     * @param externalData - External resource map such as binary data buffers or images. Each resource
+     *   should be represented by a `uri` and a corresponding resource URL, or
      *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
      *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
      *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
      *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
      * @param params - Loader parameters.
-     * @param params.path - The base path from which to find subsequent glTF resources such as
-     *   textures and .bin data files. If not defined, the base path of the file URL will be used.
+     * @param params.path - The base path from which to find subsequent glTF resources such as textures and
+     *   .bin data files. If not defined, the base path of the file URL will be used.
      * @param params.requestHeader - The
-     *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
-     *   in HTTP request.
-     * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
-     *   from a different domain that allows CORS. Default is `anonymous`.
-     * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
-     *   cookies, authorization headers or TLS client certificates. See
+     *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
+     *   request.
+     * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
+     *   different domain that allows CORS. Default is `anonymous`.
+     * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
+     *   authorization headers or TLS client certificates. See
      *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
      */
     openGltfFile(file: string | globalThis.File | ArrayBuffer | Blob, externalData?: Map<string, string | globalThis.File | ArrayBuffer | Blob>, params?: {
@@ -129,22 +129,22 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * - {@link GeometryErrorEvent | geometryerror}
      *
      * @param file - File URL or binary data buffer to load.
-     * @param externalData - External resource map such as binary data buffers or images. Each
-     *   resource should be represented by a `uri` and a corresponding resource URL, or
+     * @param externalData - External resource map such as binary data buffers or images. Each resource
+     *   should be represented by a `uri` and a corresponding resource URL, or
      *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
      *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
      *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
      *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
      * @param params - Loader parameters.
-     * @param params.path - The base path from which to find subsequent glTF resources such as
-     *   textures and .bin data files.
+     * @param params.path - The base path from which to find subsequent glTF resources such as textures and
+     *   .bin data files.
      * @param params.requestHeader - The
-     *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
-     *   in HTTP request.
-     * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
-     *   from a different domain that allows CORS. Default is `anonymous`.
-     * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
-     *   cookies, authorization headers or TLS client certificates. See
+     *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
+     *   request.
+     * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
+     *   different domain that allows CORS. Default is `anonymous`.
+     * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
+     *   authorization headers or TLS client certificates. See
      *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
      */
     loadGltfFile(file: string | globalThis.File | ArrayBuffer | Blob, externalData?: Map<string, string | globalThis.File | ArrayBuffer | Blob>, params?: {

package/lib/Viewer/commands/ZoomTo.d.ts

@@ -0,0 +1,3 @@
+import { Box3 } from "three";
+import type { Viewer } from "../Viewer";
+export declare function zoomTo(viewer: Viewer, box: Box3): void;

package/lib/Viewer/commands/index.d.ts

@@ -7,16 +7,22 @@ import { ICommandsRegistry } from "@inweb/viewer-core";
  * 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 declare const commands: ICommandsRegistry;

package/lib/Viewer/components/CameraComponent.d.ts

@@ -0,0 +1,8 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class CameraComponent implements IComponent {
+    protected viewer: Viewer;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    geometryEnd: () => void;
+}

package/lib/Viewer/components/WCSHelperComponent.d.ts

@@ -5,5 +5,6 @@ export declare class WCSHelperComponent implements IComponent {
     private viewer;
     constructor(viewer: Viewer);
     dispose(): void;
+    geometryEnd: () => void;
     viewerRender: () => void;
 }

package/lib/Viewer/components/index.d.ts

@@ -6,35 +6,35 @@ import { IComponentsRegistry } from "@inweb/viewer-core";
  *
  * 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 declare const components: IComponentsRegistry;

package/lib/Viewer/draggers/OrbitDragger.d.ts

@@ -6,6 +6,7 @@ export declare class OrbitDragger implements IDragger {
     protected orbit: OrbitControls;
     protected changed: boolean;
     constructor(viewer: Viewer);
+    initialize(): void;
     dispose(): void;
     updateControls: () => void;
     controlsStart: () => void;

package/lib/Viewer/draggers/index.d.ts

@@ -6,34 +6,40 @@ import { IDraggersRegistry } from "@inweb/viewer-core";
  *
  * 1. Define a dragger class implements {@link IDragger}.
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
- * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove`
- *    event and zoom in/out when the left mouse button is pressed.
+ * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove` event and
+ *    zoom in/out when the left mouse button is pressed.
  * 4. Override {@link IDragger.dispose} and remove mouse event listeners from the viewer.
  * 5. Register dragger provider in the draggers registry by calling the {@link draggers.registerDragger}.
  *
- * @example <caption>Implementing a custom dragger.</caption>
- *   import { IDragger, draggers, Viewer } from "@inweb/viewer-three";
+ * @example Implementing a custom dragger.
  *
- *   class MyDragger implements IDragger {
- *     protected viewer: Viewer;
+ * ```javascript
+ * import { IDragger, draggers, Viewer } from "@inweb/viewer-three";
  *
- *     constructor(viewer: Viewer) {
- *       this.viewer = viewer;
- *       this.viewer.addEventListener("pointermove", this.onPointerMove);
- *     }
+ * class MyDragger implements IDragger {
+ *   protected viewer: Viewer;
  *
- *     override dispose() {
- *       this.viewer.removeEventListener("pointermove", this.onPointerMove);
- *     }
+ *   constructor(viewer: Viewer) {
+ *     this.viewer = viewer;
+ *     this.viewer.addEventListener("pointermove", this.onPointerMove);
+ *   }
  *
- *     onPointerMove = (event: PointerEvent) => {
- *       // place custom logic here
- *     };
+ *   override dispose() {
+ *     this.viewer.removeEventListener("pointermove", this.onPointerMove);
  *   }
  *
- *   draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
+ *   onPointerMove = (event: PointerEvent) => {
+ *     // place custom logic here
+ *   };
+ * }
+ *
+ * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
+ * ```
+ *
+ * @example Activating a custom dragger.
  *
- * @example <caption>Activating a custom dragger.</caption>
- *   viewer.setActiveDragger("MyDragger");
+ * ```javascript
+ * viewer.setActiveDragger("MyDragger");
+ * ```
  */
 export declare const draggers: IDraggersRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.1.1",
+  "version": "26.1.2",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -28,17 +28,17 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.1.1",
-    "@inweb/eventemitter2": "~26.1.1",
-    "@inweb/markup": "~26.1.1",
-    "@inweb/viewer-core": "~26.1.1"
+    "@inweb/client": "~26.1.2",
+    "@inweb/eventemitter2": "~26.1.2",
+    "@inweb/markup": "~26.1.2",
+    "@inweb/viewer-core": "~26.1.2"
   },
   "devDependencies": {
-    "@types/three": "^0.169.0",
-    "three": "^0.170.0"
+    "@types/three": "^0.173.0",
+    "three": "^0.173.0"
   },
   "peerDependencies": {
-    "@types/three": "^0.169.0",
-    "three": "^0.170.0"
+    "@types/three": "^0.173.0",
+    "three": "^0.173.0"
   }
 }

package/src/Viewer/Viewer.ts

@@ -21,7 +21,19 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
+import {
+  Box3,
+  LinearToneMapping,
+  Object3D,
+  OrthographicCamera,
+  PerspectiveCamera,
+  Plane,
+  Scene,
+  Sphere,
+  Vector2,
+  Vector3,
+  WebGLRenderer,
+} from "three";
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
 
@@ -35,6 +47,7 @@ import {
   IEntity,
   IDragger,
   IOptions,
+  IOrthogonalCamera,
   IPerspectiveCamera,
   IPoint,
   IViewer,
@@ -47,7 +60,6 @@ import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
 
 import { draggers } from "./draggers";
 import { commands } from "./commands";
-
 import { components } from "./components";
 
 /**
@@ -67,7 +79,7 @@ export class Viewer
 
   public scene: Scene | undefined;
   public helpers: Scene | undefined;
-  public camera: PerspectiveCamera | undefined;
+  public camera: PerspectiveCamera | OrthographicCamera | undefined;
   public renderer: WebGLRenderer | undefined;
   public models: Array<GLTF>;
   public selected: Array<Object3D>;
@@ -83,9 +95,9 @@ export class Viewer
   private _markup: IMarkup;
 
   /**
-   * @param client - The `Client` instance that is used to load model reference files from the
-   *   Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
-   *   view `glTF` files from the web or from local computer.
+   * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
+   *   Server. Do not specify `Client` if you need a standalone viewer instance to view `glTF` files from
+   *   the web or from local computer.
    */
   constructor(client?: Client) {
     super();
@@ -142,7 +154,8 @@ export class Viewer
     const rect = canvas.parentElement.getBoundingClientRect();
     const width = rect.width || 1;
     const height = rect.height || 1;
-    this.camera = new PerspectiveCamera(45, width / height, 0.01, 1000);
+    const aspect = width / height;
+    this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
     this.camera.up.set(0, 0, 1);
 
     this.renderer = new WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
@@ -155,7 +168,7 @@ export class Viewer
 
     this._markup.initialize(this.canvas, this.canvasEvents, this, this);
 
-    for (let name of components.getComponents().keys()) {
+    for (const name of components.getComponents().keys()) {
       this._components.push(components.createComponent(name, this));
     }
 
@@ -250,12 +263,12 @@ export class Viewer
    *
    * The file geometry data on the server must be converted to `glTF` format.
    *
-   * This method requires a `Client` instance to be specified when creating the viewer to load
-   * model reference files from the Open Cloud Server. For a standalone viewer instance use
+   * This method requires a `Client` instance to be specified when creating the viewer to load model
+   * reference files from the Open Cloud Server. For a standalone viewer instance use
    * {@link openGltfFile | openGltfFile()}.
    *
-   * If there was an active dragger before opening the file, it will be deactivated. After
-   * opening the file, you must manually activate the required dragger.
+   * If there was an active dragger before opening the file, it will be deactivated. After opening the
+   * file, you must manually activate the required dragger.
    *
    * Fires:
    *
@@ -267,9 +280,9 @@ export class Viewer
    * - {@link GeometryEndEvent | geometryend}
    * - {@link GeometryErrorEvent | geometryerror}
    *
-   * @param file - File, assembly or specific model to load. If a `File` instance with multiple
-   *   models is specified, the default model will be loaded. If there is no default model,
-   *   first availiable model will be loaded.
+   * @param file - File, assembly or specific model to load. If a `File` instance with multiple models is
+   *   specified, the default model will be loaded. If there is no default model, first availiable model
+   *   will be loaded.
    */
   async open(file: Model | File | Assembly): Promise<this> {
     if (!this.renderer) return this;
@@ -306,8 +319,8 @@ export class Viewer
   /**
    * Loads a `glTF` file into the viewer.
    *
-   * If there was an active dragger before opening the file, it will be deactivated. After
-   * opening the file, you must manually activate the required dragger.
+   * If there was an active dragger before opening the file, it will be deactivated. After opening the
+   * file, you must manually activate the required dragger.
    *
    * Fires:
    *
@@ -319,22 +332,22 @@ export class Viewer
    * - {@link GeometryErrorEvent | geometryerror}
    *
    * @param file - File URL or binary data buffer to load.
-   * @param externalData - External resource map such as binary data buffers or images. Each
-   *   resource should be represented by a `uri` and a corresponding resource URL, or
+   * @param externalData - External resource map such as binary data buffers or images. Each resource
+   *   should be represented by a `uri` and a corresponding resource URL, or
    *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
    *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
    *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
    *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
    * @param params - Loader parameters.
-   * @param params.path - The base path from which to find subsequent glTF resources such as
-   *   textures and .bin data files. If not defined, the base path of the file URL will be used.
+   * @param params.path - The base path from which to find subsequent glTF resources such as textures and
+   *   .bin data files. If not defined, the base path of the file URL will be used.
    * @param params.requestHeader - The
-   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
-   *   in HTTP request.
-   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
-   *   from a different domain that allows CORS. Default is `anonymous`.
-   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
-   *   cookies, authorization headers or TLS client certificates. See
+   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
+   *   request.
+   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
+   *   different domain that allows CORS. Default is `anonymous`.
+   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
+   *   authorization headers or TLS client certificates. See
    *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
    */
   openGltfFile(
@@ -370,22 +383,22 @@ export class Viewer
    * - {@link GeometryErrorEvent | geometryerror}
    *
    * @param file - File URL or binary data buffer to load.
-   * @param externalData - External resource map such as binary data buffers or images. Each
-   *   resource should be represented by a `uri` and a corresponding resource URL, or
+   * @param externalData - External resource map such as binary data buffers or images. Each resource
+   *   should be represented by a `uri` and a corresponding resource URL, or
    *   {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
    *   {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
    *   or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
    *   {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
    * @param params - Loader parameters.
-   * @param params.path - The base path from which to find subsequent glTF resources such as
-   *   textures and .bin data files.
+   * @param params.path - The base path from which to find subsequent glTF resources such as textures and
+   *   .bin data files.
    * @param params.requestHeader - The
-   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
-   *   in HTTP request.
-   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
-   *   from a different domain that allows CORS. Default is `anonymous`.
-   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
-   *   cookies, authorization headers or TLS client certificates. See
+   *   {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
+   *   request.
+   * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
+   *   different domain that allows CORS. Default is `anonymous`.
+   * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
+   *   authorization headers or TLS client certificates. See
    *   {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
    */
   async loadGltfFile(
@@ -616,14 +629,46 @@ export class Viewer
 
     const getVector3FromPoint3d = ({ x, y, z }): Vector3 => new Vector3(x, y, z);
 
-    const setPerspectiveCamera = (camera: IPerspectiveCamera) => {
-      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));
+    const setOrthogonalCamera = (orthogonal_camera: IOrthogonalCamera) => {
+      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));
         this.camera.updateMatrixWorld();
+      }
+    };
+
+    const setPerspectiveCamera = (perspective_camera: IPerspectiveCamera) => {
+      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();
       }
     };
 
@@ -640,7 +685,7 @@ export class Viewer
     };
 
     const setSelection = (selection: IEntity[]) => {
-      this.setSelected(selection?.map((component) => component.handle));
+      if (selection) this.setSelected(selection.map((component) => component.handle));
     };
 
     const draggerName = this._activeDragger?.name;
@@ -653,6 +698,7 @@ export class Viewer
     this.showAll();
     this.explode();
 
+    setOrthogonalCamera(viewpoint.orthogonal_camera);
     setPerspectiveCamera(viewpoint.perspective_camera);
     setClippingPlanes(viewpoint.clipping_planes);
     setSelection(viewpoint.selection);
@@ -670,13 +716,28 @@ export class Viewer
 
     const getPoint3dFromVector3 = ({ x, y, z }): IPoint => ({ x, y, z });
 
+    const getOrthogonalCamera = (): IOrthogonalCamera => {
+      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 = (): IPerspectiveCamera => {
-      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,
-      };
+      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 getClippingPlanes = (): IClippingPlane[] => {
@@ -697,6 +758,7 @@ export class Viewer
 
     const viewpoint: IViewpoint = { custom_fields: {} };
 
+    viewpoint.orthogonal_camera = getOrthogonalCamera();
     viewpoint.perspective_camera = getPerspectiveCamera();
     viewpoint.clipping_planes = getClippingPlanes();
     viewpoint.selection = getSelection();