@inweb/viewer-three 26.10.1 → 26.10.2

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

@@ -1,8 +1,12 @@
-import { IComponent } from "@inweb/viewer-core";
+import { CameraMode, IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 export declare class CameraComponent implements IComponent {
     protected viewer: Viewer;
     constructor(viewer: Viewer);
     dispose(): void;
+    getCameraMode(camera: any): CameraMode;
+    switchCamera(camera: any): void;
+    switchCameraMode(mode: CameraMode): void;
+    optionsChange: () => void;
     geometryEnd: () => void;
 }

package/lib/Viewer/draggers/CuttingPlaneDragger.d.ts

@@ -13,5 +13,6 @@ export declare class CuttingPlaneDragger extends OrbitDragger {
     transformChange: () => void;
     transformDrag: (event: any) => void;
     updatePlaneSize: () => void;
+    updateTransformCamera: () => void;
     onDoubleClick: (event: PointerEvent) => void;
 }

package/lib/Viewer/draggers/FlyDragger.d.ts

@@ -7,6 +7,7 @@ export declare class FlyDragger implements IDragger {
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;
+    updateControlsCamera: () => void;
     controlsChange: () => void;
     flyspeedChange: (event: any) => void;
     viewerRender: () => void;

package/lib/Viewer/draggers/MeasureLineDragger.d.ts

@@ -13,4 +13,5 @@ export declare class MeasureLineDragger extends OrbitDragger {
     onPointerLeave: () => void;
     renderOverlay: () => void;
     updateSnapper: () => void;
+    updateSnapperCamera: () => void;
 }

package/lib/Viewer/draggers/OrbitDragger.d.ts

@@ -9,6 +9,7 @@ export declare class OrbitDragger implements IDragger {
     initialize(): void;
     dispose(): void;
     updateControls: () => void;
+    updateControlsCamera: () => void;
     controlsStart: () => void;
     controlsChange: () => void;
     stopContextMenu: (event: PointerEvent) => void;

package/lib/Viewer/draggers/WalkDragger.d.ts

@@ -7,6 +7,7 @@ export declare class WalkDragger implements IDragger {
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;
+    updateControlsCamera: () => void;
     controlsChange: () => void;
     walkspeedChange: (event: any) => void;
     viewerRender: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.10.1",
+  "version": "26.10.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,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.10.1",
-    "@inweb/eventemitter2": "~26.10.1",
-    "@inweb/markup": "~26.10.1",
-    "@inweb/viewer-core": "~26.10.1"
+    "@inweb/client": "~26.10.2",
+    "@inweb/eventemitter2": "~26.10.2",
+    "@inweb/markup": "~26.10.2",
+    "@inweb/viewer-core": "~26.10.2"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",

package/plugins/loaders/IFCX/render.js

@@ -23,8 +23,8 @@
 
 // Repository: https://github.com/buildingSMART/IFC5-development
 // Original File: docs/viewer/render.mjs
-// Commit SHA-1: 83a7ae862232c90065d1bd03fcd538315e7d2563
-// Commit Date: 20.05.2025 21:00:52
+// Commit SHA-1: 7a2b39e56324d892b78b476944ec0e557d50b236
+// Commit Date: 30.07.2025 08:20:14
 
 // (C) buildingSMART International
 // published under MIT license

package/src/Viewer/Viewer.ts

@@ -698,6 +698,8 @@ export class Viewer
         this.renderPass.camera = camera;
         this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
+
+        this.emitEvent({ type: "changecameramode", mode: "orthographic" });
       }
     };
 
@@ -723,6 +725,8 @@ export class Viewer
         this.renderPass.camera = camera;
         this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
+
+        this.emitEvent({ type: "changecameramode", mode: "perspective" });
       }
     };
 

package/src/Viewer/components/CameraComponent.ts

@@ -21,9 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector2 } from "three";
+import { MathUtils, OrthographicCamera, PerspectiveCamera, Sphere, Vector2, Vector3 } from "three";
 
