@inweb/viewer-three 26.10.6 → 26.12.0

package/{plugins → extensions}/components/AxesHelperComponent.ts

@@ -21,17 +21,21 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AxesHelper, Vector3 } from "three";
+import { AxesHelper, Box3, Vector3 } from "three";
 import { IComponent, components, Viewer } from "@inweb/viewer-three";
 
 class AxesHelperComponent implements IComponent {
   private viewer: Viewer;
   private axesHelper1: AxesHelper;
   private axesHelper2: AxesHelper;
+  private modelHelpers: AxesHelper[];
 
   constructor(viewer: Viewer) {
     this.axesHelper1 = new AxesHelper(1);
     this.axesHelper2 = new AxesHelper(1);
+    this.modelHelpers = [];
+
+    this.axesHelper1.setColors("#ccc", "#ccc", "#ccc");
 
     this.viewer = viewer;
     this.viewer.addEventListener("initialize", this.syncHelper);
@@ -40,6 +44,11 @@ class AxesHelperComponent implements IComponent {
   }
 
   dispose() {
+    this.modelHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+
     this.axesHelper1.removeFromParent();
     this.axesHelper1.dispose();
 
@@ -52,6 +61,12 @@ class AxesHelperComponent implements IComponent {
   }
 
   syncHelper = () => {
+    this.modelHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.modelHelpers.length = 0;
+
     this.axesHelper1.removeFromParent();
     this.axesHelper2.removeFromParent();
 
@@ -59,13 +74,27 @@ class AxesHelperComponent implements IComponent {
     const center = this.viewer.extents.getCenter(new Vector3());
 
     this.axesHelper1.position.set(0, 0, 0);
-    this.axesHelper1.scale.setScalar(size);
+    this.axesHelper1.scale.setScalar(size * 1.25);
 
     this.axesHelper2.position.copy(center);
     this.axesHelper2.scale.setScalar(size);
 
     this.viewer.helpers.add(this.axesHelper1);
     this.viewer.helpers.add(this.axesHelper2);
+
+    if (this.viewer.models.length < 2) return;
+
+    this.viewer.models.forEach((model) => {
+      const extents = model.getExtents(new Box3());
+      const size = extents.getSize(new Vector3()).length();
+      const center = extents.getCenter(new Vector3());
+
+      const helper = new AxesHelper(size);
+      helper.position.copy(center);
+
+      this.modelHelpers.push(helper);
+      this.viewer.helpers.add(helper);
+    });
   };
 }
 

package/{plugins → extensions}/components/ExtentsHelperComponent.ts

@@ -27,9 +27,12 @@ import { IComponent, components, Viewer } from "@inweb/viewer-three";
 class ExtentsHelperComponent implements IComponent {
   private viewer: Viewer;
   private boxHelper: Box3Helper;
+  private modelHelpers: Box3Helper[];
 
   constructor(viewer: Viewer) {
     this.boxHelper = new Box3Helper(new Box3(), "#ff0000");
+    this.modelHelpers = [];
+
     this.viewer = viewer;
     this.viewer.on("geometryend", this.syncHelper);
     this.viewer.on("clear", this.syncHelper);
@@ -41,6 +44,11 @@ class ExtentsHelperComponent implements IComponent {
   }
 
   dispose() {
+    this.modelHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+
     this.boxHelper.removeFromParent();
     this.boxHelper.dispose();
 
@@ -54,12 +62,29 @@ class ExtentsHelperComponent implements IComponent {
   }
 
   syncHelper = () => {
+    this.modelHelpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.modelHelpers.length = 0;
+
     this.boxHelper.removeFromParent();
 
     if (this.viewer.extents.isEmpty()) return;
 
     this.boxHelper.box = this.viewer.extents.clone();
     this.viewer.helpers.add(this.boxHelper);
+
+    if (this.viewer.models.length < 2) return;
+
+    this.viewer.models.forEach((model) => {
+      const extents = model.getExtents(new Box3());
+
+      const helper = new Box3Helper(extents, "#ff0000");
+
+      this.modelHelpers.push(helper);
+      this.viewer.helpers.add(helper);
+    });
   };
 }
 

package/extensions/components/InfoPanelComponent.ts

@@ -0,0 +1,197 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IComponent, components, Viewer } from "@inweb/viewer-three";
+
+const map = {
+  B: 1,
+  KB: 1 << 10,
+  MB: 1 << 20,
+  GB: 1 << 30,
+};
+
+function formatBytes(bytes: number): string {
+  if (!bytes) return "-";
+
+  let unit: string;
+  if (bytes >= map.GB) unit = "GB";
+  else if (bytes >= map.MB) unit = "MB";
+  else if (bytes >= map.KB) unit = "KB";
+  else unit = "B";
+
+  const value = bytes / map[unit];
+  return value.toFixed() + " " + unit;
+}
+
+class Panel {
+  public dom: HTMLElement;
+  private label: HTMLElement;
+  private text: HTMLElement;
+
+  constructor(label: string) {
+    this.dom = document.createElement("div");
+
+    this.label = document.createElement("div");
+    this.label.style.padding = "0.25rem 0";
+    this.label.style.fontWeight = "600";
+    this.label.innerText = label;
+    this.dom.appendChild(this.label);
+
+    this.text = document.createElement("small");
+    this.text.style.display = "block";
+    this.text.style.padding = "0 0.5rem";
+    this.dom.appendChild(this.text);
+  }
+
+  update(text: string) {
+    if (this.text.innerText !== text) this.text.innerText = text;
+  }
+}
+
+class InfoPanelComponent implements IComponent {
+  private viewer: Viewer;
+  private container: HTMLElement;
+  private performancePanel: Panel;
+  private renderPanel: Panel;
+  private optimizedPanel: Panel;
+  private scenePanel: Panel;
+  private memoryPanel: Panel;
+
+  constructor(viewer: Viewer) {
+    this.container = document.createElement("div");
+    this.container.id = "info-container";
+    this.container.style.position = "absolute";
+    this.container.style.left = "0px";
+    this.container.style.top = "0px";
+    this.container.style.maxHeight = "100%";
+    this.container.style.overflow = "auto";
+    this.container.style.padding = "1rem";
+
+    this.setTheme("dark");
+
+    this.performancePanel = new Panel("Performance");
+    this.renderPanel = new Panel("Render");
+    this.optimizedPanel = new Panel("Optimized Scene");
+    this.scenePanel = new Panel("Scene");
+    this.memoryPanel = new Panel("Memory");
+
+    this.container.appendChild(this.performancePanel.dom);
+    this.container.appendChild(this.renderPanel.dom);
+    this.container.appendChild(this.optimizedPanel.dom);
+    this.container.appendChild(this.scenePanel.dom);
+    this.container.appendChild(this.memoryPanel.dom);
+
+    viewer.canvas.parentElement.appendChild(this.container);
+
+    this.viewer = viewer;
+    this.viewer.addEventListener("clear", this.updateSceneInfo);
+    this.viewer.addEventListener("geometryend", this.updateSceneInfo);
+    this.viewer.addEventListener("render", this.updateRenderInfo);
+    this.viewer.addEventListener("animate", this.updatePreformanceInfo);
+
+    this.updatePreformanceInfo();
+    this.updateRenderInfo();
+    this.updateSceneInfo();
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("clear", this.updateSceneInfo);
+    this.viewer.removeEventListener("geometryend", this.updateSceneInfo);
+    this.viewer.removeEventListener("render", this.updateRenderInfo);
+    this.viewer.removeEventListener("animate", this.updatePreformanceInfo);
+
+    this.performancePanel = undefined;
+    this.renderPanel = undefined;
+    this.optimizedPanel = undefined;
+    this.scenePanel = undefined;
+    this.memoryPanel = undefined;
+
+    this.container.remove();
+    this.container = undefined;
+  }
+
+  setTheme(value: string) {
+    if (value === "light") {
+      this.container.style.background = "rgba(0, 0, 0, 0.025)";
+      this.container.style.color = "#3d3d3d";
+    }
+    if (value === "dark") {
+      this.container.style.background = "rgba(0, 0, 0, 0.88)";
+      this.container.style.color = "#ebebeb";
+    }
+  }
+
+  updatePreformanceInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`FPS: ${info.performance.fps}`);
+    text.push(`Frame Time: ${info.performance.frameTime} ms`);
+    this.performancePanel.update(text.join("\n"));
+
+    this.viewer.update();
+  };
+
+  updateRenderInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`Viewport: ${info.render.viewport.width} x ${info.render.viewport.height}`);
+    text.push(`Antialiasing: ${info.render.antialiasing}`);
+    text.push(`Draw Calls: ${info.render.drawCalls}`);
+    text.push(`Triangles: ${info.render.triangles}`);
+    text.push(`Points: ${info.render.points}`);
+    text.push(`Lines: ${info.render.lines}`);
+    this.renderPanel.update(text.join("\n"));
+  };
+
+  updateSceneInfo = () => {
+    const info = this.viewer.info;
+
+    const text = [];
+    text.push(`Objects: ${info.optimizedScene.objects}`);
+    text.push(`Triangles: ${info.optimizedScene.triangles}`);
+    text.push(`Points: ${info.optimizedScene.points}`);
+    text.push(`Lines: ${info.optimizedScene.lines}`);
+    text.push(`Edges: ${info.optimizedScene.edges}`);
+    this.optimizedPanel.update(text.join("\n"));
+
+    text.length = 0;
+    text.push(`Objects: ${info.scene.objects}`);
+    text.push(`Triangles: ${info.scene.triangles}`);
+    text.push(`Points: ${info.scene.points}`);
+    text.push(`Lines: ${info.scene.lines}`);
+    text.push(`Edges: ${info.scene.edges}`);
+    this.scenePanel.update(text.join("\n"));
+
+    text.length = 0;
+    text.push(`Geometries: ${info.memory.geometries}`);
+    text.push(`Textures: ${info.memory.textures}`);
+    text.push(`Materials: ${info.memory.materials}`);
+    text.push(`GPU Used: ${formatBytes(info.memory.totalEstimatedGpuBytes)}`);
+    text.push(`JS Heap Used: ${formatBytes(info.memory.usedJSHeapSize)}`);
+    this.memoryPanel.update(text.join("\n"));
+  };
+}
+
+components.registerComponent("InfoPanelComponent", (viewer) => new InfoPanelComponent(viewer));

