@inweb/viewer-three 26.10.2 → 26.10.4

package/lib/Viewer/controls/JoyStickControls.d.ts

@@ -0,0 +1,44 @@
+import { Camera, Controls, Object3D } from "three";
+interface JoyStickControlsEventMap {
+    change: {
+        type: "change";
+    };
+}
+export declare class JoyStickControls extends Controls<JoyStickControlsEventMap> {
+    readonly EYE_HEIGHT = 1.7;
+    readonly FAILING_DISTANCE = 2;
+    readonly GROUND_FOLLOWING_SPEED = 0.05;
+    readonly WALK_SPEED_DELIMITER = 4;
+    movementSpeed: number;
+    multiplier: number;
+    private raycaster;
+    private groundObjects;
+    private canvas;
+    private overlayElement;
+    private joyStickCanvas;
+    private context;
+    private moveClock;
+    private camera;
+    private joyStickPosition;
+    private isActive;
+    private readonly MAX_JOYSTICK_DISTANCE;
+    private readonly INTERNAL_RADIUS;
+    private readonly MAX_MOVE_STICK;
+    private readonly EXTERNAL_RADIUS;
+    private readonly CANVAS_SIZE;
+    private centerX;
+    private centerY;
+    private pressed;
+    constructor(camera: Camera, domElement: HTMLElement, canvasElement: HTMLCanvasElement, groundObjects: Object3D[]);
+    dispose(): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onResize;
+    private updateVisibility;
+    private updatePosition;
+    private draw;
+    private updateGroundFollowing;
+    update(): void;
+}
+export {};

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

