@inweb/viewer-three 26.6.1 → 26.6.3

package/lib/Viewer/Viewer.d.ts

@@ -151,6 +151,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     activeDragger(): IDragger | null;
     setActiveDragger(name?: string): IDragger | null;
     resetActiveDragger(): void;
+    getComponent(name: string): IComponent;
     is3D(): boolean;
     screenToWorld(position: {
         x: number;
@@ -174,7 +175,6 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
         z: number;
     };
     executeCommand(id: string, ...args: any[]): any;
-    getComponent(name: string): IComponent;
     drawViewpoint(viewpoint: IViewpoint): void;
     createViewpoint(): IViewpoint;
 }

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

@@ -0,0 +1,18 @@
+import { LineBasicMaterial, MeshBasicMaterial } from "three";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+export declare class HighlighterComponent implements IComponent {
+    protected viewer: Viewer;
+    highlightMaterial: MeshBasicMaterial;
+    outlineMaterial: LineMaterial;
+    highlightLineMaterial: LineBasicMaterial;
+    highlightLineGlowMaterial: LineMaterial;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    highlight(object: any): void;
+    unhighlight(object: any): void;
+    geometryEnd: () => void;
+    optionsChange: () => void;
+    viewerResize(event: ResizeEvent): void;
+}

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

@@ -0,0 +1,6 @@
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+export declare class HighlighterUtils {
+    static isBreak(positions: Float32Array, i: number): boolean;
+    static fromIndexedLine(positions: Float32Array, indices: number[]): LineSegmentsGeometry;
+    static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean): LineSegmentsGeometry;
+}

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

