@inweb/viewer-three 26.9.1 → 26.9.2

package/lib/Viewer/Viewer.d.ts

@@ -38,8 +38,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     target: Vector3;
     private _activeDragger;
     private _components;
-    private renderNeeded;
-    private renderTime;
+    private _renderNeeded;
+    private _renderTime;
     private _markup;
     /**
      * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
@@ -59,6 +59,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
     dispose(): this;
     isInitialized(): boolean;
+    setSize(width: number, height: number, updateStyle?: boolean): void;
     update(force?: boolean): void;
     render(time?: DOMHighResTimeStamp, force?: boolean): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.9.1",
+  "version": "26.9.2",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,13 +35,14 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.9.1",
-    "@inweb/eventemitter2": "~26.9.1",
-    "@inweb/markup": "~26.9.1",
-    "@inweb/viewer-core": "~26.9.1"
+    "@inweb/client": "~26.9.2",
+    "@inweb/eventemitter2": "~26.9.2",
+    "@inweb/markup": "~26.9.2",
+    "@inweb/viewer-core": "~26.9.2"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",
+    "potree-core": "^2.0.11",
     "three": "^0.179.1"
   },
   "peerDependencies": {

package/plugins/components/AxesHelperComponent.ts

@@ -32,7 +32,9 @@ class AxesHelperComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.axesHelper1 = new AxesHelper();
     this.axesHelper2 = new AxesHelper();
+
     this.viewer = viewer;
+    this.viewer.addEventListener("initialize", this.syncHelper);
     this.viewer.addEventListener("geometryend", this.syncHelper);
     this.viewer.addEventListener("clear", this.syncHelper);
   }
@@ -44,6 +46,7 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2.removeFromParent();
     this.axesHelper2.dispose();
 
+    this.viewer.removeEventListener("initialize", this.syncHelper);
     this.viewer.removeEventListener("geometryend", this.syncHelper);
     this.viewer.removeEventListener("clear", this.syncHelper);
   }
@@ -55,17 +58,18 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2.removeFromParent();
     this.axesHelper2.dispose();
 
-    if (this.viewer.extents.isEmpty()) return;
-
     const size = this.viewer.extents.getSize(new Vector3()).length();
     const center = this.viewer.extents.getCenter(new Vector3());
 
-    this.axesHelper1 = new AxesHelper(size);
-    this.axesHelper1.position.copy(center);
+    this.axesHelper1 = new AxesHelper(size || 1);
+    this.axesHelper2 = new AxesHelper(size);
+
+    this.axesHelper1.position.set(0, 0, 0);
     this.viewer.helpers.add(this.axesHelper1);
 
-    this.axesHelper2 = new AxesHelper(size);
-    this.axesHelper2.position.set(0, 0, 0);
+    if (this.viewer.extents.isEmpty()) return;
+
+    this.axesHelper2.position.copy(center);
     this.viewer.helpers.add(this.axesHelper2);
   };
 }

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

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
-import { parse, clear } from "./IFCX/render.js";
+import { parse, clear } from "./render.js";
 
 export class IFCXCloudLoader extends Loader {
   public viewer: Viewer;

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

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { GLTFLoadingManager, GLTFLoadParams, Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
-import { IFCXLoader } from "./IFCX/IFCXLoader";
+import { IFCXLoader } from "./IFCXLoader";
 
 export class IFCXFileLoader extends Loader {
   public viewer: Viewer;

package/plugins/loaders/Potree/PotreeFileLoader.ts

@@ -0,0 +1,106 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Euler, Vector3 } from "three";
+import { PointColorType, PointCloudOctree, PointSizeType, PointShape, Potree } from "potree-core";
+import { Loader, Viewer } from "@inweb/viewer-three";
+
+import { PotreeModelImpl } from "./PotreeModelImpl";
+
+export type PotreeLoadParams = {
+  path?: string;
+  position?: Vector3;
+  rotation?: Euler;
+  scale?: Vector3;
+};
+
+export class PotreeFileLoader extends Loader {
+  public viewer: Viewer;
+  public potree: Potree;
+  public pointClouds: PointCloudOctree[];
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+
+    this.potree = new Potree();
+    this.pointClouds = [];
+
+    this.viewer.addEventListener("render", this.updatePointClouds);
+    this.viewer.addEventListener("changecamera", this.updatePointClouds);
+  }
+
+  override dispose() {
+    this.pointClouds.forEach((pco) => pco.dispose());
+
+    this.viewer.removeEventListener("render", this.updatePointClouds);
+    this.viewer.removeEventListener("changecamera", this.updatePointClouds);
+  }
+
+  override isSupport(file: any, format?: string): boolean {
+    return typeof file === "string" && /(cloud.js|metadata.json)$/i.test(file);
+  }
+
+  override async load(file: any, format?: string, params: PotreeLoadParams = {}): Promise<this> {
+    const path = (params.path || "") + file;
+    const index = path.lastIndexOf("/");
+    const baseUrl = path.slice(0, index + 1);
+    const url = path.slice(index + 1);
+
+    const pco = await this.potree.loadPointCloud(url, baseUrl);
+    pco.material.size = 1.0;
+    pco.material.shape = 2;
+    pco.material.inputColorEncoding = 1;
+    pco.material.outputColorEncoding = 1;
+    pco.material.pointColorType = PointColorType.RGB; // RGB | DEPTH | HEIGHT | POINT_INDEX | LOD | CLASSIFICATION
+    pco.material.pointSizeType = PointSizeType.ADAPTIVE; // ADAPTIVE | FIXED
+    pco.material.shape = PointShape.CIRCLE; // CIRCLE | SQUARE
+
+    if (params.position) pco.position.copy(params.position);
+    if (params.rotation) pco.rotation.copy(params.rotation);
+    if (params.scale) pco.scale.copy(params.scale);
+
+    this.pointClouds.push(pco);
+
+    const modelImpl = new PotreeModelImpl(pco);
+    modelImpl.loader = this;
+    modelImpl.viewer = this.viewer;
+    modelImpl.pco = pco;
+
+    this.viewer.scene.add(pco);
+    this.viewer.models.push(modelImpl);
+
+    this.viewer.syncOptions();
+    this.viewer.syncOverlay();
+    this.viewer.update();
+
+    this.viewer.emitEvent({ type: "databasechunk", data: pco, file });
+
+    return this;
+  }
+
+  updatePointClouds = () => {
+    const result = this.potree.updatePointClouds(this.pointClouds, this.viewer.camera, this.viewer.renderer);
+    if (result.exceededMaxLoadsToGPU || result.nodeLoadPromises.length > 0) this.viewer.update();
+  };
+}

package/plugins/loaders/Potree/PotreeModelImpl.ts

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { ModelImpl } from "@inweb/viewer-three";
+
+// Potree model implementation.
+
+export class PotreeModelImpl extends ModelImpl {
+  public pco: PointCloudOctree;
+
+  override getExtents(target: Box3): Box3 {
+    return target.union(this.pco.pcoGeometry.boundingBox);
+  }
+}

package/plugins/loaders/Potree/index.ts

@@ -0,0 +1,28 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { PotreeFileLoader } from "./PotreeFileLoader";
+
+loaders.registerLoader("potree-file", (viewer: any) => new PotreeFileLoader(viewer));

package/src/Viewer/Viewer.ts

@@ -108,8 +108,8 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
-  private renderNeeded: boolean;
-  private renderTime: DOMHighResTimeStamp;
+  private _renderNeeded: boolean;
+  private _renderTime: DOMHighResTimeStamp;
 
   private _markup: IMarkup;
 
@@ -136,7 +136,7 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
-    this.renderTime = 0;
+    this._renderTime = 0;
 
     this.render = this.render.bind(this);
     this.update = this.update.bind(this);
@@ -217,6 +217,7 @@ export class Viewer
     this.composer.addPass(this.fxaaPass);
     this.composer.addPass(this.ssaaRenderPass);
     this.composer.addPass(this.outputPass);
+    this.composer.setSize(width, height);
 
     this.canvas = canvas;
     this.canvasEvents.forEach((x) => canvas.addEventListener(x, this.canvaseventlistener));
@@ -230,8 +231,8 @@ export class Viewer
     this.syncOptions();
     this.syncOverlay();
 
-    this.renderTime = performance.now();
-    this.render(this.renderTime);
+    this._renderTime = performance.now();
+    this.render(this._renderTime);
 
     if (typeof onProgress === "function")
       onProgress(new ProgressEvent("progress", { lengthComputable: true, loaded: 1, total: 1 }));
@@ -289,21 +290,44 @@ export class Viewer
     return !!this.renderer;
   }
 
+  setSize(width: number, height: number, updateStyle = true) {
+    if (!this.renderer) return;
+
+    const camera = this.camera as any;
+    const aspect = width / height;
+
+    if (camera.isPerspectiveCamera) {
+      camera.aspect = aspect;
+      camera.updateProjectionMatrix();
+    }
+    if (camera.isOrthographicCamera) {
+      camera.left = camera.bottom * aspect;
+      camera.right = camera.top * aspect;
+      camera.updateProjectionMatrix();
+    }
+
+    this.renderer.setSize(width, height, updateStyle);
+    this.composer.setSize(width, height);
+
+    this.update(true);
+    this.emitEvent({ type: "resize", width, height });
+  }
+
   update(force = false): void {
-    this.renderNeeded = true;
+    this._renderNeeded = true;
     if (force) this.render();
     this.emitEvent({ type: "update", data: force });
   }
 
   render(time?: DOMHighResTimeStamp, force = false): void {
     if (!this.renderer) return;
-    if (!(this.renderNeeded || force)) return;
+    if (!this._renderNeeded && !force) return;
 
     if (!time) time = performance.now();
-    const deltaTime = (time - this.renderTime) / 1000;
+    const deltaTime = (time - this._renderTime) / 1000;
 
-    this.renderTime = time;
-    this.renderNeeded = false;
+    this._renderTime = time;
+    this._renderNeeded = false;
 
     if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
       this.renderer.render(this.scene, this.camera);

package/src/Viewer/components/ExtentsComponent.ts

@@ -55,6 +55,6 @@ export class ExtentsComponent implements IComponent {
     this.viewer.models.forEach((model) => model.getExtents(extents));
 
     this.viewer.extents.copy(extents);
-    extents.getCenter(this.viewer.target);
+    this.viewer.extents.getCenter(this.viewer.target);
   };
 }

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -43,23 +43,6 @@ export class ResizeCanvasComponent implements IComponent {
 
     if (!width || !height) return; // <- invisible viewer, or viewer with parent removed
 
-    const camera = this.viewer.camera as any;
-    const aspect = width / height;
-
-    if (camera.isPerspectiveCamera) {
-      camera.aspect = aspect;
-      camera.updateProjectionMatrix();
-    }
-    if (camera.isOrthographicCamera) {
-      camera.left = camera.bottom * aspect;
-      camera.right = camera.top * aspect;
-      camera.updateProjectionMatrix();
-    }
-
-    this.viewer.renderer.setSize(width, height, true);
-    this.viewer.composer.setSize(width, height);
-
-    this.viewer.update(true);
-    this.viewer.emitEvent({ type: "resize", width, height });
+    this.viewer.setSize(width, height);
   };
 }

package/src/Viewer/draggers/OrbitDragger.ts

@@ -81,6 +81,13 @@ export class OrbitDragger implements IDragger {
     this.viewer.update();
 
     switch (this.orbit.state) {
+      case STATE.ROTATE:
+      case STATE.TOUCH_ROTATE:
+        this.viewer.emitEvent({
+          type: "orbit",
+        });
+        break;
+
       case STATE.PAN:
       case STATE.TOUCH_PAN:
         this.viewer.emitEvent({
@@ -102,6 +109,8 @@ export class OrbitDragger implements IDragger {
         break;
     }
 
+    this.viewer.emitEvent({ type: "changecamera" });
+
     this.changed = true;
   };
 

package/src/Viewer/draggers/WalkDragger.ts

@@ -56,6 +56,7 @@ export class WalkDragger implements IDragger {
 
   controlsChange = () => {
     this.viewer.update();
+    this.viewer.emitEvent({ type: "changecamera" });
   };
 
   walkspeedChange = (event: any) => {

package/src/Viewer/helpers/WCSHelper.ts

@@ -28,9 +28,9 @@ export class WCSHelper extends Object3D {
     this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
     this.orthoCamera.position.set(0, 0, 2);
 
-    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#aa0000" });
-    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00aa00" });
-    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000aa" });
+    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#dd0000" });
+    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00dd00" });
+    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000dd" });
 
     const spriteRed = this.getSpriteMaterial(matRed.color, "X");
     const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");