@inweb/viewer-three 26.5.0 → 26.5.1

package/plugins/loaders/IFCXFileLoader.ts

@@ -0,0 +1,76 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 { GLTFLoadingManager, GLTFLoadParams, Loader, Viewer } from "@inweb/viewer-three";
+import { IFCXLoader } from "./IFCX/IFCXLoader";
+
+export class IFCXFileLoader extends Loader {
+  public viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+  }
+
+  override isSupport(file: any, format?: string): boolean {
+    return (
+      (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
+      /(ifcx)$/i.test(format)
+    );
+  }
+
+  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+    const manager = new GLTFLoadingManager(file, params);
+
+    const loader = new IFCXLoader(manager);
+    loader.setPath(manager.path);
+    loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+    loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+
+    const progress = (event: ProgressEvent) => {
+      const { lengthComputable, loaded, total } = event;
+      const progress = lengthComputable ? loaded / total : 1;
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
+    };
+
+    const scene = await loader.loadAsync(manager.fileURL, progress);
+    if (!this.viewer.scene) return this;
+
+    let handle = 0;
+    scene.traverse((object) => {
+      object.userData = { handle, ...object.userData };
+      handle++;
+    });
+
+    this.viewer.scene.add(scene);
+    this.viewer.models.push(scene);
+
+    this.viewer.syncOptions();
+    this.viewer.syncOverlay();
+    this.viewer.update();
+
+    this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
+
+    return this;
+  }
+}

package/plugins/loaders/IFCXLoader.ts

@@ -0,0 +1,30 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 { loaders } from "@inweb/viewer-three";
+
+import { IFCXModelLoader } from "./IFCXModelLoader";
+import { IFCXFileLoader } from "./IFCXFileLoader";
+
+loaders.registerLoader("ifcx", (viewer: any) => new IFCXModelLoader(viewer));
+loaders.registerLoader("ifcx-file", (viewer: any) => new IFCXFileLoader(viewer));

package/plugins/loaders/IFCXModelLoader.ts

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 { Loader, Viewer } from "@inweb/viewer-three";
+import { parse, clear } from "./IFCX/render.js";
+
+export class IFCXModelLoader extends Loader {
+  public viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+  }
+
+  override isSupport(file: any): boolean {
+    return (
+      typeof file === "object" &&
+      typeof file.type === "string" &&
+      typeof file.download === "function" &&
+      /.ifcx$/i.test(file.type)
+    );
+  }
+
+  override async load(model: any): Promise<this> {
+    const progress = (progress: number) => {
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model });
+    };
+
+    const arrayBuffer = await model.download(progress, this.abortController.signal);
+    if (!this.viewer.scene) return this;
+
+    const textDecoder = new TextDecoder();
+    const json = JSON.parse(textDecoder.decode(arrayBuffer));
+
+    const scene = parse(json);
+    clear();
+
+    let handle = 0;
+    scene.traverse((object) => {
+      object.userData = { handle, ...object.userData };
+      handle++;
+    });
+
+    this.viewer.scene.add(scene);
+    this.viewer.models.push(scene);
+
+    this.viewer.syncOptions();
+    this.viewer.syncOverlay();
+    this.viewer.update();
+
+    this.viewer.emitEvent({ type: "databasechunk", data: scene, file: model });
+
+    return this;
+  }
+}

package/src/Viewer/Viewer.ts

@@ -34,18 +34,18 @@ import {
   Vector3,
   WebGLRenderer,
 } from "three";
