@inweb/viewer-three 26.10.1 → 26.10.3

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.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",
@@ -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.3",
+    "@inweb/eventemitter2": "~26.10.3",
+    "@inweb/markup": "~26.10.3",
+    "@inweb/viewer-core": "~26.10.3"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",

package/plugins/components/AxesHelperComponent.ts

@@ -30,8 +30,8 @@ class AxesHelperComponent implements IComponent {
   private axesHelper2: AxesHelper;
 
   constructor(viewer: Viewer) {
-    this.axesHelper1 = new AxesHelper();
-    this.axesHelper2 = new AxesHelper();
+    this.axesHelper1 = new AxesHelper(1);
+    this.axesHelper2 = new AxesHelper(1);
 
     this.viewer = viewer;
     this.viewer.addEventListener("initialize", this.syncHelper);
@@ -53,23 +53,18 @@ class AxesHelperComponent implements IComponent {
 
   syncHelper = () => {
     this.axesHelper1.removeFromParent();
-    this.axesHelper1.dispose();
-
     this.axesHelper2.removeFromParent();
-    this.axesHelper2.dispose();
 
     const size = this.viewer.extents.getSize(new Vector3()).length();
     const center = this.viewer.extents.getCenter(new Vector3());
 
-    this.axesHelper1 = new AxesHelper(size || 1);
-    this.axesHelper2 = new AxesHelper(size);
-
     this.axesHelper1.position.set(0, 0, 0);
-    this.viewer.helpers.add(this.axesHelper1);
-
-    if (this.viewer.extents.isEmpty()) return;
+    this.axesHelper1.scale.setScalar(size);
 
     this.axesHelper2.position.copy(center);
+    this.axesHelper2.scale.setScalar(size);
+
+    this.viewer.helpers.add(this.axesHelper1);
     this.viewer.helpers.add(this.axesHelper2);
   };
 }

package/plugins/components/GridHelperComponent.ts

@@ -0,0 +1,67 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { GridHelper, Vector3 } from "three";
+import { IComponent, components, Viewer } from "@inweb/viewer-three";
+
+class GridHelperComponent implements IComponent {
+  private viewer: Viewer;
+  private gridHelper: GridHelper;
+
+  constructor(viewer: Viewer) {
+    this.gridHelper = new GridHelper(10, 20, 0x444444, 0xaaaaaa);
+    this.viewer = viewer;
+    this.viewer.on("initialize", this.syncHelper);
+    this.viewer.on("geometryend", this.syncHelper);
+    this.viewer.on("clear", this.syncHelper);
+  }
+
+  dispose() {
+    this.gridHelper.removeFromParent();
+    this.gridHelper.dispose();
+
+    this.viewer.off("initialize", this.syncHelper);
+    this.viewer.off("geometryend", this.syncHelper);
+    this.viewer.off("clear", this.syncHelper);
+  }
+
+  syncHelper = () => {
+    this.gridHelper.removeFromParent();
+
+    if (this.viewer.extents.isEmpty()) return;
+
+    const size = this.viewer.extents.getSize(new Vector3()).multiply(this.viewer.camera.up).length();
+    const center = this.viewer.extents.getCenter(new Vector3());
+
+    const upY = new Vector3(0, 1, 0);
+    const up = new Vector3().copy(this.viewer.camera.up);
+
+    this.gridHelper.scale.setScalar(size);
+    this.gridHelper.position.copy(center);
+    this.gridHelper.quaternion.setFromUnitVectors(upY, up);
+
+    this.viewer.helpers.add(this.gridHelper);
+  };
+}
+
+components.registerComponent("GridHelperComponent", (viewer) => new GridHelperComponent(viewer));

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/components/SelectionComponent.ts

@@ -114,7 +114,13 @@ export class SelectionComponent implements IComponent {
       Sprite: {},
     };
 
-    return this.raycaster.intersectObjects(objects, false);
+    let intersects = this.raycaster.intersectObjects(objects, false);
+
+    (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
+      intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+    });
+
+    return intersects;
   }
 
   select(objects: Object3D | Object3D[], model?: IModelImpl) {

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

@@ -29,6 +29,7 @@ import {
   MathUtils,
   Matrix4,
   Object3D,
+  Plane,
   Raycaster,
   Vector2,
   Vector3,
@@ -70,6 +71,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 +86,7 @@ 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();
 
@@ -143,7 +146,12 @@ export class MeasureLineDragger extends OrbitDragger {
   };
 
   updateSnapper = () => {
-    this.snapper.update(this.viewer);
+    this.snapper.setFromViewer(this.viewer);
+  };
+
+  updateSnapperCamera = () => {
+    this.snapper.camera = this.viewer.camera;
+    this.overlay.camera = this.viewer.camera;
   };
 }
 
@@ -155,9 +163,10 @@ const _center = new Vector3();
 const _projection = new Vector3();
 
 class MeasureSnapper {
-  private camera: Camera;
+  public camera: Camera;
   private canvas: HTMLCanvasElement;
   private objects: Object3D[];
+  private clippingPlanes: Plane[];
   private raycaster: Raycaster;
   private detectRadiusInPixels: number;
   private edgesCache: WeakMap<any, EdgesGeometry>;
@@ -166,6 +175,7 @@ class MeasureSnapper {
     this.camera = camera;
     this.canvas = canvas;
     this.objects = [];
+    this.clippingPlanes = [];
     this.raycaster = new Raycaster();
     this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
     this.edgesCache = new WeakMap();
@@ -193,7 +203,7 @@ class MeasureSnapper {
     return target.set(event.clientX, event.clientY);
   }
 
-  getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>> {
+  getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>> {
     const rect = this.canvas.getBoundingClientRect();
     const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
     const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
@@ -210,7 +220,13 @@ class MeasureSnapper {
       Sprite: {},
     };
 
-    return this.raycaster.intersectObjects(objects, false);
+    let intersects = this.raycaster.intersectObjects(this.objects, false);
+
+    this.clippingPlanes.forEach((plane) => {
+      intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+    });
+
+    return intersects;
   }
 
   getDetectRadius(point: Vector3): number {
@@ -224,20 +240,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;
     }
@@ -250,7 +266,7 @@ class MeasureSnapper {
   getSnapPoint(event: PointerEvent): Vector3 {
     const mouse = this.getMousePosition(event, new Vector2());
 
-    const intersections = this.getPointerIntersects(mouse, this.objects);
+    const intersections = this.getPointerIntersects(mouse);
     if (intersections.length === 0) return undefined;
 
     // ===================== AI-CODE-START ======================
@@ -314,11 +330,14 @@ class MeasureSnapper {
     return intersectionPoint.clone();
   }
 
-  update(viewer: Viewer) {
+  setFromViewer(viewer: Viewer) {
     this.objects.length = 0;
     viewer.models.forEach((model) => {
       model.getVisibleObjects().forEach((object) => this.objects.push(object));
     });
+
+    this.camera = viewer.camera;
+    this.clippingPlanes = viewer.renderer.clippingPlanes || [];
   }
 }
 
@@ -328,22 +347,19 @@ class MeasureOverlay {
   public container: HTMLElement;
   public lines: MeasureLine[] = [];
   public projector: MeasureProjector;
+  private resizeObserver: ResizeObserver;
 
   constructor(camera: Camera, canvas: HTMLCanvasElement) {
     this.camera = camera;
     this.canvas = canvas;
     this.projector = new MeasureProjector(camera, canvas);
+    this.resizeObserver = new ResizeObserver(this.resizeContainer);
   }
 
   attach() {
     this.container = document.createElement("div");
     this.container.id = "measure-container";
-    this.container.style.background = "rgba(0,0,0,0)";
     this.container.style.position = "absolute";
-    this.container.style.top = "0px";
-    this.container.style.left = "0px";
-    this.container.style.width = "100%";
-    this.container.style.height = "100%";
     this.container.style.outline = "none";
     this.container.style.pointerEvents = "none";
     this.container.style.overflow = "hidden";
@@ -351,6 +367,7 @@ class MeasureOverlay {
     if (!this.canvas.parentElement) return;
 
     this.canvas.parentElement.appendChild(this.container);
+    this.resizeObserver.observe(this.canvas.parentElement);
   }
 
   dispose() {
@@ -358,6 +375,8 @@ class MeasureOverlay {
   }
 
   detach() {
+    this.resizeObserver.disconnect();
+
     this.container.remove();
     this.container = undefined;
   }
@@ -368,7 +387,7 @@ class MeasureOverlay {
   }
 
   render() {
-    this.projector.updateProjectionMatrix();
+    this.projector.setFromCamera(this.camera);
     this.lines.forEach((line) => line.render());
   }
 
@@ -383,6 +402,15 @@ class MeasureOverlay {
   removeLine(line: MeasureLine) {
     this.lines = this.lines.filter((x) => x !== line);
   }
+
+  resizeContainer = (entries: ResizeObserverEntry[]) => {
+    const { width, height } = entries[0].contentRect;
+
+    if (!width || !height) return; // <- invisible canvas, or canvas with parent removed
+
+    this.container.style.width = `${width}px`;
+    this.container.style.height = `${height}px`;
+  };
 }
 
 const _middlePoint = new Vector3();
@@ -550,7 +578,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 +586,11 @@ class MeasureProjector {
     this.canvas = canvas;
   }
 
+  setFromCamera(camera: Camera) {
+    this.camera = camera;
+    this.updateProjectionMatrix();
+  }
+
   updateProjectionMatrix() {
     const rect = this.canvas.getBoundingClientRect();
     _widthHalf = rect.width / 2;