-import { IComponent } from "@inweb/viewer-core";
+import { CameraMode, IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 export class CameraComponent implements IComponent {
@@ -32,17 +32,93 @@ export class CameraComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.viewer.addEventListener("databasechunk", this.geometryEnd);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("initialize", this.optionsChange);
   }
 
   dispose() {
     this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("initialize", this.optionsChange);
   }
 
-  geometryEnd = () => {
-    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
+  getCameraMode(camera: any): CameraMode {
+    return camera.isOrthographicCamera ? "orthographic" : "perspective";
+  }
+
+  switchCamera(camera: any) {
+    const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius * 2 || 1;
     const rendererSize = this.viewer.renderer.getSize(new Vector2());
     const aspect = rendererSize.x / rendererSize.y;
 
+    if (camera.isPerspectiveCamera) {
+      camera.aspect = aspect;
+      camera.near = extentsSize / 1000;
+      camera.far = extentsSize * 1000;
+    }
+    if (camera.isOrthographicCamera) {
+      camera.left = camera.bottom * aspect;
+      camera.right = camera.top * aspect;
+      camera.near = 0;
+      camera.far = extentsSize * 1000;
+    }
+
+    camera.updateProjectionMatrix();
+
+    this.viewer.camera = camera;
+    this.viewer.renderPass.camera = camera;
+    this.viewer.helpersPass.camera = camera;
+    this.viewer.ssaaRenderPass.camera = camera;
+
+    this.viewer.update();
+  }
+
+  switchCameraMode(mode: CameraMode) {
+    if (!mode) return;
+
+    const currentCamera: any = this.viewer.camera;
+    if (mode === this.getCameraMode(currentCamera)) return;
+
+    const target = this.viewer.target.clone();
+
+    let camera: PerspectiveCamera | OrthographicCamera;
+
+    if (currentCamera.isOrthographicCamera) {
+      const fov = currentCamera.userData.fov || 45;
+      const fieldHeight = (currentCamera.top - currentCamera.bottom) / currentCamera.zoom;
+      const distance = fieldHeight / (2 * Math.tan(MathUtils.degToRad(fov) / 2));
+      const direction = new Vector3().subVectors(currentCamera.position, target).normalize();
+
+      camera = new PerspectiveCamera(fov);
+      camera.position.copy(direction).multiplyScalar(distance).add(target);
+    }
+    if (currentCamera.isPerspectiveCamera) {
+      const fov = currentCamera.fov;
+      const distance = currentCamera.position.distanceTo(target);
+      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(fov) / 2) * distance;
+
+      camera = new OrthographicCamera();
+      camera.top = fieldHeight / 2;
+      camera.bottom = -fieldHeight / 2;
+      camera.position.copy(currentCamera.position);
+
+      camera.userData.fov = fov;
+    }
+    if (!camera) return;
+
+    camera.up.copy(currentCamera.up);
+    camera.quaternion.copy(currentCamera.quaternion);
+
+    this.switchCamera(camera);
+
+    this.viewer.emitEvent({ type: "changecameramode", mode });
+  }
+
+  optionsChange = () => {
+    this.switchCameraMode(this.viewer.options.cameraMode);
+  };
+
+  geometryEnd = () => {
     let camera: any;
 
     // TODO: do not change the camera and target after opening the second model in "append" mode
@@ -56,29 +132,14 @@ export class CameraComponent implements IComponent {
       camera.isDefaultCamera = true;
       camera.scale.set(1, 1, 1); // <- Visualize fix
 
-      this.viewer.camera = camera;
-      this.viewer.renderPass.camera = camera;
-      this.viewer.helpersPass.camera = camera;
-      this.viewer.ssaaRenderPass.camera = camera;
-    } else {
-      camera = this.viewer.camera;
-    }
+      this.switchCamera(camera);
 
-    if (camera.isPerspectiveCamera) {
-      camera.aspect = aspect;
-      camera.near = extentsSize / 1000;
-      camera.far = extentsSize * 1000;
-      camera.updateProjectionMatrix();
-    }
-    if (camera.isOrthographicCamera) {
-      camera.left = camera.bottom * aspect;
-      camera.right = camera.top * aspect;
-      camera.near = 0;
-      camera.far = extentsSize * 1000;
-      camera.updateProjectionMatrix();
-    }
+      const mode = this.getCameraMode(camera);
 
-    if (!camera.isDefaultCamera) {
+      this.viewer.options.cameraMode = mode;
+      this.viewer.emitEvent({ type: "changecameramode", mode });
+    } else {
+      this.switchCamera(this.viewer.camera);
       this.viewer.executeCommand("setDefaultViewPosition");
     }
   };

package/src/Viewer/controls/WalkControls.ts

@@ -177,7 +177,7 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
       Sprite: { threshold: 0 },
     };
 