-import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { GLTFLoadingManager } from "./loaders/GLTFLoadingManager";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
 import {
   CANVAS_EVENTS,
   CanvasEventMap,
+  FileSource,
   IClippingPlane,
   IComponent,
   IEntity,
   IDragger,
+  ILoader,
   IOptions,
   IOrthogonalCamera,
   IPerspectiveCamera,
@@ -61,6 +61,7 @@ import { IMarkup, IWorldTransform, Markup } from "@inweb/markup";
 import { draggers } from "./draggers";
 import { commands } from "./commands";
 import { components } from "./components";
+import { loaders } from "./loaders";
 
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
@@ -81,7 +82,8 @@ export class Viewer
   public helpers: Scene | undefined;
   public camera: PerspectiveCamera | OrthographicCamera | undefined;
   public renderer: WebGLRenderer | undefined;
-  public models: Array<GLTF>;
+  public models: Array<Object3D>;
+  public loaders: Array<ILoader>;
   public selected: Array<Object3D>;
   public extents: Box3;
   public target: Vector3;
@@ -109,6 +111,7 @@ export class Viewer
     this.canvaseventlistener = (event: Event) => this.emit(event);
 
     this.models = [];
+    this.loaders = [];
     this.selected = [];
     this.extents = new Box3();
     this.target = new Vector3();
@@ -259,17 +262,35 @@ export class Viewer
   }
 
   /**
-   * Loads a file from Open Cloud Server into the viewer.
+   * Loads a file into the viewer.
    *
-   * The file geometry data on the server must be converted to `glTF` format.
+   * The viewer must be {@link initialize | initialized} before opening the file. Otherwise, `open()` does
+   * nothing.
    *
-   * 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()}.
+   * This method requires a `Client` instance to be specified to load file from the Open Cloud Server.
+   * The file geometry data on the Open Cloud Server must be converted into a format siutable for the
+   * viewer, otherwise an exception will be thrown.
+   *
+   * For files from Open Cloud Server, the default model will be loaded. If there is no default model,
+   * first availiable model will be loaded. If no models are found in the file, an exception will be
+   * thrown.
+   *
+   * The file extension is used to determine the file format. For a `ArrayBuffer`, `Blob` and `Data URL`,
+   * a file format must be specified using `params.format` parameter (see below). If no appropriate
+   * loader is found for the specified format, an exception will be thrown.
    *
    * 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.
    *
+   * To open a large files, enable {@link IOptions.enablePartialMode | partial streaming} mode before
+   * opening. For example:
+   *
+   * ```javascript
+   * viewer.options.enableStreamingMode = true;
+   * viewer.options.enablePartialMode = true;
+   * await viewer.open(file);
+   * ```
+   *
    * Fires:
    *
    * - {@link OpenEvent | open}
@@ -280,67 +301,23 @@ 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.
-   */
-  async open(file: Model | File | Assembly): Promise<this> {
-    if (!this.renderer) return this;
-
-    this.cancel();
-    this.clear();
-
-    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");
-
-    const geometryType = model.database.split(".").pop();
-    if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
-
-    const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
-    const params = { requestHeader: model.httpClient.headers };
-
-    await this.loadReferences(model);
-    await this.loadGltfFile(url, undefined, params);
-
-    return this;
-  }
-
-  cancel(): this {
-    this.emitEvent({ type: "cancel" });
-    return 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.
+   * @param file - File to load.
+   * @param params - Loading parameters.
+   * @param params.format - File format string. Required when loading a file as `ArrayBuffer`, `Blob` or
+   *   `Data URL`.
+   * @param params.mode - File opening mode. Can be one of:
    *
-   * Fires:
+   *   - `open` - Unloads an open file and opens a new one. This is default mode.
+   *   - `append` - Appends a file to an already open file.
    *
-   * - {@link OpenEvent | open}
-   * - {@link GeometryStartEvent | geometrystart}
-   * - {@link GeometryProgressEvent | geometryprogress}
-   * - {@link DatabaseChunkEvent | databasechunk}
-   * - {@link GeometryEndEvent | geometryend}
-   * - {@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 params.externalFiles - External resource map such as binary data buffers or textures. 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}
+   *   {@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 additional resources 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.
@@ -350,102 +327,78 @@ export class Viewer
    *   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> = new Map(),
+  async open(
+    file: FileSource,
     params: {
+      format?: string;
+      mode?: string;
       path?: string;
+      externalFiles?: Map<string, string | globalThis.File | ArrayBuffer | Blob>;
       requestHeader?: HeadersInit;
       crossOrigin?: string;
       withCredentials?: boolean;
     } = {}
   ): Promise<this> {
-    if (!this.renderer) return Promise.resolve(this);
+    if (!this.renderer) return this;
 
-    this.cancel();
-    this.clear();
+    if (params.mode !== "a" && params.mode !== "append") {
+      this.cancel();
+      this.clear();
+    }
+
+    this.emitEvent({ type: "open", file });
 
-    this.emitEvent({ type: "open" });
+    let model: any = file;
+    if (model && typeof model.getModels === "function") {
+      const models = await model.getModels();
+      model = models.find((model: Model) => model.default) || models[0] || file;
+    }
+    if (!model) throw new Error(`Format not supported`);
+
+    let format = params.format;
+    if (!format && typeof model.type === "string") format = model.type.split(".").pop();
+    if (!format && typeof file === "string") format = file.split(".").pop();
+    if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
+
+    const loader = loaders.createLoader(this, model, format);
+    if (!loader) throw new Error(`Format not supported`);
+    this.loaders.push(loader);
+
+    this.emitEvent({ type: "geometrystart", file, model });
+    try {
+      await this.loadReferences(model);
+      await loader.load(model, format, params);
+    } catch (error: any) {
+      this.emitEvent({ type: "geometryerror", data: error, file, model });
+      throw error;
+    }
+    this.emitEvent({ type: "geometryend", file, model });
 
-    return this.loadGltfFile(file, externalData, params);
+    return this;
   }
 
   /**
-   * Appends a `glTF` file to the existing opened file.
-   *
-   * Fires:
-   *
-   * - {@link OpenEvent | open}
-   * - {@link GeometryStartEvent | geometrystart}
-   * - {@link GeometryProgressEvent | geometryprogress}
-   * - {@link DatabaseChunkEvent | databasechunk}
-   * - {@link GeometryEndEvent | geometryend}
-   * - {@link GeometryErrorEvent | geometryerror}
+   * Deprecated since `26.4`. Use {@link open | open()} instead.
    *
-   * @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
-   *   {@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.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/Web/API/XMLHttpRequest/withCredentials | XMLHttpRequest.withCredentials}.
+   * @deprecated
    */
-  async loadGltfFile(
-    file: string | globalThis.File | ArrayBuffer | Blob,
-    externalData: Map<string, string | globalThis.File | ArrayBuffer | Blob> = new Map(),
-    params: {
-      path?: string;
-      requestHeader?: HeadersInit;
-      crossOrigin?: string;
-      withCredentials?: boolean;
-    } = {}
-  ): Promise<this> {
-    const manager = new GLTFLoadingManager(file, externalData, params);
-    try {
-      this.emitEvent({ type: "geometrystart" });
-
-      const loader = new GLTFLoader(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 { 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");
-
-      this.models.push(gltf);
-      this.scene.add(gltf.scene);
+  openGltfFile(file, externalFiles, params: any = {}): Promise<this> {
+    return this.open(file, { ...params, format: "gltf", externalFiles });
+  }
 
-      this.syncOptions();
-      this.syncOverlay();
-      this.update();
+  /**
+   * Deprecated since `26.4`. Use {@link open | open()} instead.
+   *
+   * @deprecated
+   */
+  loadGltfFile(file, externalFiles, params: any = {}): Promise<this> {
+    return this.open(file, { ...params, format: "gltf", externalFiles, mode: "append" });
+  }
 
-      this.emitEvent({ type: "databasechunk" });
-      this.emitEvent({ type: "geometryend", data: gltf.scene });
-    } catch (error) {
-      this.emitEvent({ type: "geometryerror", data: error });
-      throw error;
-    } finally {
-      manager.dispose();
-    }
+  cancel(): this {
+    this.loaders.forEach((loader) => loader.cancel());
 
+    this.emitEvent({ type: "cancel" });
     return this;
   }
 
@@ -454,10 +407,7 @@ export class Viewer
 
     function disposeMaterial(material: any) {
       const materials = Array.isArray(material) ? material : [material];
-      materials.forEach((material: any) => {
-        // Object.keys(material).forEach((key) => material[key]?.dispose?.());
-        material.dispose();
-      });
+      materials.forEach((material: any) => material.dispose());
     }
 
     function disposeObject(object: any) {
@@ -473,12 +423,15 @@ 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.traverse(disposeObject));
+    this.models.forEach((model) => model.removeFromParent());
     this.models = [];
 
     this.scene.clear();
 
+    this.loaders.forEach((loader) => loader.dispose());
+    this.loaders = [];
+
     this.syncOptions();
     this.syncOverlay();
     this.update(true);

package/src/Viewer/commands/Explode.ts

@@ -38,7 +38,7 @@ function calcExplodeDepth(object, depth: number): number {
   return res;
 }
 
-function explodeScene(scene, scale = 0, coeff = 4) {
+function explodeModel(scene, scale = 0, coeff = 4) {
   scale /= 100;
 
   if (!scene.explodeDepth) scene.explodeDepth = calcExplodeDepth(scene, 1);
@@ -69,7 +69,7 @@ function explodeScene(scene, scale = 0, coeff = 4) {
 }
 
 export function explode(viewer: Viewer, index = 0): void {
-  viewer.models.forEach((model) => explodeScene(model.scene, index));
+  viewer.models.forEach((model) => explodeModel(model, index));
   viewer.scene.updateMatrixWorld();
 
   viewer.update();

package/src/Viewer/components/index.ts

@@ -23,14 +23,11 @@
 
 import { IComponentsRegistry, componentsRegistry } from "@inweb/viewer-core";
 
-// import { AxesHelperComponent } from "./AxesHelperComponent";
 import { BackgroundComponent } from "./BackgroundComponent";
 import { RoomEnvironmentComponent } from "./RoomEnvironmentComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
-// import { ExtentsHelperComponent } from "./ExtentsHelperComponent";
-// import { LightComponent } from "./LightComponent";
-// import { LightHelperComponent } from "./LightHelperComponent";
+import { LightComponent } from "./LightComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { SelectionComponent } from "./SelectionComponent";
@@ -82,12 +79,9 @@ components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponen
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("RoomEnvironmentComponent", (viewer) => new RoomEnvironmentComponent(viewer));
-// components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
 
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));
-// components.registerComponent("AxesHelperComponent", (viewer) => new AxesHelperComponent(viewer));
-// components.registerComponent("ExtentsHelperComponent", (viewer) => new ExtentsHelperComponent(viewer));
-// components.registerComponent("LightHelperComponent", (viewer) => new LightHelperComponent(viewer));

package/src/Viewer/loaders/GLTFFileLoader.ts

@@ -0,0 +1,73 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { Loader } from "@inweb/viewer-core";
+
+import { Viewer } from "../Viewer";
+import { GLTFLoadingManager, GLTFLoadParams } from "./GLTFLoadingManager";
+
+export class GLTFFileLoader extends Loader {
+  public viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+  }
+
+  override isSupport(file: any, format?: string): boolean {
+    return (
+      (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
+      /(gltf|glb)$/i.test(format)
+    );
+  }
+
+  override async load(buffer: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+    const manager = new GLTFLoadingManager(buffer, params);
+
+    const loader = new GLTFLoader(manager);
+    loader.setPath(manager.path);
+    loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+    loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+
+    const progress = (event: ProgressEvent) => {
+      const { lengthComputable, loaded, total } = event;
+      const progress = lengthComputable ? loaded / total : 1;
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: buffer });
+    };
+
+    const gltf = await loader.loadAsync(manager.fileURL, progress);
+    if (!this.viewer.scene) return this;
+
+    this.viewer.scene.add(gltf.scene);
+    this.viewer.models.push(gltf.scene);
+
+    this.viewer.syncOptions();
+    this.viewer.syncOverlay();
+    this.viewer.update();
+
+    this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file: buffer });
+
+    return this;
+  }
+}