@@ -4,6 +4,7 @@ import { FlyControls } from "../controls/FlyControls";
 export declare class FlyDragger implements IDragger {
     protected viewer: Viewer;
     controls: FlyControls;
+    private joyStickControls;
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;

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

@@ -4,6 +4,7 @@ import { WalkControls } from "../controls/WalkControls";
 export declare class WalkDragger implements IDragger {
     protected viewer: Viewer;
     controls: WalkControls;
+    private joyStickControls;
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.10.2",
+  "version": "26.10.4",
   "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.2",
-    "@inweb/eventemitter2": "~26.10.2",
-    "@inweb/markup": "~26.10.2",
-    "@inweb/viewer-core": "~26.10.2"
+    "@inweb/client": "~26.10.4",
+    "@inweb/eventemitter2": "~26.10.4",
+    "@inweb/markup": "~26.10.4",
+    "@inweb/viewer-core": "~26.10.4"
   },
   "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/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/JoyStickControls.ts

@@ -0,0 +1,285 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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.
+///////////////////////////////////////////////////////////////////////////////
+
+// ===================== AI-CODE-FILE ======================
+// Source: Claude Sonnet 4.5
+// Date: 2025-10-07
+// Reviewer: vitaly.ivanov@opendesign.com
+// Issue: CLOUD-5851
+// Notes: Originally AI-generated, modified manually
+// =========================================================
+
+import { Camera, Clock, Controls, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
+
+interface JoyStickControlsEventMap {
+  change: { type: "change" };
+}
+
+export class JoyStickControls extends Controls<JoyStickControlsEventMap> {
+  readonly EYE_HEIGHT = 1.7;
+  readonly FAILING_DISTANCE = 2;
+  readonly GROUND_FOLLOWING_SPEED = 0.05;
+  readonly WALK_SPEED_DELIMITER = 4;
+
+  public movementSpeed = 0.1;
+  public multiplier = 3;
+
+  private raycaster: Raycaster;
+  private groundObjects: Object3D[];
+
+  private canvas: HTMLCanvasElement;
+  private overlayElement: HTMLDivElement;
+  private joyStickCanvas: HTMLCanvasElement;
+  private context: CanvasRenderingContext2D;
+
+  private moveClock: Clock;
+  private camera: Camera;
+
+  private joyStickPosition: Vector2;
+  private isActive: boolean = false;
+
+  private readonly MAX_JOYSTICK_DISTANCE = 100;
+  private readonly INTERNAL_RADIUS = 35;
+  private readonly MAX_MOVE_STICK = 40;
+  private readonly EXTERNAL_RADIUS = 65;
+  private readonly CANVAS_SIZE = 200;
+
+  private centerX: number;
+  private centerY: number;
+  private pressed: boolean = false;
+
+  constructor(camera: Camera, domElement: HTMLElement, canvasElement: HTMLCanvasElement, groundObjects: Object3D[]) {
+    super(camera, domElement);
+    this.camera = camera;
+    this.canvas = canvasElement;
+    this.moveClock = new Clock(false);
+    this.joyStickPosition = new Vector2(0, 0);
+
+    this.groundObjects = groundObjects;
+    this.raycaster = new Raycaster();
+    this.raycaster.near = 0;
+    this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+
+    this.centerX = this.CANVAS_SIZE / 2;
+    this.centerY = this.CANVAS_SIZE / 2;
+
+    this.overlayElement = document.createElement("div");
+    this.overlayElement.id = "joyStickDiv";
+    this.overlayElement.style.background = "rgba(0,0,0,0)";
+    this.overlayElement.style.position = "fixed";
+    this.overlayElement.style.zIndex = "0";
+    this.overlayElement.style.touchAction = "none";
+    document.body.appendChild(this.overlayElement);
+
+    this.joyStickCanvas = document.createElement("canvas");
+    this.joyStickCanvas.id = "joyStickCanvas";
+    this.joyStickCanvas.width = this.CANVAS_SIZE;
+    this.joyStickCanvas.height = this.CANVAS_SIZE;
+    this.overlayElement.appendChild(this.joyStickCanvas);
+    this.context = this.joyStickCanvas.getContext("2d")!;
+
+    this.joyStickCanvas.addEventListener("pointerdown", this.onPointerDown);
+    document.addEventListener("pointermove", this.onPointerMove);
+    document.addEventListener("pointerup", this.onPointerUp);
+
+    window.addEventListener("resize", this.onResize);
+    document.addEventListener("fullscreenchange", this.onResize);
+
+    this.updateVisibility();
+    this.updatePosition();
+    this.draw();
+  }
+
+  override dispose() {
+    this.joyStickCanvas.removeEventListener("pointerdown", this.onPointerDown);
+    document.removeEventListener("pointermove", this.onPointerMove);
+    document.removeEventListener("pointerup", this.onPointerUp);
+
+    window.removeEventListener("resize", this.onResize);
+    document.removeEventListener("fullscreenchange", this.onResize);
+
+    this.overlayElement.remove();
+    super.dispose();
+  }
+
+  private onPointerDown = (event: PointerEvent) => {
+    event.preventDefault();
+    this.pressed = true;
+  };
+
+  private onPointerMove = (event: PointerEvent) => {
+    event.preventDefault();
+    if (!this.pressed) return;
+
+    let movedX = event.pageX;
+    let movedY = event.pageY;
+
+    if (
+      this.joyStickCanvas.offsetParent &&
+      (this.joyStickCanvas.offsetParent as HTMLElement).tagName.toUpperCase() === "BODY"
+    ) {
+      movedX -= this.joyStickCanvas.offsetLeft;
+      movedY -= this.joyStickCanvas.offsetTop;
+    } else if (this.joyStickCanvas.offsetParent) {
+      movedX -= (this.joyStickCanvas.offsetParent as HTMLElement).offsetLeft;
+      movedY -= (this.joyStickCanvas.offsetParent as HTMLElement).offsetTop;
+    }
+
+    const x = 100 * ((movedX - this.centerX) / this.MAX_MOVE_STICK);
+    const y = 100 * ((movedY - this.centerY) / this.MAX_MOVE_STICK) * -1;
+
+    const distance = Math.sqrt(x * x + y * y);
+    if (distance > 20) {
+      this.joyStickPosition.set(x, y);
+      this.isActive = true;
+    } else {
+      this.joyStickPosition.set(0, 0);
+      this.isActive = false;
+    }
+
+    this.draw();
+    this.moveClock.start();
+    this.update();
+  };
+
+  private onPointerUp = (event: PointerEvent) => {
+    event.preventDefault();
+    this.pressed = false;
+    this.joyStickPosition.set(0, 0);
+    this.isActive = false;
+    this.moveClock.stop();
+    this.draw();
+  };
+
+  private onResize = () => {
+    this.updateVisibility();
+    this.updatePosition();
+  };
+
+  private updateVisibility() {
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isNarrowScreen = window.innerWidth < 1024;
+
+    if (isMobile || isNarrowScreen) {
+      this.overlayElement.style.display = "block";
+    } else {
+      this.overlayElement.style.display = "none";
+    }
+  }
+
+  private updatePosition() {
+    const rect = this.canvas.getBoundingClientRect();
+    this.overlayElement.style.top = `${rect.height - this.CANVAS_SIZE}px`;
+    this.overlayElement.style.left = `${rect.left}px`;
+    this.overlayElement.style.width = `${this.CANVAS_SIZE}px`;
+    this.overlayElement.style.height = `${this.CANVAS_SIZE}px`;
+  }
+
+  private draw() {
+    this.context.clearRect(0, 0, this.CANVAS_SIZE, this.CANVAS_SIZE);
+
+    // Draw external circle
+    this.context.beginPath();
+    this.context.arc(this.centerX, this.centerY, this.EXTERNAL_RADIUS, 0, 2 * Math.PI, false);
+    this.context.lineWidth = 2;
+    this.context.strokeStyle = "#35436E";
+    this.context.globalAlpha = 0.5;
+    this.context.stroke();
+
+    // Draw internal circle
+    let movedX = this.centerX + (this.joyStickPosition.x * this.MAX_MOVE_STICK) / 100;
+    let movedY = this.centerY - (this.joyStickPosition.y * this.MAX_MOVE_STICK) / 100;
+
+    movedX = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedX));
+    movedY = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedY));
+
+    this.context.beginPath();
+    this.context.arc(movedX, movedY, this.INTERNAL_RADIUS, 0, 2 * Math.PI, false);
+    this.context.fillStyle = "#35436E";
+    this.context.lineWidth = 2;
+    this.context.strokeStyle = "#35436E";
+    this.context.globalAlpha = 0.5;
+    this.context.fill();
+    this.context.stroke();
+  }
+
+  private updateGroundFollowing() {
+    const up = new Vector3().copy(this.camera.up);
+    this.raycaster.set(this.camera.position, up.negate());
+
+    this.raycaster.params = this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0 },
+      Line2: { threshold: 0 },
+      LOD: { threshold: 0 },
+      Points: { threshold: 0 },
+      Sprite: { threshold: 0 },
+    };
+
+    const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+    if (intersects.length > 0) {
+      const groundY = intersects[0].point.y;
+      const targetY = groundY + this.EYE_HEIGHT;
+
+      // Smoothly interpolate the camera's y position to the target height
+      this.camera.position.y = MathUtils.lerp(this.camera.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+    }
+  }
+
+  override update() {
+    if (!this.isActive) return;
+
+    const forwardInput = this.joyStickPosition.y / this.MAX_JOYSTICK_DISTANCE;
+    const rightInput = this.joyStickPosition.x / this.MAX_JOYSTICK_DISTANCE;
+
+    const timeDelta = this.moveClock.getDelta();
+    const moveDelta = (timeDelta * this.multiplier * this.movementSpeed) / this.WALK_SPEED_DELIMITER;
+
+    const forward = new Vector3();
+    const sideways = new Vector3();
+
+    this.camera.getWorldDirection(forward);
+    if (this.groundObjects.length > 0) {
+      forward.y = 0;
+    }
+    forward.normalize();
+
+    sideways.setFromMatrixColumn(this.camera.matrix, 0);
+    if (this.groundObjects.length > 0) {
+      sideways.y = 0;
+    }
+    sideways.normalize();
+
+    if (forwardInput !== 0) {
+      this.camera.position.addScaledVector(forward, moveDelta * forwardInput);
+    }
+    if (rightInput !== 0) {
+      this.camera.position.addScaledVector(sideways, moveDelta * rightInput);
+    }
+
+    if (forwardInput !== 0 || rightInput !== 0) {
+      if (this.groundObjects.length > 0) this.updateGroundFollowing();
+      this.dispatchEvent({ type: "change" });
+    }
+  }
+}