-    let intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+    const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
     if (intersects.length > 0) {
       const groundY = intersects[0].point.y;
       const targetY = groundY + this.EYE_HEIGHT;

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -62,17 +62,19 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.transform.addEventListener("dragging-changed", this.transformDrag);
     this.viewer.helpers.add(this.transform.getHelper());
 
-    this.viewer.on("explode", this.updatePlaneSize);
-    this.viewer.on("show", this.updatePlaneSize);
-    this.viewer.on("showall", this.updatePlaneSize);
+    this.viewer.addEventListener("explode", this.updatePlaneSize);
+    this.viewer.addEventListener("show", this.updatePlaneSize);
+    this.viewer.addEventListener("showall", this.updatePlaneSize);
+    this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
     this.viewer.update();
   }
 
   override dispose() {
-    this.viewer.off("explode", this.updatePlaneSize);
-    this.viewer.off("show", this.updatePlaneSize);
-    this.viewer.off("showAll", this.updatePlaneSize);
+    this.viewer.removeEventListener("explode", this.updatePlaneSize);
+    this.viewer.removeEventListener("show", this.updatePlaneSize);
+    this.viewer.removeEventListener("showall", this.updatePlaneSize);
+    this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
 
     this.transform.removeEventListener("change", this.transformChange);
@@ -106,6 +108,10 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.viewer.update();
   };
 
