@inweb/viewer-three 25.12.1 → 25.12.2

package/lib/Viewer/Viewer.d.ts

@@ -1,5 +1,4 @@
 import { Box3, Object3D, 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";
 import { CanvasEventMap, IDragger, IOptions, IViewer, IViewpoint, Options, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
@@ -17,7 +16,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     helpers: Scene | undefined;
     camera: PerspectiveCamera | undefined;
     renderer: WebGLRenderer | undefined;
-    models: Array<GLTF>;
+    models: Array<any>;
     selected: Array<Object3D>;
     extents: Box3;
     target: Vector3;
@@ -99,8 +98,11 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *   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.fileFormat - File format. If no format is specified, the file extension from
+     *   the file URL will be used, or `gltf` for binary data. If no appropriate loader is found
+     *   for the specified format, an exception will be thrown.
+     * @param params.path - The base path from which additional resources like textures will be
+     *   loaded. 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.
@@ -111,6 +113,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *   {@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?: {
+        fileFormat?: string;
         path?: string;
         requestHeader?: HeadersInit;
         crossOrigin?: string;
@@ -136,8 +139,11 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *   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.fileFormat - File format. If no format is specified, the file extension from
+     *   the file URL will be used, or `gltf` for binary data. If no appropriate loader is found
+     *   for the specified format, an exception will be thrown.
+     * @param params.path - The base path from which additional resources like textures will be
+     *   loaded. 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.
@@ -148,6 +154,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *   {@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?: {
+        fileFormat?: string;
         path?: string;
         requestHeader?: HeadersInit;
         crossOrigin?: string;

package/lib/Viewer/loaders/IFCXLoader.d.ts

@@ -0,0 +1,8 @@
+import { Group, Loader } from "three";
+export interface IFCX {
+    scene: Group;
+}
+declare class IFCXLoader extends Loader<IFCX> {
+    load(url: any, onLoad: (ifc: IFCX) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): void;
+}
+export { IFCXLoader };

package/lib/Viewer/loaders/USDZLoader2.d.ts

@@ -0,0 +1,10 @@
+import { Group } from "three";
+import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader.js";
+export interface USDZ {
+    scene: Group;
+    animations: boolean;
+}
+export declare class USDZLoader2 extends USDZLoader {
+    parse(buffer: any): Group<import("three").Object3DEventMap>;
+    load(url: string, onLoad: (data: any) => void, onProgress?: (event: ProgressEvent) => void, onError?: (err: unknown) => void): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "25.12.1",
+  "version": "25.12.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,10 +28,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.12.1",
-    "@inweb/eventemitter2": "~25.12.1",
-    "@inweb/markup": "~25.12.1",
-    "@inweb/viewer-core": "~25.12.1"
+    "@inweb/client": "~25.12.2",
+    "@inweb/eventemitter2": "~25.12.2",
+    "@inweb/markup": "~25.12.2",
+    "@inweb/viewer-core": "~25.12.2"
   },
   "devDependencies": {
     "@types/three": "^0.169.0",

package/src/Viewer/Viewer.ts

@@ -22,8 +22,10 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, LinearToneMapping, Object3D, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
-import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
+import { USDZLoader2 } from "./loaders/USDZLoader2";
+import { IFCXLoader } from "./loaders/IFCXLoader";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
@@ -86,7 +88,7 @@ export class Viewer
   public helpers: Scene | undefined;
   public camera: PerspectiveCamera | undefined;
   public renderer: WebGLRenderer | undefined;
-  public models: Array<GLTF>;
+  public models: Array<any>;
   public selected: Array<Object3D>;
   public extents: Box3;
   public target: Vector3;
@@ -311,20 +313,25 @@ export class Viewer
 
     this.emitEvent({ type: "open", file, model: file });
 
-    let model: Model | undefined = undefined;
-    if (file) {
-      const models = (await file.getModels()) || [];
-      model = models.find((model: Model) => model.default) || models[0];
-    }
-    if (!model) throw new Error("No default model found");
+    if (!file) throw new Error("No default model found");
+
+    let database = "";
+    let path = "";
 
-    const geometryType = model.database.split(".").pop();
-    if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
+    const models = (await file.getModels()) || [];
+    const model = models.find((model: Model) => model.default) || models[0];
+    if (model) {
+      database = model.database;
+      path = model.path;
+    } else {
+      database = file.id + file.type;
+      path = `${file.path}/downloads`;
+    }
 
-    const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
-    const params = { requestHeader: model.httpClient.headers };
+    const url = `${file.httpClient.serverUrl}${path}/${database}`;
+    const params = { requestHeader: file.httpClient.headers };
 
-    await this.loadReferences(model);
+    await this.loadReferences(file);
     await this.loadGltfFile(url, undefined, params);
 
     return this;
@@ -358,8 +365,11 @@ export class Viewer
    *   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.fileFormat - File format. If no format is specified, the file extension from
+   *   the file URL will be used, or `gltf` for binary data. If no appropriate loader is found
+   *   for the specified format, an exception will be thrown.
+   * @param params.path - The base path from which additional resources like textures will be
+   *   loaded. 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.
@@ -373,6 +383,7 @@ export class Viewer
     file: string | globalThis.File | ArrayBuffer | Blob,
     externalData: Map<string, string | globalThis.File | ArrayBuffer | Blob> = new Map(),
     params: {
+      fileFormat?: string;
       path?: string;
       requestHeader?: HeadersInit;
       crossOrigin?: string;
@@ -409,8 +420,11 @@ export class Viewer
    *   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.fileFormat - File format. If no format is specified, the file extension from
+   *   the file URL will be used, or `gltf` for binary data. If no appropriate loader is found
+   *   for the specified format, an exception will be thrown.
+   * @param params.path - The base path from which additional resources like textures will be
+   *   loaded. 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.
@@ -424,6 +438,7 @@ export class Viewer
     file: string | globalThis.File | ArrayBuffer | Blob,
     externalData: Map<string, string | globalThis.File | ArrayBuffer | Blob> = new Map(),
     params: {
+      fileFormat?: string;
       path?: string;
       requestHeader?: HeadersInit;
       crossOrigin?: string;
@@ -434,30 +449,44 @@ export class Viewer
     try {
       this.emitEvent({ type: "geometrystart" });
 
-      const loader = new GLTFLoader(manager);
+      const loaders = {
+        gltf: GLTFLoader,
+        usdz: USDZLoader2,
+        ifcx: IFCXLoader,
+      };
+
+      let format = params.fileFormat;
+      if (!format && typeof file === "string") format = file.split(".").pop().toLocaleLowerCase();
+      if (!format && file instanceof globalThis.File) format = file.name.split(".").pop().toLocaleLowerCase();
+      if (!format) format = "gltf";
+      if (!loaders[format]) throw new Error(`Unknown geometry type: ${format}`);
+
+      const loader = new loaders[format](manager);
       loader.setPath(manager.path);
       loader.setRequestHeader(params.requestHeader as any);
       loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
       loader.setWithCredentials(params.withCredentials || loader.withCredentials);
 
-      const gltf = await loader.loadAsync(manager.fileURL, (event: ProgressEvent) => {
+      const model = await loader.loadAsync(manager.fileURL, (event: ProgressEvent) => {
         const { lengthComputable, loaded, total } = event;
         const progress = lengthComputable ? loaded / total : 1;
         this.emitEvent({ type: "geometryprogress", data: progress });
       });
 
       if (!this.scene) return this;
-      if (!gltf.scene) throw new Error("No glTF scene found");
+      if (!model.scene) throw new Error("No scene found");
 
-      this.models.push(gltf);
-      this.scene.add(gltf.scene);
+      this.models.push(model);
+      this.scene.add(model.scene);
 
       this.syncOptions();
       this.syncOverlay();
       this.update();
 
+      setTimeout(this.update, 0); // <- USDZ specific
+
       this.emitEvent({ type: "databasechunk" });
-      this.emitEvent({ type: "geometryend", data: gltf.scene });
+      this.emitEvent({ type: "geometryend", data: model.scene });
     } catch (error) {
       this.emitEvent({ type: "geometryerror", data: error });
       throw error;
@@ -492,8 +521,8 @@ export class Viewer
     this.helpers.traverse(disposeObject);
     this.helpers.clear();
 
-    this.models.forEach((gltf) => gltf.scene.traverse(disposeObject));
-    this.models.forEach((gltf) => gltf.scene.removeFromParent());
+    this.models.forEach((model) => model.scene.traverse(disposeObject));
+    this.models.forEach((model) => model.scene.removeFromParent());
     this.models = [];
 
     this.scene.clear();

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -27,18 +27,31 @@ import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 export const defaultViewPositions = {
-  top: new Vector3(0, 0, 1),
-  bottom: new Vector3(0, 0, -1),
+  top: new Vector3(0, 1, 0),
+  bottom: new Vector3(0, -1, 0),
   left: new Vector3(-1, 0, 0),
   right: new Vector3(1, 0, 0),
-  front: new Vector3(0, -1, 0),
-  back: new Vector3(0, 1, 0),
+  front: new Vector3(0, 0, 1),
+  back: new Vector3(0, 0, -1),
   sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
   se: new Vector3(0.5, -0.5, 1.0).normalize(),
   ne: new Vector3(0.5, 0.5, 1.0).normalize(),
   nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
 };
 
+// export const defaultViewPositions = {
+//   top: new Vector3(0, 0, 1),
+//   bottom: new Vector3(0, 0, -1),
+//   left: new Vector3(-1, 0, 0),
+//   right: new Vector3(1, 0, 0),
+//   front: new Vector3(0, -1, 0),
+//   back: new Vector3(0, 1, 0),
+//   sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
+//   se: new Vector3(0.5, -0.5, 1.0).normalize(),
+//   ne: new Vector3(0.5, 0.5, 1.0).normalize(),
+//   nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
+// };
+
 function setDefaultViewPosition(viewer: Viewer, position: string): void {
   const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
 

package/src/Viewer/components/DefaultPositionComponent.ts

@@ -49,7 +49,7 @@ export class DefaultPositionComponent implements IDisposable {
     this.viewer.camera.updateMatrixWorld();
     this.viewer.camera.updateProjectionMatrix();
 
-    this.viewer.executeCommand("setDefaultViewPosition", "sw");
+    this.viewer.executeCommand("setDefaultViewPosition", "front");
     this.viewer.executeCommand("zoomToExtents");
   };
 }

package/src/Viewer/components/ExtentsComponent.ts

@@ -34,16 +34,25 @@ export class ExtentsComponent implements IDisposable {
     this.viewer.addEventListener("geometryend", this.syncExtents);
     this.viewer.addEventListener("clear", this.syncExtents);
     this.viewer.on("explode", this.syncExtents);
+    this.viewer.on("isolate", this.syncExtents);
+    this.viewer.on("hide", this.syncExtents);
+    this.viewer.on("showall", this.syncExtents);
   }
 
   dispose() {
     this.viewer.removeEventListener("geometryend", this.syncExtents);
     this.viewer.removeEventListener("clear", this.syncExtents);
     this.viewer.off("explode", this.syncExtents);
+    this.viewer.off("isolate", this.syncExtents);
+    this.viewer.off("hide", this.syncExtents);
+    this.viewer.off("showall", this.syncExtents);
   }
 
   syncExtents = () => {
-    const extents = this.viewer.models.reduce((result: Box3, gltf) => result.expandByObject(gltf.scene), new Box3());
+    const extents = new Box3();
+    this.viewer.models.forEach((model) =>
+      model.scene.traverseVisible((object) => !object.children.length && extents.expandByObject(object))
+    );
 
     this.viewer.extents.copy(extents);
     this.viewer.target.copy(extents.getCenter(new Vector3()));

package/src/Viewer/loaders/IFCXLoader.ts

@@ -0,0 +1,71 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { FileLoader, Group, Loader } from "three";
+import addModel, { clear } from "./render.mjs";
+
+export interface IFCX {
+  scene: Group;
+}
+
+class IFCXLoader extends Loader<IFCX> {
+  override load(
+    url: any,
+    onLoad: (ifc: IFCX) => void,
+    onProgress?: (event: ProgressEvent) => void,
+    onError?: (event: ErrorEvent) => void
+  ) {
+    const loader = new FileLoader(this.manager);
+    loader.setPath(this.path);
+    loader.setResponseType("json");
+    loader.setRequestHeader(this.requestHeader);
+    loader.setWithCredentials(this.withCredentials);
+    loader.load(
+      url,
+      (buffer) => {
+        try {
+          const scene = addModel("", buffer);
+          let handle = 0;
+          scene.traverse((object) => {
+            object.userData = { ...object.userData, handle };
+            handle++;
+          });
+          onLoad({ scene });
+        } catch (e: any) {
+          if (onError) {
+            onError(e);
+          } else {
+            console.error(e);
+          }
+          this.manager.itemError(url);
+        } finally {
+          clear();
+        }
+      },
+      onProgress,
+      onError
+    );
+  }
+}
+
+export { IFCXLoader };

package/src/Viewer/loaders/USDZLoader2.ts

@@ -0,0 +1,28 @@
+import { Group } from "three";
+import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader.js";
+
+export interface USDZ {
+  scene: Group;
+  animations: boolean;
+}
+
+export class USDZLoader2 extends USDZLoader {
+  override parse(buffer) {
+    const scene = super.parse(buffer);
+    let handle = 0;
+    scene.traverse((object) => {
+      object.userData = { ...object.userData, handle };
+      handle++;
+    });
+    return scene;
+  }
+
+  override load(
+    url: string,
+    onLoad: (data: any) => void,
+    onProgress?: (event: ProgressEvent) => void,
+    onError?: (err: unknown) => void
+  ) {
+    super.load(url, (scene) => onLoad({ scene }), onProgress, onError);
+  }
+}