package/src/Viewer/draggers/FlyDragger.ts

@@ -26,15 +26,21 @@ import { type IDragger } from "@inweb/viewer-core";
 
 import type { Viewer } from "../Viewer";
 import { FlyControls } from "../controls/FlyControls";
+import { JoyStickControls } from "../controls/JoyStickControls";
 
 export class FlyDragger implements IDragger {
   protected viewer: Viewer;
   public controls: FlyControls;
+  private joyStickControls: JoyStickControls;
 
   constructor(viewer: Viewer) {
     this.controls = new FlyControls(viewer.camera, viewer.canvas);
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
+
+    this.joyStickControls = new JoyStickControls(viewer.camera, viewer.canvas, viewer.canvas, []);
+    this.joyStickControls.addEventListener("change", this.controlsChange);
+
     this.viewer = viewer;
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("zoom", this.viewerZoom);
@@ -49,11 +55,16 @@ export class FlyDragger implements IDragger {
     this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
+
+    this.joyStickControls.removeEventListener("change", this.controlsChange);
+    this.joyStickControls.dispose();
   }
 
   updateControls = () => {
     const size = this.viewer.extents.getSize(new Vector3());
     this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+    this.joyStickControls.movementSpeed = this.controls.movementSpeed;
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   updateControlsCamera = () => {
@@ -67,9 +78,11 @@ export class FlyDragger implements IDragger {
 
   flyspeedChange = (event: any) => {
     this.viewer.emitEvent(event);
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   viewerRender = () => {
+    this.joyStickControls.update();
     this.controls.update();
   };
 

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -29,6 +29,7 @@ import {
   MathUtils,
   Matrix4,
   Object3D,
+  Plane,
   Raycaster,
   Vector2,
   Vector3,
@@ -89,8 +90,6 @@ export class MeasureLineDragger extends OrbitDragger {
 
     this.snapper.dispose();
 
-    this.snapper.dispose();
-
     this.overlay.detach();
     this.overlay.dispose();
 
@@ -147,7 +146,7 @@ export class MeasureLineDragger extends OrbitDragger {
   };
 
   updateSnapper = () => {
-    this.snapper.update(this.viewer);
+    this.snapper.setFromViewer(this.viewer);
   };
 
   updateSnapperCamera = () => {
@@ -167,6 +166,7 @@ class MeasureSnapper {
   public camera: Camera;
   private canvas: HTMLCanvasElement;
   private objects: Object3D[];
+  private clippingPlanes: Plane[];
   private raycaster: Raycaster;
   private detectRadiusInPixels: number;
   private edgesCache: WeakMap<any, EdgesGeometry>;
@@ -175,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();
@@ -202,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;
@@ -219,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 {
@@ -259,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 ======================
@@ -323,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 || [];
   }
 }
 
@@ -337,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";
@@ -360,6 +367,7 @@ class MeasureOverlay {
     if (!this.canvas.parentElement) return;
 
     this.canvas.parentElement.appendChild(this.container);
+    this.resizeObserver.observe(this.canvas.parentElement);
   }
 
   dispose() {
@@ -367,6 +375,8 @@ class MeasureOverlay {
   }
 
   detach() {
+    this.resizeObserver.disconnect();
+
     this.container.remove();
     this.container = undefined;
   }
@@ -392,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();