@inweb/viewer-three 26.4.1 → 26.5.1

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, Sphere } from "three";
+import { AmbientLight, DirectionalLight, Sphere, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -41,7 +41,7 @@ export class LightComponent implements IComponent {
     this.directionalLight.position.set(0.5, 0, 0.866); // ~60º
     this.viewer.scene.add(this.directionalLight);
 
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("databasechunk", this.geometryEnd);
     this.viewer.addEventListener("clear", this.geometryEnd);
   }
 
@@ -52,7 +52,7 @@ export class LightComponent implements IComponent {
     this.directionalLight.removeFromParent();
     this.directionalLight.dispose();
 
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("databasechunk", this.geometryEnd);
     this.viewer.removeEventListener("clear", this.geometryEnd);
   }
 
@@ -62,8 +62,10 @@ export class LightComponent implements IComponent {
 
     if (this.viewer.extents.isEmpty()) return;
 
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
-    this.directionalLight.position.set(0.5, 0, 0.866).multiplyScalar(extentsSize * 2);
+    this.directionalLight.position.set(0.5, 0, 0.866).multiplyScalar(extentsSize).add(extentsCenter);
+    this.directionalLight.target.position.copy(extentsCenter);
 
     this.viewer.scene.add(this.ambientLight);
     this.viewer.scene.add(this.directionalLight);

package/src/Viewer/components/RoomEnvironmentComponent.ts

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { PMREMGenerator } from "three";
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class RoomEnvironmentComponent implements IComponent {
+  protected viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+
+    const environment = new RoomEnvironment();
+    const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
+
+    this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+
+    environment.dispose();
+  }
+
+  dispose() {
+    this.viewer.scene.environment = undefined;
+  }
+}

package/src/Viewer/components/index.ts

@@ -23,13 +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";
@@ -80,12 +78,10 @@ export const components: IComponentsRegistry = componentsRegistry("threejs");
 components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponent(viewer));
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
-// components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("RoomEnvironmentComponent", (viewer) => new RoomEnvironmentComponent(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;
+  }
+}

package/src/Viewer/loaders/GLTFLoadingManager.ts

@@ -23,30 +23,38 @@
 
 import { LoadingManager, LoaderUtils } from "three";
 