@@ -1,11 +1,12 @@
-import { Intersection, MeshBasicMaterial, Object3D, Raycaster, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
+import { Viewer } from "../Viewer";
+import { HighlighterComponent } from "./HighlighterComponent";
 export declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;
     protected raycaster: Raycaster;
     protected downPosition: Vector2;
-    protected facesMaterial: MeshBasicMaterial;
+    protected highlighter: HighlighterComponent;
     constructor(viewer: Viewer);
     dispose(): void;
     onPointerDown: (event: PointerEvent) => void;
@@ -15,5 +16,5 @@ export declare class SelectionComponent implements IComponent {
     getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>>;
     select(object: any): void;
     clearSelection(): void;
-    optionsChange: () => void;
+    initHighlighter: () => void;
 }

package/lib/Viewer/loaders/{GLTFModelLoader.d.ts → GLTFCloudModelLoader.d.ts}

@@ -1,6 +1,6 @@
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
-export declare class GLTFModelLoader extends Loader {
+export declare class GLTFCloudModelLoader extends Loader {
     viewer: Viewer;
     constructor(viewer: Viewer);
     isSupport(model: any): boolean;

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

@@ -5,5 +5,5 @@ export declare class GLTFFileLoader extends Loader {
     viewer: Viewer;
     constructor(viewer: Viewer);
     isSupport(file: any, format?: string): boolean;
-    load(buffer: any, format?: string, params?: GLTFLoadParams): Promise<this>;
+    load(file: any, format?: string, params?: GLTFLoadParams): Promise<this>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.6.1",
+  "version": "26.6.3",
   "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",
@@ -31,10 +31,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.6.1",
-    "@inweb/eventemitter2": "~26.6.1",
-    "@inweb/markup": "~26.6.1",
-    "@inweb/viewer-core": "~26.6.1"
+    "@inweb/client": "~26.6.3",
+    "@inweb/eventemitter2": "~26.6.3",
+    "@inweb/markup": "~26.6.3",
+    "@inweb/viewer-core": "~26.6.3"
   },
   "devDependencies": {
     "@types/three": "^0.173.0",

package/plugins/loaders/{IFCXModelLoader.ts → IFCXCloudFileLoader.ts}

@@ -24,7 +24,7 @@
 import { Loader, Viewer } from "@inweb/viewer-three";
 import { parse, clear } from "./IFCX/render.js";
 
-export class IFCXModelLoader extends Loader {
+export class IFCXCloudFileLoader extends Loader {
   public viewer: Viewer;
 
   constructor(viewer: Viewer) {
@@ -41,12 +41,12 @@ export class IFCXModelLoader extends Loader {
     );
   }
 
-  override async load(model: any): Promise<this> {
+  override async load(file: any): Promise<this> {
     const progress = (progress: number) => {
-      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model });
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
     };
 
-    const arrayBuffer = await model.download(progress, this.abortController.signal);
+    const arrayBuffer = await file.download(progress, this.abortController.signal);
     if (!this.viewer.scene) return this;
 
     const textDecoder = new TextDecoder();
@@ -56,7 +56,7 @@ export class IFCXModelLoader extends Loader {
     clear();
 
     let handle = 0;
-    scene.traverse((object) => {
+    scene.traverse((object: any) => {
       object.userData = { handle, ...object.userData };
       handle++;
     });
@@ -68,7 +68,7 @@ export class IFCXModelLoader extends Loader {
     this.viewer.syncOverlay();
     this.viewer.update();
 
-    this.viewer.emitEvent({ type: "databasechunk", data: scene, file: model });
+    this.viewer.emitEvent({ type: "databasechunk", data: scene, file });
 
     return this;
   }

package/plugins/loaders/IFCXLoader.ts

@@ -23,8 +23,8 @@
 
 import { loaders } from "@inweb/viewer-three";
 
-import { IFCXModelLoader } from "./IFCXModelLoader";
 import { IFCXFileLoader } from "./IFCXFileLoader";
+import { IFCXCloudFileLoader } from "./IFCXCloudFileLoader";
 
-loaders.registerLoader("ifcx", (viewer: any) => new IFCXModelLoader(viewer));
 loaders.registerLoader("ifcx-file", (viewer: any) => new IFCXFileLoader(viewer));
+loaders.registerLoader("ifcx-cloud-file", (viewer: any) => new IFCXCloudFileLoader(viewer));

package/src/Viewer/Viewer.ts

@@ -192,15 +192,15 @@ export class Viewer
 
   dispose(): this {
     this.cancel();
-    this.emitEvent({ type: "dispose" });
+    this.clear();
 
-    this._components.forEach((component: IComponent) => component.dispose());
-    this._components = [];
+    this.emitEvent({ type: "dispose" });
+    this.removeAllListeners();
 
     this.setActiveDragger();
-    this.removeAllListeners();
 
-    this.clear();
+    this._components.forEach((component: IComponent) => component.dispose());
+    this._components = [];
 
     this._markup.dispose();
 
@@ -211,10 +211,10 @@ export class Viewer
 
     if (this.renderer) this.renderer.dispose();
 
+    this.helpers = undefined;
+    this.scene = undefined;
     this.renderer = undefined;
     this.camera = undefined;
-    this.scene = undefined;
-    this.helpers = undefined;
 
     return this;
   }
@@ -535,6 +535,10 @@ export class Viewer
     }
   }
 
+  getComponent(name: string): IComponent {
+    return this._components.find((component) => component.name === name);
+  }
+
   is3D(): boolean {
     return true;
   }
@@ -573,10 +577,6 @@ export class Viewer
     return commands.executeCommand(id, this, ...args);
   }
 
-  getComponent(name: string): IComponent {
-    return this._components.find((component) => component.name === name);
-  }
-
   drawViewpoint(viewpoint: IViewpoint): void {
     if (!this.renderer) return;
 

package/src/Viewer/components/HighlighterComponent.ts

@@ -0,0 +1,159 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Color, EdgesGeometry, LineBasicMaterial, MeshBasicMaterial, Vector2 } from "three";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+import { Wireframe } from "three/examples/jsm/lines/Wireframe.js";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
+
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import { Viewer } from "../Viewer";
+import { HighlighterUtils } from "./HighlighterUtils";
+
+export class HighlighterComponent implements IComponent {
+  protected viewer: Viewer;
+  public highlightMaterial: MeshBasicMaterial;
+  public outlineMaterial: LineMaterial;
+  public highlightLineMaterial: LineBasicMaterial;
+  public highlightLineGlowMaterial: LineMaterial;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("resize", this.viewerResize);
+
+    this.geometryEnd();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("resize", this.viewerResize);
+  }
+
+  highlight(object: any) {
+    if (object.isHighlighted) return;
+
+    if (object.isLine || object.isLineSegments) {
+      const positions = object.geometry.attributes.position.array;
+      const indices = object.geometry.index ? object.geometry.index.array : null;
+      const lineGeometry = indices
+        ? HighlighterUtils.fromIndexedLine(positions, indices)
+        : HighlighterUtils.fromNonIndexedLine(positions, object.isLineSegments);
+
+      const wireframe = new Wireframe(lineGeometry, this.highlightLineGlowMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightLineMaterial;
+      object.isHighlighted = true;
+    } else if (object.isMesh) {
+      const edgesGeometry = new EdgesGeometry(object.geometry, 30);
+      const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edgesGeometry);
+
+      const wireframe = new Wireframe(lineGeometry, this.outlineMaterial);
+      wireframe.position.copy(object.position);
+      wireframe.rotation.copy(object.rotation);
+      wireframe.scale.copy(object.scale);
+
+      object.parent.add(wireframe);
+
+      object.userData.highlightwireframe = wireframe;
+      object.userData.originalMaterial = object.material;
+      object.material = this.highlightMaterial;
+      object.isHighlighted = true;
+    }
+  }
+
+  unhighlight(object: any) {
+    if (!object.isHighlighted) return;
+
+    object.isHighlighted = false;
+    object.material = object.userData.originalMaterial;
+    object.userData.highlightwireframe.removeFromParent();
+
+    delete object.userData.originalMaterial;
+    delete object.userData.highlightwireframe;
+  }
+
+  geometryEnd = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial = new MeshBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      transparent: true,
+      opacity: (255 - facesTransparancy) / 255,
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.outlineMaterial = new LineMaterial({
+      color: new Color(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255),
+      linewidth: 1.5,
+      depthTest: false,
+      depthWrite: false,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+
+    this.highlightLineMaterial = new LineBasicMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.highlightLineGlowMaterial = new LineMaterial({
+      color: new Color(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255),
+      linewidth: 5,
+      transparent: true,
+      opacity: 0.8,
+      depthTest: true,
+      depthWrite: true,
+      resolution: new Vector2(window.innerWidth, window.innerHeight),
+    });
+  };
+
+  optionsChange = () => {
+    const { facesColor, facesTransparancy, edgesColor } = this.viewer.options;
+
+    this.highlightMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.outlineMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
+    this.highlightLineMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.highlightLineGlowMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+
+    this.viewer.update();
+  };
+
+  viewerResize(event: ResizeEvent) {
+    if (!this.outlineMaterial) return;
+
+    this.outlineMaterial.resolution.set(event.width, event.height);
+  }
+}

package/src/Viewer/components/HighlighterUtils.ts

@@ -0,0 +1,116 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry.js";
+
+export class HighlighterUtils {
+  static isBreak(positions: Float32Array, i: number) {
+    return (
+      isNaN(positions[i]) ||
+      isNaN(positions[i + 1]) ||
+      isNaN(positions[i + 2]) ||
+      positions[i] === Infinity ||
+      positions[i] === -Infinity ||
+      positions[i + 1] === Infinity ||
+      positions[i + 1] === -Infinity ||
+      positions[i + 2] === Infinity ||
+      positions[i + 2] === -Infinity
+    );
+  }
+
+  static fromIndexedLine(positions: Float32Array, indices: number[]) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    for (let i = 0; i < indices.length; i += 2) {
+      const idx1 = indices[i] * 3;
+      const idx2 = indices[i + 1] * 3;
+
+      if (indices[i] === -1 || indices[i + 1] === -1) {
+        continue;
+      }
+
+      segments.push(
+        positions[idx1],
+        positions[idx1 + 1],
+        positions[idx1 + 2],
+        positions[idx2],
+        positions[idx2 + 1],
+        positions[idx2 + 2]
+      );
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+
+  static fromNonIndexedLine(positions: Float32Array, isLineSegments: boolean) {
+    const lineGeometry = new LineSegmentsGeometry();
+    const segments = [];
+
+    if (isLineSegments) {
+      for (let i = 0; i < positions.length; i += 6) {
+        if (i + 5 >= positions.length) break;
+
+        if (HighlighterUtils.isBreak(positions, i) || HighlighterUtils.isBreak(positions, i + 3)) continue;
+
+        segments.push(
+          positions[i],
+          positions[i + 1],
+          positions[i + 2],
+          positions[i + 3],
+          positions[i + 4],
+          positions[i + 5]
+        );
+      }
+    } else {
+      let lastValidIndex = -1;
+
+      for (let i = 0; i < positions.length; i += 3) {
+        if (HighlighterUtils.isBreak(positions, i)) {
+          lastValidIndex = -1;
+          continue;
+        }
+
+        if (lastValidIndex !== -1) {
+          segments.push(
+            positions[lastValidIndex],
+            positions[lastValidIndex + 1],
+            positions[lastValidIndex + 2],
+            positions[i],
+            positions[i + 1],
+            positions[i + 2]
+          );
+        }
+        lastValidIndex = i;
+      }
+    }
+
+    if (segments.length === 0) return null;
+
+    lineGeometry.setPositions(segments);
+    return lineGeometry;
+  }
+}

package/src/Viewer/components/SelectionComponent.ts

@@ -21,41 +21,34 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Intersection, MeshBasicMaterial, Object3D, Raycaster, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
+import { Viewer } from "../Viewer";
+import { HighlighterComponent } from "./HighlighterComponent";
 
 export class SelectionComponent implements IComponent {
   protected viewer: Viewer;
   protected raycaster: Raycaster;
   protected downPosition: Vector2;
-  protected facesMaterial: MeshBasicMaterial;
+  protected highlighter: HighlighterComponent;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.raycaster = new Raycaster();
     this.downPosition = new Vector2();
 
-    const { facesColor, facesTransparancy } = this.viewer.options;
-    this.facesMaterial = new MeshBasicMaterial();
-    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-    this.facesMaterial.transparent = true;
-
     this.viewer.addEventListener("pointerdown", this.onPointerDown);
     this.viewer.addEventListener("pointerup", this.onPointerUp);
     this.viewer.addEventListener("dblclick", this.onDoubleClick);
-    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("initialize", this.initHighlighter);
   }
 
   dispose() {
-    this.facesMaterial.dispose();
-
     this.viewer.removeEventListener("pointerdown", this.onPointerDown);
     this.viewer.removeEventListener("pointerup", this.onPointerUp);
     this.viewer.removeEventListener("dblclick", this.onDoubleClick);
-    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("initialize", this.initHighlighter);
   }
 
   onPointerDown = (event: PointerEvent) => {
@@ -116,8 +109,7 @@ export class SelectionComponent implements IComponent {
     if (object.isSelected) return;
 
     object.isSelected = true;
-    object.originalMaterial = object.material;
-    object.material = this.facesMaterial;
+    this.highlighter.highlight(object);
 
     this.viewer.selected.push(object);
   }
@@ -125,16 +117,12 @@ export class SelectionComponent implements IComponent {
   clearSelection() {
     this.viewer.selected.forEach((object: any) => {
       object.isSelected = false;
-      object.material = object.originalMaterial;
+      this.highlighter.unhighlight(object);
     });
     this.viewer.selected.length = 0;
   }
 
-  optionsChange = () => {
-    const { facesColor, facesTransparancy } = this.viewer.options;
-    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-
-    this.viewer.update();
+  initHighlighter = () => {
+    this.highlighter = this.viewer.getComponent("HighlighterComponent") as any;
   };
 }

package/src/Viewer/components/index.ts

@@ -29,6 +29,7 @@ import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
+import { HighlighterComponent } from "./HighlighterComponent";
 import { SelectionComponent } from "./SelectionComponent";
 import { WCSHelperComponent } from "./WCSHelperComponent";
 
@@ -80,6 +81,6 @@ components.registerComponent("BackgroundComponent", (viewer) => new BackgroundCo
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
+components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));
 components.registerComponent("SelectionComponent", (viewer) => new SelectionComponent(viewer));
-
 components.registerComponent("WCSHelperComponent", (viewer) => new WCSHelperComponent(viewer));

package/src/Viewer/loaders/{GLTFModelLoader.ts → GLTFCloudModelLoader.ts}

@@ -27,7 +27,7 @@ import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
 import { GLTFLoadingManager } from "./GLTFLoadingManager";
 
-export class GLTFModelLoader extends Loader {
+export class GLTFCloudModelLoader extends Loader {
   public viewer: Viewer;
 
   constructor(viewer: Viewer) {

package/src/Viewer/loaders/GLTFFileLoader.ts

@@ -42,8 +42,8 @@ export class GLTFFileLoader extends Loader {
     );
   }
 
-  override async load(buffer: any, format?: string, params?: GLTFLoadParams): Promise<this> {
-    const manager = new GLTFLoadingManager(buffer, params);
+  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+    const manager = new GLTFLoadingManager(file, params);
 
     const loader = new GLTFLoader(manager);
     loader.setPath(manager.path);
@@ -53,7 +53,7 @@ export class GLTFFileLoader extends Loader {
     const progress = (event: ProgressEvent) => {
       const { lengthComputable, loaded, total } = event;
       const progress = lengthComputable ? loaded / total : 1;
-      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: buffer });
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
     };
 
     const gltf = await loader.loadAsync(manager.fileURL, progress);
@@ -66,7 +66,7 @@ export class GLTFFileLoader extends Loader {
     this.viewer.syncOverlay();
     this.viewer.update();
 
-    this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file: buffer });
+    this.viewer.emitEvent({ type: "databasechunk", data: gltf.scene, file });
 
     return this;
   }

package/src/Viewer/loaders/index.ts

@@ -23,8 +23,8 @@
 
 import { ILoadersRegistry, loadersRegistry } from "@inweb/viewer-core";
 
-import { GLTFModelLoader } from "./GLTFModelLoader";
 import { GLTFFileLoader } from "./GLTFFileLoader";
+import { GLTFCloudModelLoader } from "./GLTFCloudModelLoader";
 
 /**
  * Viewer loaders registry. Use this registry to register custom loaders.
@@ -95,5 +95,5 @@ export const loaders: ILoadersRegistry = loadersRegistry("threejs");
 
 // build-in loaders
 
-loaders.registerLoader("gltf", (viewer: any) => new GLTFModelLoader(viewer));
 loaders.registerLoader("gltf-file", (viewer: any) => new GLTFFileLoader(viewer));
+loaders.registerLoader("gltf-cloud-model", (viewer: any) => new GLTFCloudModelLoader(viewer));