+  updateTransformCamera = () => {
+    this.transform.camera = this.viewer.camera;
+  };
+
   onDoubleClick = (event: PointerEvent) => {
     event.stopPropagation();
 

package/src/Viewer/draggers/FlyDragger.ts

@@ -36,14 +36,16 @@ export class FlyDragger implements IDragger {
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
     this.viewer = viewer;
-    this.viewer.on("render", this.viewerRender);
-    this.viewer.on("zoom", this.viewerZoom);
+    this.viewer.addEventListener("render", this.viewerRender);
+    this.viewer.addEventListener("zoom", this.viewerZoom);
+    this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
     this.updateControls();
   }
 
   dispose() {
-    this.viewer.off("render", this.viewerRender);
-    this.viewer.off("zoom", this.viewerZoom);
+    this.viewer.removeEventListener("render", this.viewerRender);
+    this.viewer.removeEventListener("zoom", this.viewerZoom);
+    this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
     this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
@@ -54,6 +56,10 @@ export class FlyDragger implements IDragger {
     this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
   };
 
+  updateControlsCamera = () => {
+    this.controls.object = this.viewer.camera;
+  };
+
   controlsChange = () => {
     this.viewer.update();
     this.viewer.emitEvent({ type: "changecamera" });

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -70,6 +70,7 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.addEventListener("isolate", this.updateSnapper);
     this.viewer.addEventListener("show", this.updateSnapper);
     this.viewer.addEventListener("showall", this.updateSnapper);
+    this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
   }
 
   override dispose() {
@@ -84,6 +85,9 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.removeEventListener("isolate", this.updateSnapper);
     this.viewer.removeEventListener("show", this.updateSnapper);
     this.viewer.removeEventListener("showall", this.updateSnapper);
+    this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
+
+    this.snapper.dispose();
 
     this.snapper.dispose();
 
@@ -145,6 +149,11 @@ export class MeasureLineDragger extends OrbitDragger {
   updateSnapper = () => {
     this.snapper.update(this.viewer);
   };
+
+  updateSnapperCamera = () => {
+    this.snapper.camera = this.viewer.camera;
+    this.overlay.camera = this.viewer.camera;
+  };
 }
 
 const _vertex = new Vector3();
@@ -155,7 +164,7 @@ const _center = new Vector3();
 const _projection = new Vector3();
 
 class MeasureSnapper {
-  private camera: Camera;
+  public camera: Camera;
   private canvas: HTMLCanvasElement;
   private objects: Object3D[];
   private raycaster: Raycaster;
@@ -224,20 +233,20 @@ class MeasureSnapper {
     // Notes: Originally AI-generated, modified manually
 
     if (camera.isOrthographicCamera) {
-      const worldHeight = camera.top - camera.bottom;
+      const fieldHeight = (camera.top - camera.bottom) / camera.zoom;
 
       const canvasHeight = this.canvas.height;
-      const worldUnitsPerPixel = worldHeight / canvasHeight;
+      const worldUnitsPerPixel = fieldHeight / canvasHeight;
 
       return this.detectRadiusInPixels * worldUnitsPerPixel;
     }
 
     if (camera.isPerspectiveCamera) {
       const distance = camera.position.distanceTo(point);
-      const worldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
+      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
 
       const canvasHeight = this.canvas.height;
-      const worldUnitsPerPixel = worldHeight / canvasHeight;
+      const worldUnitsPerPixel = fieldHeight / canvasHeight;
 
       return this.detectRadiusInPixels * worldUnitsPerPixel;
     }
@@ -368,7 +377,7 @@ class MeasureOverlay {
   }
 
   render() {
-    this.projector.updateProjectionMatrix();
+    this.projector.setFromCamera(this.camera);
     this.lines.forEach((line) => line.render());
   }
 
@@ -550,7 +559,7 @@ const point1 = new Vector2();
 const point2 = new Vector2();
 
 class MeasureProjector {
-  private camera: Camera;
+  public camera: Camera;
   private canvas: HTMLElement;
 
   constructor(camera: Camera, canvas: HTMLCanvasElement) {
@@ -558,6 +567,11 @@ class MeasureProjector {
     this.canvas = canvas;
   }
 
+  setFromCamera(camera: Camera) {
+    this.camera = camera;
+    this.updateProjectionMatrix();
+  }
+
   updateProjectionMatrix() {
     const rect = this.canvas.getBoundingClientRect();
     _widthHalf = rect.width / 2;

package/src/Viewer/draggers/OrbitDragger.ts

@@ -46,6 +46,7 @@ export class OrbitDragger implements IDragger {
     this.viewer.on("viewposition", this.updateControls);
     this.viewer.addEventListener("zoom", this.updateControls);
     this.viewer.addEventListener("drawviewpoint", this.updateControls);
+    this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
     this.viewer.addEventListener("contextmenu", this.stopContextMenu);
     this.updateControls();
   }
@@ -57,6 +58,7 @@ export class OrbitDragger implements IDragger {
     this.viewer.off("viewposition", this.updateControls);
     this.viewer.removeEventListener("zoom", this.updateControls);
     this.viewer.removeEventListener("drawviewpoint", this.updateControls);
+    this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
     this.viewer.removeEventListener("contextmenu", this.stopContextMenu);
 
     this.orbit.removeEventListener("start", this.controlsStart);
@@ -65,10 +67,14 @@ export class OrbitDragger implements IDragger {
   }
 
   updateControls = () => {
+    this.orbit.target.copy(this.viewer.target);
+    this.orbit.update();
+  };
+
+  updateControlsCamera = () => {
     this.orbit.maxDistance = this.viewer.camera.far;
     this.orbit.minDistance = this.viewer.camera.near;
     this.orbit.object = this.viewer.camera;
-    this.orbit.target.copy(this.viewer.target);
     this.orbit.update();
   };
 

package/src/Viewer/draggers/WalkDragger.ts

@@ -44,14 +44,16 @@ export class WalkDragger implements IDragger {
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
     this.viewer = viewer;
-    this.viewer.on("render", this.viewerRender);
-    this.viewer.on("zoom", this.viewerZoom);
+    this.viewer.addEventListener("render", this.viewerRender);
+    this.viewer.addEventListener("zoom", this.viewerZoom);
+    this.viewer.addEventListener("changecameramode", this.updateControlsCamera);
     this.updateControls();
   }
 
   dispose() {
-    this.viewer.off("render", this.viewerRender);
-    this.viewer.off("zoom", this.viewerZoom);
+    this.viewer.removeEventListener("render", this.viewerRender);
+    this.viewer.removeEventListener("zoom", this.viewerZoom);
+    this.viewer.removeEventListener("changecameramode", this.updateControlsCamera);
     this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
@@ -62,6 +64,10 @@ export class WalkDragger implements IDragger {
     this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
   };
 
+  updateControlsCamera = () => {
+    this.controls.object = this.viewer.camera;
+  };
+
   controlsChange = () => {
     this.viewer.update();
     this.viewer.emitEvent({ type: "changecamera" });