+export type GLTFFileSource = string | globalThis.File | ArrayBuffer | Blob;
+
+export type GLTFLoadParams = {
+  path?: string;
+  externalFiles?: Map<string, GLTFFileSource>;
+  requestHeader?: HeadersInit;
+  crossOrigin?: string;
+  withCredentials?: boolean;
+};
+
 export class GLTFLoadingManager extends LoadingManager {
   public path = "";
   public resourcePath = "";
   public fileURL = "";
   public dataURLs = new Map();
 
-  constructor(
-    file: string | globalThis.File | ArrayBuffer | Blob,
-    externalData: Map<string, string | File | ArrayBuffer | Blob> = new Map(),
-    params: { path?: string } = {}
-  ) {
+  constructor(file: GLTFFileSource, params: GLTFLoadParams = {}) {
     super();
 
     this.path = params.path || "";
 
+    const externalFiles = params.externalFiles || new Map();
+
     if (typeof file === "string") {
       this.fileURL = file;
       this.resourcePath = LoaderUtils.extractUrlBase(file);
     } else {
-      externalData.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
-      externalData.set(this.fileURL, file);
+      externalFiles.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
+      externalFiles.set(this.fileURL, file);
     }
 
-    externalData.forEach((value, key) => {
+    externalFiles.forEach((value, key) => {
       let dataURL: string;
       if (typeof value === "string") dataURL = value;
       else dataURL = URL.createObjectURL(new Blob([value]));

package/src/Viewer/loaders/GLTFModelLoader.ts

@@ -0,0 +1,74 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 } from "./GLTFLoadingManager";
+
+export class GLTFModelLoader extends Loader {
+  public viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+  }
+
+  override isSupport(model: any): boolean {
+    return (
+      typeof model === "object" &&
+      typeof model.database === "string" &&
+      typeof model.downloadResource === "function" &&
+      /.gltf$/i.test(model.database)
+    );
+  }
+
+  override async load(model: any): Promise<this> {
+    const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+    const manager = new GLTFLoadingManager(url);
+
+    const loader = new GLTFLoader(manager);
+    loader.setRequestHeader(model.httpClient.headers);
+
+    const progress = (event: ProgressEvent) => {
+      const { lengthComputable, loaded, total } = event;
+      const progress = lengthComputable ? loaded / total : 1;
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
+    };
+
+    const gltf = await loader.loadAsync(url, 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: model.file, model });
+
+    return this;
+  }
+}

package/src/Viewer/loaders/index.ts

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { ILoadersRegistry, loadersRegistry } from "@inweb/viewer-core";
+
+import { GLTFModelLoader } from "./GLTFModelLoader";
+import { GLTFFileLoader } from "./GLTFFileLoader";
+
+/**
+ * Viewer loaders registry. Use this registry to register custom loaders.
+ *
+ * To implement custom loader:
+ *
+ * 1. Define a loader class implements {@link ILoader}.
+ * 2. Define a constructor with a `viewer` parameter.
+ * 3. Override {@link ILoader.isSupport} and сheck if the loader can load the specified file.
+ * 4. Override {@link ILoader.load} and define the logic for loading the model from the file.
+ *
+ *    The loader should do:
+ *
+ *    - Load model from file. The model must be a Three.js object of type `Object3D` or a descendant of it.
+ *    - Add model to the viewer `scene` and `models` list.
+ *    - Synchronize viewer options and overlay.
+ *    - Update the viewer.
+ *
+ *    The loader must emit events:
+ *
+ *    - `geometryprogress` - during loading. If progress is not supported, emit it once with a value of 100%
+ *         after the load is complete.
+ *    - `databasechunk` - when model is loaded and ready to render.
+ * 5. Override {@link ILoader.dispose} and release loader resources, if required.
+ * 6. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
+ *
+ * @example Implementing a custom loader.
+ *
+ * ```javascript
+ * import { Loader } from "@inweb/viewer-core";
+ * import { loaders, Viewer } from "@inweb/viewer-three";
+ *
+ * class MyLoader extends Loader {
+ *   public viewer: Viewer;
+ *
+ *   constructor(viewer: Viewer) {
+ *     super();
+ *     this.viewer = viewer;
+ *   }
+ *
+ *   override isSupport(file, format): Boolean {
+ *     // place custom logic here
+ *     return ...;
+ *   }
+ *
+ *   override load(file, format, params): Promise<this> {
+ *
+ *     // place custom loading logic here
+ *     const model = ...;
+ *
+ *     this.viewer.scene.add(model);
+ *     this.viewer.models.push(model);
+ *
+ *     this.viewer.syncOptions();
+ *     this.viewer.syncOverlay();
+ *     this.viewer.update();
+ *
+ *     this.viewer.emitEvent({ type: "databasechunk", data: model, file });
+ *
+ *     return Promise.resove(this);
+ *   };
+ * }
+ *
+ * loaders.registerLoader("MyLoader", (viewer) => new MyLoader(viewer));
+ * ```
+ */
+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));

package/src/index-umd.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.
+///////////////////////////////////////////////////////////////////////////////
+
+export * from "./index";
+
+// add the global exports (was removed in 0.160.0) to expose the plugins to Three.js code
+
+import * as THREE from "three";
+
+if (typeof window !== "undefined") window["THREE"] = THREE;

package/src/index.ts

@@ -21,10 +21,14 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+export * from "./Viewer/draggers";
+export * from "./Viewer/commands";
+export * from "./Viewer/components";
+export * from "./Viewer/loaders";
+export * from "./Viewer/loaders/GLTFLoadingManager";
+export * from "./Viewer/Viewer";
+
+// the lines below are required for typedoc to include the viewer core and markups documentation
+
 export * from "@inweb/viewer-core";
 export * from "@inweb/markup";
-
-export { draggers } from "./Viewer/draggers";
-export { commands } from "./Viewer/commands";
-export { components } from "./Viewer/components";
-export { Viewer } from "./Viewer/Viewer";

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

@@ -1,10 +0,0 @@
-import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
-export declare class AxesHelperComponent implements IComponent {
-    private viewer;
-    private axesHelper1;
-    private axesHelper2;
-    constructor(viewer: Viewer);
-    dispose(): void;
-    geometryEnd: () => void;
-}

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

@@ -1,9 +0,0 @@
-import { IComponent } from "@inweb/viewer-core";
-import type { Viewer } from "../Viewer";
-export declare class LightHelperComponent implements IComponent {
-    private viewer;
-    private lightHelpers;
-    constructor(viewer: Viewer);
-    dispose(): void;
-    geometryEnd: () => void;
-}