package/{plugins → extensions}/components/StatsPanelComponent.ts

@@ -31,23 +31,30 @@ class StatsPanelComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.stats = new Stats();
     this.stats.dom.style.position = "absolute";
+    this.stats.dom.style.left = "0px";
+    this.stats.dom.style.top = "0px";
     viewer.canvas.parentElement.appendChild(this.stats.dom);
 
     this.viewer = viewer;
-    this.viewer.on("animate", this.updateStats);
+    this.viewer.addEventListener("render", this.updateStats);
+    this.viewer.addEventListener("animate", this.updateViewer);
   }
 
   dispose() {
-    this.viewer.off("animate", this.updateStats);
+    this.viewer.removeEventListener("render", this.updateStats);
+    this.viewer.removeEventListener("animate", this.updateViewer);
 
     this.stats.dom.remove();
     this.stats = undefined;
   }
 
   updateStats = () => {
-    this.viewer.render(null, true);
     this.stats.update();
   };
+
+  updateViewer = () => {
+    this.viewer.update();
+  };
 }
 
 components.registerComponent("StatsPanelComponent", (viewer) => new StatsPanelComponent(viewer));

package/{plugins → extensions}/loaders/GLTFCloudLoader.ts

@@ -58,10 +58,9 @@ class GLTFCloudLoader extends Loader {
     if (!this.viewer.scene) return this;
 
     const modelImpl = new ModelImpl(gltf.scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = model.file.id;
 
-    this.viewer.scene.add(modelImpl.scene);
+    this.viewer.scene.add(gltf.scene);
     this.viewer.models.push(modelImpl);
 
     this.viewer.syncOptions();

package/{src/Viewer → extensions}/loaders/GLTFFileLoader.ts

@@ -22,20 +22,21 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { Loader } from "@inweb/viewer-core";
-
-import { Viewer } from "../Viewer";
-import { GLTFLoadingManager, GLTFLoadParams } from "./GLTFLoadingManager";
-import { ModelImpl } from "../models/ModelImpl";
+import { GLTFLoadingManager, GLTFLoadParams, Loader, loaders, ModelImpl, Viewer } from "@inweb/viewer-three";
 
 export class GLTFFileLoader extends Loader {
   public viewer: Viewer;
+  private manager: GLTFLoadingManager;
 
   constructor(viewer: Viewer) {
     super();
     this.viewer = viewer;
   }
 
+  override dispose() {
+    if (this.manager) this.manager.dispose();
+  }
+
   override isSupport(file: any, format?: string): boolean {
     return (
       (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) &&
@@ -43,12 +44,13 @@ export class GLTFFileLoader extends Loader {
     );
   }
 
-  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
-    const manager = new GLTFLoadingManager(file, params);
+  override async load(file: any, format?: string, params: GLTFLoadParams = {}): Promise<this> {
+    this.manager = new GLTFLoadingManager(file, params);
 
-    const loader = new GLTFLoader(manager);
-    loader.setPath(manager.path);
+    const loader = new GLTFLoader(this.manager);
+    loader.setPath(this.manager.path);
     loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+    loader.setRequestHeader((params.requestHeader as any) || {});
     loader.setWithCredentials(params.withCredentials || loader.withCredentials);
 
     const progress = (event: ProgressEvent) => {
@@ -57,12 +59,17 @@ export class GLTFFileLoader extends Loader {
       this.viewer.emitEvent({ type: "geometryprogress", data: progress, file });
     };
 
-    const gltf = await loader.loadAsync(manager.fileURL, progress);
+    const gltf = await loader.loadAsync(this.manager.fileURL, progress);
     if (!this.viewer.scene) return this;
 
+    let handle = 0;
+    gltf.scene.traverse((object) => {
+      object.userData = { handle: handle + "", ...object.userData };
+      handle++;
+    });
+
     const modelImpl = new ModelImpl(gltf.scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = params.modelId || this.extractFileName(file);
 
     this.viewer.scene.add(gltf.scene);
     this.viewer.models.push(modelImpl);
@@ -76,3 +83,5 @@ export class GLTFFileLoader extends Loader {
     return this;
   }
 }
+
+loaders.registerLoader("gltf-file", (viewer: any) => new GLTFFileLoader(viewer));

package/{plugins → extensions}/loaders/IFCX/IFCXCloudLoader.ts

@@ -21,6 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import { Scene } from "three";
 import { Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
 import { parse, clear } from "./render.js";
 
@@ -52,18 +53,17 @@ export class IFCXCloudLoader extends Loader {
     const textDecoder = new TextDecoder();
     const json = JSON.parse(textDecoder.decode(arrayBuffer));
 
-    const scene = await parse(json);
+    const scene: Scene = await parse(json);
     clear();
 
     let handle = 0;
-    scene.traverse((object: any) => {
-      object.userData = { handle, ...object.userData };
+    scene.traverse((object) => {
+      object.userData = { handle: handle + "", ...object.userData };
       handle++;
     });
 
     const modelImpl = new ModelImpl(scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = file.id;
 
     this.viewer.scene.add(scene);
     this.viewer.models.push(modelImpl);

package/{plugins → extensions}/loaders/IFCX/IFCXFileLoader.ts

@@ -39,7 +39,7 @@ export class IFCXFileLoader extends Loader {
     );
   }
 
-  override async load(file: any, format?: string, params?: GLTFLoadParams): Promise<this> {
+  override async load(file: any, format?: string, params: GLTFLoadParams = {}): Promise<this> {
     const manager = new GLTFLoadingManager(file, params);
 
     const loader = new IFCXLoader(manager);
@@ -58,13 +58,12 @@ export class IFCXFileLoader extends Loader {
 
     let handle = 0;
     scene.traverse((object) => {
-      object.userData = { handle, ...object.userData };
+      object.userData = { handle: handle + "", ...object.userData };
       handle++;
     });
 
     const modelImpl = new ModelImpl(scene);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = params.modelId || this.extractFileName(file);
 
     this.viewer.scene.add(scene);
     this.viewer.models.push(modelImpl);

package/{plugins → extensions}/loaders/Potree/PotreeFileLoader.ts

@@ -23,11 +23,11 @@
 
 import { Euler, Vector3 } from "three";
 import { PointColorType, PointCloudOctree, PointSizeType, PointShape, Potree } from "potree-core";
-import { Loader, Viewer } from "@inweb/viewer-three";
+import { Loader, LoadParams, Viewer } from "@inweb/viewer-three";
 
 import { PotreeModelImpl } from "./PotreeModelImpl";
 
-export type PotreeLoadParams = {
+export type PotreeLoadParams = LoadParams & {
   path?: string;
   position?: Vector3;
   rotation?: Euler;
@@ -83,8 +83,7 @@ export class PotreeFileLoader extends Loader {
     this.pointClouds.push(pco);
 
     const modelImpl = new PotreeModelImpl(pco);
-    modelImpl.loader = this;
-    modelImpl.viewer = this.viewer;
+    modelImpl.id = params.modelId || this.extractFileName(file);
     modelImpl.pco = pco;
 
     this.viewer.scene.add(pco);

package/extensions/loaders/Potree/PotreeModelImpl.ts

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Box3 } from "three";
+import { PointCloudOctree } from "potree-core";
+import { IInfo, Info } from "@inweb/viewer-core";
+import { ModelImpl } from "@inweb/viewer-three";
+
+// Potree model implementation.
+
+export class PotreeModelImpl extends ModelImpl {
+  public pco: PointCloudOctree;
+
+  override getInfo(): IInfo {
+    // ===================== AI-CODE-START ======================
+    // Source: Claude Sonnet 4.5
+    // Date: 2025-10-02
+    // Reviewer: roman.mochalov@opendesign.com
+    // Issue: CLOUD-5738
+
+    let totalPoints = 0;
+    let totalNodes = 0;
+    let loadedGeometryBytes = 0;
+    let estimatedTotalGeometryBytes = 0;
+    let geometryBytes = 0;
+
+    const bytesPerPoint = this.pco.pcoGeometry?.pointAttributes?.byteSize || 0;
+
+    if (this.pco.pcoGeometry && this.pco.pcoGeometry.root) {
+      this.pco.pcoGeometry.root.traverse((node: any) => {
+        totalNodes++;
+
+        const numPoints = node.numPoints || 0;
+        totalPoints += numPoints;
+
+        if (node.loaded && node.geometry) {
+          if (node.geometry.attributes) {
+            for (const name in node.geometry.attributes) {
+              const attribute = node.geometry.attributes[name];
+              if (attribute && attribute.array) {
+                loadedGeometryBytes += attribute.array.byteLength;
+              }
+            }
+          }
+
+          if (node.geometry.index && node.geometry.index.array) {
+            loadedGeometryBytes += node.geometry.index.array.byteLength;
+          }
+        }
+
+        if (bytesPerPoint > 0 && numPoints > 0) {
+          estimatedTotalGeometryBytes += numPoints * (bytesPerPoint * 2 - 1);
+        }
+      }, true);
+    }
+
+    geometryBytes = Math.max(loadedGeometryBytes, estimatedTotalGeometryBytes);
+
+    // ===================== AI-CODE-END ======================
+
+    const info = new Info();
+
+    info.scene.objects = totalNodes;
+    info.scene.points = totalPoints;
+    info.scene.triangles = 0;
+    info.scene.lines = 0;
+    info.scene.edges = 0;
+
+    info.memory.geometries = totalNodes;
+    info.memory.geometryBytes = Math.floor(geometryBytes);
+    info.memory.textures = 0;
+    info.memory.textureBytes = 0;
+    info.memory.materials = 1;
+    info.memory.totalEstimatedGpuBytes = Math.floor(geometryBytes);
+
+    info.optimizedScene.objects = info.scene.objects;
+    info.optimizedScene.triangles = info.scene.triangles;
+    info.optimizedScene.points = info.scene.points;
+    info.optimizedScene.lines = info.scene.lines;
+    info.optimizedScene.edges = info.scene.edges;
+
+    return info;
+  }
+
+  override getExtents(target: Box3): Box3 {
+    return target.union(this.pco.pcoGeometry.boundingBox);
+  }
+}