@inweb/viewer-three 26.1.3 → 26.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/viewer-three.js +16315 -16590
  2. package/dist/viewer-three.js.map +1 -1
  3. package/dist/viewer-three.min.js +3 -9
  4. package/dist/viewer-three.module.js +2472 -224
  5. package/dist/viewer-three.module.js.map +1 -1
  6. package/lib/Viewer/Viewer.d.ts +34 -34
  7. package/lib/Viewer/commands/index.d.ts +8 -14
  8. package/lib/Viewer/components/DefaultPositionComponent.d.ts +9 -0
  9. package/lib/Viewer/components/WCSHelperComponent.d.ts +0 -1
  10. package/lib/Viewer/components/index.d.ts +20 -20
  11. package/lib/Viewer/draggers/OrbitDragger.d.ts +0 -1
  12. package/lib/Viewer/draggers/index.d.ts +19 -25
  13. package/package.json +9 -9
  14. package/src/Viewer/Viewer.ts +50 -112
  15. package/src/Viewer/commands/Explode.ts +27 -26
  16. package/src/Viewer/commands/IsolateSelected.ts +15 -6
  17. package/src/Viewer/commands/SetDefaultViewPosition.ts +4 -4
  18. package/src/Viewer/commands/ZoomToExtents.ts +15 -2
  19. package/src/Viewer/commands/ZoomToObjects.ts +12 -4
  20. package/src/Viewer/commands/ZoomToSelected.ts +14 -3
  21. package/src/Viewer/commands/index.ts +8 -14
  22. package/src/Viewer/{commands/ZoomTo.ts → components/DefaultPositionComponent.ts} +22 -34
  23. package/src/Viewer/components/ExtentsComponent.ts +3 -10
  24. package/src/Viewer/components/ResizeCanvasComponent.ts +2 -13
  25. package/src/Viewer/components/WCSHelperComponent.ts +0 -9
  26. package/src/Viewer/components/index.ts +22 -22
  27. package/src/Viewer/draggers/OrbitDragger.ts +8 -11
  28. package/src/Viewer/draggers/index.ts +19 -25
  29. package/lib/Viewer/commands/ZoomTo.d.ts +0 -3
  30. package/lib/Viewer/components/CameraComponent.d.ts +0 -8
  31. package/src/Viewer/components/CameraComponent.ts +0 -78
