@inweb/viewer-three 26.10.2 → 26.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.10.2",
+  "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.2",
-    "@inweb/eventemitter2": "~26.10.2",
-    "@inweb/markup": "~26.10.2",
-    "@inweb/viewer-core": "~26.10.2"
+    "@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/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/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();