@@ -1,4 +1,4 @@
1
- import { Box3, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
1
+ import { Box3, Object3D, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
2
2
  import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
3
3
  import { EventEmitter2 } from "@inweb/eventemitter2";
4
4
  import { Assembly, Client, Model, File } from "@inweb/client";
@@ -15,7 +15,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
15
15
  canvasEvents: string[];
16
16
  scene: Scene | undefined;
17
17
  helpers: Scene | undefined;
18
- camera: PerspectiveCamera | OrthographicCamera | undefined;
18
+ camera: PerspectiveCamera | undefined;
19
19
  renderer: WebGLRenderer | undefined;
20
20
  models: Array<GLTF>;
21
21
  selected: Array<Object3D>;
@@ -27,9 +27,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
27
27
  private renderTime;
28
28
  private _markup;
29
29
  /**
30
- * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
31
- * Server. Do not specify `Client` if you need a standalone viewer instance to view `glTF` files from
32
- * the web or from local computer.
30
+ * @param client - The `Client` instance that is used to load model reference files from the
31
+ * Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
32
+ * view `glTF` files from the web or from local computer.
33
33
  */
34
34
  constructor(client?: Client);
35
35
  get options(): IOptions;
@@ -53,12 +53,12 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
53
53
  *
54
54
  * The file geometry data on the server must be converted to `glTF` format.
55
55
  *
56
- * This method requires a `Client` instance to be specified when creating the viewer to load model
57
- * reference files from the Open Cloud Server. For a standalone viewer instance use
56
+ * This method requires a `Client` instance to be specified when creating the viewer to load
57
+ * model reference files from the Open Cloud Server. For a standalone viewer instance use
58
58
  * {@link openGltfFile | openGltfFile()}.
59
59
  *
60
- * If there was an active dragger before opening the file, it will be deactivated. After opening the
61
- * file, you must manually activate the required dragger.
60
+ * If there was an active dragger before opening the file, it will be deactivated. After
61
+ * opening the file, you must manually activate the required dragger.
62
62
  *
63
63
  * Fires:
64
64
  *
@@ -70,17 +70,17 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
70
70
  * - {@link GeometryEndEvent | geometryend}
71
71
  * - {@link GeometryErrorEvent | geometryerror}
72
72
  *
73
- * @param file - File, assembly or specific model to load. If a `File` instance with multiple models is
74
- * specified, the default model will be loaded. If there is no default model, first availiable model
75
- * will be loaded.
73
+ * @param file - File, assembly or specific model to load. If a `File` instance with multiple
74
+ * models is specified, the default model will be loaded. If there is no default model,
75
+ * first availiable model will be loaded.
76
76
  */
77
77
  open(file: Model | File | Assembly): Promise<this>;
78
78
  cancel(): this;
79
79
  /**
80
80
  * Loads a `glTF` file into the viewer.
81
81
  *
82
- * If there was an active dragger before opening the file, it will be deactivated. After opening the
83
- * file, you must manually activate the required dragger.
82
+ * If there was an active dragger before opening the file, it will be deactivated. After
83
+ * opening the file, you must manually activate the required dragger.
84
84
  *
85
85
  * Fires:
86
86
  *
@@ -92,22 +92,22 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
92
92
  * - {@link GeometryErrorEvent | geometryerror}
93
93
  *
94
94
  * @param file - File URL or binary data buffer to load.
95
- * @param externalData - External resource map such as binary data buffers or images. Each resource
96
- * should be represented by a `uri` and a corresponding resource URL, or
95
+ * @param externalData - External resource map such as binary data buffers or images. Each
96
+ * resource should be represented by a `uri` and a corresponding resource URL, or
97
97
  * {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
98
98
  * {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
99
99
  * or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
100
100
  * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
101
101
  * @param params - Loader parameters.
102
- * @param params.path - The base path from which to find subsequent glTF resources such as textures and
103
- * .bin data files. If not defined, the base path of the file URL will be used.
102
+ * @param params.path - The base path from which to find subsequent glTF resources such as
103
+ * textures and .bin data files. If not defined, the base path of the file URL will be used.
104
104
  * @param params.requestHeader - The
105
- * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
106
- * request.
107
- * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
108
- * different domain that allows CORS. Default is `anonymous`.
109
- * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
110
- * authorization headers or TLS client certificates. See
105
+ * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
106
+ * in HTTP request.
107
+ * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
108
+ * from a different domain that allows CORS. Default is `anonymous`.
109
+ * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
110
+ * cookies, authorization headers or TLS client certificates. See
111
111
  * {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
112
112
  */
113
113
  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
129
129
  * - {@link GeometryErrorEvent | geometryerror}
130
130
  *
131
131
  * @param file - File URL or binary data buffer to load.
132
- * @param externalData - External resource map such as binary data buffers or images. Each resource
133
- * should be represented by a `uri` and a corresponding resource URL, or
132
+ * @param externalData - External resource map such as binary data buffers or images. Each
133
+ * resource should be represented by a `uri` and a corresponding resource URL, or
134
134
  * {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
135
135
  * {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
136
136
  * or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
137
137
  * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
138
138
  * @param params - Loader parameters.
139
- * @param params.path - The base path from which to find subsequent glTF resources such as textures and
140
- * .bin data files.
139
+ * @param params.path - The base path from which to find subsequent glTF resources such as
140
+ * textures and .bin data files.
141
141
  * @param params.requestHeader - The
142
- * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
143
- * request.
144
- * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
145
- * different domain that allows CORS. Default is `anonymous`.
146
- * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
147
- * authorization headers or TLS client certificates. See
142
+ * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
143
+ * in HTTP request.
144
+ * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
145
+ * from a different domain that allows CORS. Default is `anonymous`.
146
+ * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
147
+ * cookies, authorization headers or TLS client certificates. See
148
148
  * {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
149
149
  */
150
150
  loadGltfFile(file: string | globalThis.File | ArrayBuffer | Blob, externalData?: Map<string, string | globalThis.File | ArrayBuffer | Blob>, params?: {
@@ -7,22 +7,16 @@ import { ICommandsRegistry } from "@inweb/viewer-core";
7
7
  * 1. Define a command handler with a first `viewer` parameter.
8
8
  * 2. Register command handler in the commands registry by calling the {@link commands.registerCommand}.
9
9
  *
10
- * @example Implementing a custom command.
10
+ * @example <caption>Implementing a custom command.</caption>
11
+ * import { commands, Viewer } from "@inweb/viewer-three";
11
12
  *
12
- * ```javascript
13
- * import { commands, Viewer } from "@inweb/viewer-three";
13
+ * function commandHandler(viewer: Viewer, name = "world"): void {
14
+ * console.log(`Hello ${name}!!!`);
15
+ * }
14
16
  *
15
- * function commandHandler(viewer: Viewer, name = "world"): void {
16
- * console.log(`Hello ${name}!!!`);
17
- * }
17
+ * commands.registerCommand("sayHello", commandHandler);
18
18
  *
19
- * commands.registerCommand("sayHello", commandHandler);
20
- * ```
21
- *
22
- * @example Calling a custom command.
23
- *
24
- * ```javascript
25
- * viewer.executeCommand("sayHello", "user");
26
- * ```
19
+ * @example <caption>Calling a custom command.</caption>
20
+ * viewer.executeCommand("sayHello", "user");
27
21
  */
28
22
  export declare const commands: ICommandsRegistry;
@@ -0,0 +1,9 @@
1
+ import { GeometryEndEvent, IComponent } from "@inweb/viewer-core";
2
+ import type { Viewer } from "../Viewer";
3
+ export declare class DefaultPositionComponent implements IComponent {
4
+ protected viewer: Viewer;
5
+ defaultCameraPositions: any;
6
+ constructor(viewer: Viewer);
7
+ dispose(): void;
8
+ geometryEnd: (event: GeometryEndEvent) => void;
9
+ }
@@ -5,6 +5,5 @@ export declare class WCSHelperComponent implements IComponent {
5
5
  private viewer;
6
6
  constructor(viewer: Viewer);
7
7
  dispose(): void;
8
- geometryEnd: () => void;
9
8
  viewerRender: () => void;
10
9
  }
@@ -6,35 +6,35 @@ import { IComponentsRegistry } from "@inweb/viewer-core";
6
6
  *
7
7
  * 1. Define a component class implements {@link IComponent}.
8
8
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
9
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
10
- * select objects when the left mouse button is pressed.
9
+ * 3. Define the component logic in the event listeners. For example, listen for the `mousedown`
10
+ * event and select objects when the left mouse button is pressed.
11
11
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
12
12
  * 5. Register component provider in the components registry by calling the
13
13
  * {@link components.registerComponent}.
14
14
  *
15
- * @example Implementing a custom component.
15
+ * @example <caption>Implementing a custom component.</caption>
16
+ * import { IComponent, components, Viewer } from "@inweb/viewer-three";
16
17
  *
17
- * ```javascript
18
- * import { IComponent, components, Viewer } from "@inweb/viewer-three";
18
+ * class MyComponent implements IComponent {
19
+ * protected viewer: Viewer;
19
20
  *
20
- * class MyComponent implements IComponent {
21
- * protected viewer: Viewer;
21
+ * constructor(viewer: Viewer) {
22
+ * this.viewer = viewer;
23
+ * this.viewer.addEventListener("mousedown", this.onMouseDown);
24
+ * }
22
25
  *
23
- * constructor(viewer: Viewer) {
24
- * this.viewer = viewer;
25
- * this.viewer.addEventListener("mousedown", this.onMouseDown);
26
- * }
26
+ * override dispose() {
27
+ * this.viewer.removeEventListener("mousedown", this.onMouseDown);
28
+ * }
27
29
  *
28
- * override dispose() {
29
- * this.viewer.removeEventListener("mousedown", this.onMouseDown);
30
+ * onMouseDown = (event: PointerEvent) => {
31
+ * // place custom logic here
32
+ * };
30
33
  * }
31
34
  *
32
- * onMouseDown = (event: PointerEvent) => {
33
- * // place custom logic here
34
- * };
35
- * }
36
- *
37
- * components.registerComponent("MyComponent", (viewer): IComponent => new MyComponent(viewer));
38
- * ```
35
+ * components.registerComponent(
36
+ * "MyComponent",
37
+ * (viewer): IComponent => new MyComponent(viewer)
38
+ * );
39
39
  */
40
40
  export declare const components: IComponentsRegistry;
@@ -6,7 +6,6 @@ export declare class OrbitDragger implements IDragger {
6
6
  protected orbit: OrbitControls;
7
7
  protected changed: boolean;
8
8
  constructor(viewer: Viewer);
9
- initialize(): void;
10
9
  dispose(): void;
11
10
  updateControls: () => void;
12
11
  controlsStart: () => void;
@@ -6,40 +6,34 @@ import { IDraggersRegistry } from "@inweb/viewer-core";
6
6
  *
7
7
  * 1. Define a dragger class implements {@link IDragger}.
8
8
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
9
- * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove` event and
10
- * zoom in/out when the left mouse button is pressed.
9
+ * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove`
10
+ * event and zoom in/out when the left mouse button is pressed.
11
11
  * 4. Override {@link IDragger.dispose} and remove mouse event listeners from the viewer.
12
12
  * 5. Register dragger provider in the draggers registry by calling the {@link draggers.registerDragger}.
13
13
  *
14
- * @example Implementing a custom dragger.
14
+ * @example <caption>Implementing a custom dragger.</caption>
15
+ * import { IDragger, draggers, Viewer } from "@inweb/viewer-three";
15
16
  *
16
- * ```javascript
17
- * import { IDragger, draggers, Viewer } from "@inweb/viewer-three";
17
+ * class MyDragger implements IDragger {
18
+ * protected viewer: Viewer;
18
19
  *
19
- * class MyDragger implements IDragger {
20
- * protected viewer: Viewer;
20
+ * constructor(viewer: Viewer) {
21
+ * this.viewer = viewer;
22
+ * this.viewer.addEventListener("pointermove", this.onPointerMove);
23
+ * }
21
24
  *
22
- * constructor(viewer: Viewer) {
23
- * this.viewer = viewer;
24
- * this.viewer.addEventListener("pointermove", this.onPointerMove);
25
- * }
25
+ * override dispose() {
26
+ * this.viewer.removeEventListener("pointermove", this.onPointerMove);
27
+ * }
26
28
  *
27
- * override dispose() {
28
- * this.viewer.removeEventListener("pointermove", this.onPointerMove);
29
+ * onPointerMove = (event: PointerEvent) => {
30
+ * // place custom logic here
31
+ * };
29
32
  * }
30
33
  *
31
- * onPointerMove = (event: PointerEvent) => {
32
- * // place custom logic here
33
- * };
34
- * }
35
- *
36
- * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
37
- * ```
38
- *
39
- * @example Activating a custom dragger.
34
+ * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
40
35
  *
41
- * ```javascript
42
- * viewer.setActiveDragger("MyDragger");
43
- * ```
36
+ * @example <caption>Activating a custom dragger.</caption>
37
+ * viewer.setActiveDragger("MyDragger");
44
38
  */
45
39
  export declare const draggers: IDraggersRegistry;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inweb/viewer-three",
3
- "version": "26.1.3",
3
+ "version": "26.1.4",
4
4
  "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
5
5
  "homepage": "https://cloud.opendesign.com/docs/index.html",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -28,17 +28,17 @@
28
28
  "docs": "typedoc"
29
29
  },
30
30
  "dependencies": {
31
- "@inweb/client": "~26.1.3",
32
- "@inweb/eventemitter2": "~26.1.3",
33
- "@inweb/markup": "~26.1.3",
34
- "@inweb/viewer-core": "~26.1.3"
31
+ "@inweb/client": "~26.1.4",
32
+ "@inweb/eventemitter2": "~26.1.4",
33
+ "@inweb/markup": "~26.1.4",
34
+ "@inweb/viewer-core": "~26.1.4"
35
35
  },
36
36
  "devDependencies": {
37
- "@types/three": "^0.173.0",
38
- "three": "^0.173.0"
37
+ "@types/three": "^0.169.0",
38
+ "three": "^0.170.0"
39
39
  },
40
40
  "peerDependencies": {
41
- "@types/three": "^0.173.0",
42
- "three": "^0.173.0"
41
+ "@types/three": "^0.169.0",
42
+ "three": "^0.170.0"
43
43
  }
44
44
  }
@@ -21,19 +21,7 @@
21
21
  // acknowledge and accept the above terms.
22
22
  ///////////////////////////////////////////////////////////////////////////////
23
23
 
24
- import {
25
- Box3,
26
- LinearToneMapping,
27
- Object3D,
28
- OrthographicCamera,
29
- PerspectiveCamera,
30
- Plane,
31
- Scene,
32
- Sphere,
33
- Vector2,
34
- Vector3,
35
- WebGLRenderer,
36
- } from "three";
24
+ import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
37
25
  import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
38
26
  import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
39
27
 
@@ -47,7 +35,6 @@ import {
47
35
  IEntity,
48
36
  IDragger,
49
37
  IOptions,
50
- IOrthogonalCamera,
51
38
  IPerspectiveCamera,
52
39
  IPoint,
53
40
  IViewer,
@@ -60,6 +47,7 @@ import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
60
47
 
61
48
  import { draggers } from "./draggers";
62
49
  import { commands } from "./commands";
50
+
63
51
  import { components } from "./components";
64
52
 
65
53
  /**
@@ -79,7 +67,7 @@ export class Viewer
79
67
 
80
68
  public scene: Scene | undefined;
81
69
  public helpers: Scene | undefined;
82
- public camera: PerspectiveCamera | OrthographicCamera | undefined;
70
+ public camera: PerspectiveCamera | undefined;
83
71
  public renderer: WebGLRenderer | undefined;
84
72
  public models: Array<GLTF>;
85
73
  public selected: Array<Object3D>;
@@ -95,9 +83,9 @@ export class Viewer
95
83
  private _markup: IMarkup;
96
84
 
97
85
  /**
98
- * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
99
- * Server. Do not specify `Client` if you need a standalone viewer instance to view `glTF` files from
100
- * the web or from local computer.
86
+ * @param client - The `Client` instance that is used to load model reference files from the
87
+ * Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
88
+ * view `glTF` files from the web or from local computer.
101
89
  */
102
90
  constructor(client?: Client) {
103
91
  super();
@@ -154,8 +142,7 @@ export class Viewer
154
142
  const rect = canvas.parentElement.getBoundingClientRect();
155
143
  const width = rect.width || 1;
156
144
  const height = rect.height || 1;
157
- const aspect = width / height;
158
- this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
145
+ this.camera = new PerspectiveCamera(45, width / height, 0.01, 1000);
159
146
  this.camera.up.set(0, 0, 1);
160
147
 
161
148
  this.renderer = new WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
@@ -168,7 +155,7 @@ export class Viewer
168
155
 
169
156
  this._markup.initialize(this.canvas, this.canvasEvents, this, this);
170
157
 
171
- for (const name of components.getComponents().keys()) {
158
+ for (let name of components.getComponents().keys()) {
172
159
  this._components.push(components.createComponent(name, this));
173
160
  }
174
161
 
@@ -263,12 +250,12 @@ export class Viewer
263
250
  *
264
251
  * The file geometry data on the server must be converted to `glTF` format.
265
252
  *
266
- * This method requires a `Client` instance to be specified when creating the viewer to load model
267
- * reference files from the Open Cloud Server. For a standalone viewer instance use
253
+ * This method requires a `Client` instance to be specified when creating the viewer to load
254
+ * model reference files from the Open Cloud Server. For a standalone viewer instance use
268
255
  * {@link openGltfFile | openGltfFile()}.
269
256
  *
270
- * If there was an active dragger before opening the file, it will be deactivated. After opening the
271
- * file, you must manually activate the required dragger.
257
+ * If there was an active dragger before opening the file, it will be deactivated. After
258
+ * opening the file, you must manually activate the required dragger.
272
259
  *
273
260
  * Fires:
274
261
  *
@@ -280,9 +267,9 @@ export class Viewer
280
267
  * - {@link GeometryEndEvent | geometryend}
281
268
  * - {@link GeometryErrorEvent | geometryerror}
282
269
  *
283
- * @param file - File, assembly or specific model to load. If a `File` instance with multiple models is
284
- * specified, the default model will be loaded. If there is no default model, first availiable model
285
- * will be loaded.
270
+ * @param file - File, assembly or specific model to load. If a `File` instance with multiple
271
+ * models is specified, the default model will be loaded. If there is no default model,
272
+ * first availiable model will be loaded.
286
273
  */
287
274
  async open(file: Model | File | Assembly): Promise<this> {
288
275
  if (!this.renderer) return this;
@@ -319,8 +306,8 @@ export class Viewer
319
306
  /**
320
307
  * Loads a `glTF` file into the viewer.
321
308
  *
322
- * If there was an active dragger before opening the file, it will be deactivated. After opening the
323
- * file, you must manually activate the required dragger.
309
+ * If there was an active dragger before opening the file, it will be deactivated. After
310
+ * opening the file, you must manually activate the required dragger.
324
311
  *
325
312
  * Fires:
326
313
  *
@@ -332,22 +319,22 @@ export class Viewer
332
319
  * - {@link GeometryErrorEvent | geometryerror}
333
320
  *
334
321
  * @param file - File URL or binary data buffer to load.
335
- * @param externalData - External resource map such as binary data buffers or images. Each resource
336
- * should be represented by a `uri` and a corresponding resource URL, or
322
+ * @param externalData - External resource map such as binary data buffers or images. Each
323
+ * resource should be represented by a `uri` and a corresponding resource URL, or
337
324
  * {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
338
325
  * {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
339
326
  * or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
340
327
  * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
341
328
  * @param params - Loader parameters.
342
- * @param params.path - The base path from which to find subsequent glTF resources such as textures and
343
- * .bin data files. If not defined, the base path of the file URL will be used.
329
+ * @param params.path - The base path from which to find subsequent glTF resources such as
330
+ * textures and .bin data files. If not defined, the base path of the file URL will be used.
344
331
  * @param params.requestHeader - The
345
- * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
346
- * request.
347
- * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
348
- * different domain that allows CORS. Default is `anonymous`.
349
- * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
350
- * authorization headers or TLS client certificates. See
332
+ * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
333
+ * in HTTP request.
334
+ * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
335
+ * from a different domain that allows CORS. Default is `anonymous`.
336
+ * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
337
+ * cookies, authorization headers or TLS client certificates. See
351
338
  * {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
352
339
  */
353
340
  openGltfFile(
@@ -383,22 +370,22 @@ export class Viewer
383
370
  * - {@link GeometryErrorEvent | geometryerror}
384
371
  *
385
372
  * @param file - File URL or binary data buffer to load.
386
- * @param externalData - External resource map such as binary data buffers or images. Each resource
387
- * should be represented by a `uri` and a corresponding resource URL, or
373
+ * @param externalData - External resource map such as binary data buffers or images. Each
374
+ * resource should be represented by a `uri` and a corresponding resource URL, or
388
375
  * {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object, or
389
376
  * {@link https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer | ArrayBuffer}
390
377
  * or {@link https://developer.mozilla.org/docs/Web/API/Blob/Blob | Blob}, or
391
378
  * {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string,
392
379
  * @param params - Loader parameters.
393
- * @param params.path - The base path from which to find subsequent glTF resources such as textures and
394
- * .bin data files.
380
+ * @param params.path - The base path from which to find subsequent glTF resources such as
381
+ * textures and .bin data files.
395
382
  * @param params.requestHeader - The
396
- * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used in HTTP
397
- * request.
398
- * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url from a
399
- * different domain that allows CORS. Default is `anonymous`.
400
- * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as cookies,
401
- * authorization headers or TLS client certificates. See
383
+ * {@link https://developer.mozilla.org/docs/Glossary/Request_header | request header} used
384
+ * in HTTP request.
385
+ * @param params.crossOrigin - The crossOrigin string to implement CORS for loading the url
386
+ * from a different domain that allows CORS. Default is `anonymous`.
387
+ * @param params.withCredentials - Whether the XMLHttpRequest uses credentials such as
388
+ * cookies, authorization headers or TLS client certificates. See
402
389
  * {@link https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
403
390
  */
404
391
  async loadGltfFile(
@@ -629,46 +616,14 @@ export class Viewer
629
616
 
630
617
  const getVector3FromPoint3d = ({ x, y, z }): Vector3 => new Vector3(x, y, z);
631
618
 
632
- const setOrthogonalCamera = (orthogonal_camera: IOrthogonalCamera) => {
633
- if (orthogonal_camera) {
634
- const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
635
- const rendererSize = this.renderer.getSize(new Vector2());
636
- const aspect = rendererSize.x / rendererSize.y;
637
-
638
- this.camera = new OrthographicCamera();
639
- this.camera.top = orthogonal_camera.field_height / 2;
640
- this.camera.bottom = -orthogonal_camera.field_height / 2;
641
- this.camera.left = this.camera.bottom * aspect;
642
- this.camera.right = this.camera.top * aspect;
643
- this.camera.near = 0;
644
- this.camera.far = extentsSize * 100;
645
- this.camera.zoom = orthogonal_camera.view_to_world_scale;
646
- this.camera.updateProjectionMatrix();
647
-
648
- this.camera.up.copy(getVector3FromPoint3d(orthogonal_camera.up_vector));
649
- this.camera.position.copy(getVector3FromPoint3d(orthogonal_camera.view_point));
650
- this.camera.lookAt(getVector3FromPoint3d(orthogonal_camera.direction).add(this.camera.position));
619
+ const setPerspectiveCamera = (camera: IPerspectiveCamera) => {
620
+ if (camera) {
621
+ this.camera.up.copy(getVector3FromPoint3d(camera.up_vector));
622
+ this.camera.fov = camera.field_of_view;
623
+ this.camera.position.copy(getVector3FromPoint3d(camera.view_point));
624
+ this.camera.lookAt(getVector3FromPoint3d(camera.direction).add(this.camera.position));
651
625
  this.camera.updateMatrixWorld();
652
- }
653
- };
654
-
655
- const setPerspectiveCamera = (perspective_camera: IPerspectiveCamera) => {
656
- if (perspective_camera) {
657
- const extentsSize = this.extents.getBoundingSphere(new Sphere()).radius * 2;
658
- const rendererSize = this.renderer.getSize(new Vector2());
659
- const aspect = rendererSize.x / rendererSize.y;
660
-
661
- this.camera = new PerspectiveCamera();
662
- this.camera.fov = perspective_camera.field_of_view;
663
- this.camera.aspect = aspect;
664
- this.camera.near = extentsSize / 100;
665
- this.camera.far = extentsSize * 100;
666
626
  this.camera.updateProjectionMatrix();
667
-
668
- this.camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));
669
- this.camera.position.copy(getVector3FromPoint3d(perspective_camera.view_point));
670
- this.camera.lookAt(getVector3FromPoint3d(perspective_camera.direction).add(this.camera.position));
671
- this.camera.updateMatrixWorld();
672
627
  }
673
628
  };
674
629
 
@@ -685,7 +640,7 @@ export class Viewer
685
640
  };
686
641
 
687
642
  const setSelection = (selection: IEntity[]) => {
688
- if (selection) this.setSelected(selection.map((component) => component.handle));
643
+ this.setSelected(selection?.map((component) => component.handle));
689
644
  };
690
645
 
691
646
  const draggerName = this._activeDragger?.name;
@@ -698,7 +653,6 @@ export class Viewer
698
653
  this.showAll();
699
654
  this.explode();
700
655
 
701
- setOrthogonalCamera(viewpoint.orthogonal_camera);
702
656
  setPerspectiveCamera(viewpoint.perspective_camera);
703
657
  setClippingPlanes(viewpoint.clipping_planes);
704
658
  setSelection(viewpoint.selection);
@@ -716,28 +670,13 @@ export class Viewer
716
670
 
717
671
  const getPoint3dFromVector3 = ({ x, y, z }): IPoint => ({ x, y, z });
718
672
 
719
- const getOrthogonalCamera = (): IOrthogonalCamera => {
720
- if (this.camera["isOrthographicCamera"])
721
- return {
722
- view_point: getPoint3dFromVector3(this.camera.position),
723
- direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3())),
724
- up_vector: getPoint3dFromVector3(this.camera.up),
725
- field_width: this.camera["right"] - this.camera["left"],
726
- field_height: this.camera["top"] - this.camera["bottom"],
727
- view_to_world_scale: this.camera.zoom,
728
- };
729
- else return undefined;
730
- };
731
-
732
673
  const getPerspectiveCamera = (): IPerspectiveCamera => {
733
- if (this.camera["isPerspectiveCamera"])
734
- return {
735
- view_point: getPoint3dFromVector3(this.camera.position),
736
- direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3())),
737
- up_vector: getPoint3dFromVector3(this.camera.up),
738
- field_of_view: this.camera["fov"],
739
- };
740
- else return undefined;
674
+ return {
675
+ view_point: getPoint3dFromVector3(this.camera.position),
676
+ direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3())),
677
+ up_vector: getPoint3dFromVector3(this.camera.up),
678
+ field_of_view: this.camera.fov,
679
+ };
741
680
  };
742
681
 
743
682
  const getClippingPlanes = (): IClippingPlane[] => {
@@ -758,7 +697,6 @@ export class Viewer
758
697
 
759
698
  const viewpoint: IViewpoint = { custom_fields: {} };
760
699
 
761
- viewpoint.orthogonal_camera = getOrthogonalCamera();
762
700
  viewpoint.perspective_camera = getPerspectiveCamera();
763
701
  viewpoint.clipping_planes = getClippingPlanes();
764
702
  viewpoint.selection = getSelection();