@inweb/viewer-three 25.11.2 → 25.12.0

package/lib/Viewer/Viewer.d.ts

@@ -57,6 +57,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      * model reference files from the Open Cloud Server. For a standalone viewer instance use
      * {@link openGltfFile | openGltfFile()}.
      *
+     * If there was an active dragger before opening the file, it will be deactivated. After
+     * opening the file, you must manually activate the required dragger.
+     *
      * Fires:
      *
      * - {@link OpenEvent | open}
@@ -76,6 +79,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     /**
      * Loads a `glTF` file into the viewer.
      *
+     * If there was an active dragger before opening the file, it will be deactivated. After
+     * opening the file, you must manually activate the required dragger.
+     *
      * Fires:
      *
      * - {@link OpenEvent | open}

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

@@ -1,7 +1,14 @@
-import { Camera, EventDispatcher, Vector2 } from "three";
-export declare class WalkControls extends EventDispatcher {
-    camera: Camera;
-    canvas: HTMLElement;
+import { Camera, Controls, Vector2 } from "three";
+interface WalkControlsEventMap {
+    change: {
+        type: "change";
+    };
+    walkspeedchange: {
+        type: "walkspeedchange";
+        data: number;
+    };
+}
+export declare class WalkControls extends Controls<WalkControlsEventMap> {
     movementSpeed: number;
     lookSpeed: number;
     multiplier: number;
@@ -24,3 +31,4 @@ export declare class WalkControls extends EventDispatcher {
     update(): void;
     rotateCamera(delta: Vector2): void;
 }
+export {};

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

@@ -0,0 +1,16 @@
+import type { Viewer } from "../Viewer";
+import { OrbitDragger } from "./OrbitDragger";
+export declare class MeasureLineDragger extends OrbitDragger {
+    private overlay;
+    private line;
+    private snapper;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
+    onPointerLeave: () => void;
+    renderOverlay: () => void;
+    updateSnapper: () => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "25.11.2",
+  "version": "25.12.0",
   "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",
@@ -28,17 +28,17 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.11.2",
-    "@inweb/eventemitter2": "~25.11.2",
-    "@inweb/markup": "~25.11.2",
-    "@inweb/viewer-core": "~25.11.2"
+    "@inweb/client": "~25.12.0",
+    "@inweb/eventemitter2": "~25.12.0",
+    "@inweb/markup": "~25.12.0",
+    "@inweb/viewer-core": "~25.12.0"
   },
   "devDependencies": {
-    "@types/three": "^0.152.1",
-    "three": "^0.153.0"
+    "@types/three": "^0.169.0",
+    "three": "^0.170.0"
   },
   "peerDependencies": {
-    "@types/three": "^0.152.1",
-    "three": "^0.153.0"
+    "@types/three": "^0.169.0",
+    "three": "^0.170.0"
   }
 }

package/src/Viewer/Viewer.ts

@@ -52,6 +52,7 @@ import { WalkDragger } from "./draggers/WalkDragger";
 import { CuttingPlaneXAxisDragger } from "./draggers/CuttingPlaneXAxis";
 import { CuttingPlaneYAxisDragger } from "./draggers/CuttingPlaneYAxis";
 import { CuttingPlaneZAxisDragger } from "./draggers/CuttingPlaneZAxis";
+import { MeasureLineDragger } from "./draggers/MeasureLineDragger";
 
 import { IDisposable } from "./IDisposable";
 import { ExtentsComponent } from "./components/ExtentsComponent";
@@ -125,6 +126,7 @@ export class Viewer
       CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
       CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
       CuttingPlaneZAxis: CuttingPlaneZAxisDragger,
+      MeasureLine: MeasureLineDragger,
     };
     this._activeDragger = null;
 
@@ -284,6 +286,9 @@ export class Viewer
    * model reference files from the Open Cloud Server. For a standalone viewer instance use
    * {@link openGltfFile | openGltfFile()}.
    *
+   * If there was an active dragger before opening the file, it will be deactivated. After
+   * opening the file, you must manually activate the required dragger.
+   *
    * Fires:
    *
    * - {@link OpenEvent | open}
@@ -333,6 +338,9 @@ export class Viewer
   /**
    * Loads a `glTF` file into the viewer.
    *
+   * If there was an active dragger before opening the file, it will be deactivated. After
+   * opening the file, you must manually activate the required dragger.
+   *
    * Fires:
    *
    * - {@link OpenEvent | open}
@@ -479,6 +487,7 @@ export class Viewer
     this.setActiveDragger();
     this.clearSlices();
     this.clearOverlay();
+    this.clearSelected();
 
     this.helpers.traverse(disposeObject);
     this.helpers.clear();

package/src/Viewer/commands/ZoomToObjects.ts

@@ -33,11 +33,7 @@ function zoomToObjects(viewer: Viewer, handles: string[] = []): void {
     if (handleSet.has(child.userData?.handle)) objects.push(child);
   });
 
-  const extents = objects.reduce((result, object) => {
-    const objectExtents = new Box3().setFromObject(object);
-    return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-  }, new Box3());
-
+  const extents = objects.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
   const center = extents.getCenter(new Vector3());
   const distance = extents.getBoundingSphere(new Sphere()).radius;
 

package/src/Viewer/commands/ZoomToSelected.ts

@@ -27,10 +27,7 @@ import { commands } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 
 function zoomToSelected(viewer: Viewer): void {
-  const extents = viewer.selected.reduce((result, object) => {
-    const objectExtents = new Box3().setFromObject(object);
-    return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-  }, new Box3());
+  const extents = viewer.selected.reduce((result: Box3, object) => result.expandByObject(object), new Box3());
 
   if (extents.isEmpty()) extents.copy(viewer.extents);
 

package/src/Viewer/components/ExtentsComponent.ts

@@ -43,10 +43,7 @@ export class ExtentsComponent implements IDisposable {
   }
 
   syncExtents = () => {
-    const extents = this.viewer.models.reduce((result, gltf) => {
-      const modelExtents = new Box3().setFromObject(gltf.scene);
-      return result.isEmpty() ? result.copy(modelExtents) : result.union(modelExtents);
-    }, new Box3());
+    const extents = this.viewer.models.reduce((result: Box3, gltf) => result.expandByObject(gltf.scene), new Box3());
 
     this.viewer.extents.copy(extents);
     this.viewer.target.copy(extents.getCenter(new Vector3()));

package/src/Viewer/components/SelectionComponent.ts

@@ -100,6 +100,15 @@ export class SelectionComponent implements IDisposable {
     const objects = [];
     this.viewer.scene.traverseVisible((child) => objects.push(child));
 
+    this.raycaster.params = this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0.25 },
+      Line2: { threshold: 0.25 },
+      LOD: {},
+      Points: { threshold: 0.1 },
+      Sprite: {},
+    };
+
     return this.raycaster.intersectObjects(objects, false);
   }
 

package/src/Viewer/components/WCSHelperComponent.ts

@@ -41,6 +41,9 @@ export class WCSHelperComponent implements IDisposable {
   }
 
   viewerRender = () => {
-    if (!this.viewer.extents.isEmpty()) this.wcsHelper.render(this.viewer.renderer);
+    if (!this.viewer.options.showWCS) return;
+    if (this.viewer.extents.isEmpty()) return;
+
+    this.wcsHelper.render(this.viewer.renderer);
   };
 }

package/src/Viewer/controls/WalkControls.ts

@@ -21,14 +21,14 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Clock, Camera, EventDispatcher, Quaternion, Vector2, Vector3 } from "three";
+import { Clock, Camera, Controls, Quaternion, Vector2, Vector3 } from "three";
 
-const _changeEvent = { type: "change" };
-
-export class WalkControls extends EventDispatcher {
-  public camera: Camera;
-  public canvas: HTMLElement;
+interface WalkControlsEventMap {
+  change: { type: "change" };
+  walkspeedchange: { type: "walkspeedchange"; data: number };
+}
 
+export class WalkControls extends Controls<WalkControlsEventMap> {
   public movementSpeed = 0.2;
   public lookSpeed = 5;
   public multiplier = 5;
@@ -43,10 +43,7 @@ export class WalkControls extends EventDispatcher {
   public rotateDelta: Vector2;
 
   constructor(camera: Camera, canvas: HTMLElement) {
-    super();
-
-    this.camera = camera;
-    this.canvas = canvas;
+    super(camera, canvas);
 
     this.moveKeys = new Set();
     this.moveClock = new Clock();
@@ -55,56 +52,56 @@ export class WalkControls extends EventDispatcher {
     this.downPosition = new Vector2(0, 0);
     this.rotateDelta = new Vector2(0, 0);
 
-    this.canvas.addEventListener("pointerdown", this.onPointerDown);
-    this.canvas.addEventListener("pointermove", this.onPointerMove);
-    this.canvas.addEventListener("pointerup", this.onPointerUp);
-    this.canvas.addEventListener("pointercancel", this.onPointerCancel);
-    this.canvas.addEventListener("wheel", this.onWheel);
+    this.domElement.addEventListener("pointerdown", this.onPointerDown);
+    this.domElement.addEventListener("pointermove", this.onPointerMove);
+    this.domElement.addEventListener("pointerup", this.onPointerUp);
+    this.domElement.addEventListener("pointercancel", this.onPointerCancel);
+    this.domElement.addEventListener("wheel", this.onWheel);
 
     window.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("keyup", this.onKeyUp);
   }
 
-  dispose() {
-    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
-    this.canvas.removeEventListener("pointermove", this.onPointerMove);
-    this.canvas.removeEventListener("pointerup", this.onPointerUp);
-    this.canvas.removeEventListener("pointercancel", this.onPointerCancel);
-    this.canvas.removeEventListener("wheel", this.onWheel);
+  override dispose() {
+    this.domElement.removeEventListener("pointerdown", this.onPointerDown);
+    this.domElement.removeEventListener("pointermove", this.onPointerMove);
+    this.domElement.removeEventListener("pointerup", this.onPointerUp);
+    this.domElement.removeEventListener("pointercancel", this.onPointerCancel);
+    this.domElement.removeEventListener("wheel", this.onWheel);
 
     window.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("keyup", this.onKeyUp);
+
+    super.dispose();
   }
 
   onPointerDown = (event: PointerEvent) => {
-    if (!event.isPrimary || event.button !== 0) return;
+    if (event.button !== 0) return;
 
-    this.canvas.setPointerCapture(event.pointerId);
+    this.domElement.setPointerCapture(event.pointerId);
     this.downPosition.set(event.clientX, event.clientY);
-    this.quaternion.copy(this.camera.quaternion);
+    this.quaternion.copy(this.object.quaternion);
     this.mouseDragOn = true;
   };
 
   onPointerMove = (event: PointerEvent) => {
-    if (!event.isPrimary || !this.mouseDragOn) return;
+    if (!this.mouseDragOn) return;
 
     const movePosition = new Vector2(event.clientX, event.clientY);
     if (this.downPosition.distanceTo(movePosition) === 0) return;
 
     this.rotateDelta.copy(this.downPosition).sub(movePosition);
     this.rotateCamera(this.rotateDelta);
-    this.dispatchEvent(_changeEvent);
+    this.dispatchEvent({ type: "change" });
   };
 
   onPointerUp = (event: PointerEvent) => {
-    if (!event.isPrimary || event.button !== 0) return;
-
-    this.canvas.releasePointerCapture(event.pointerId);
+    this.domElement.releasePointerCapture(event.pointerId);
     this.mouseDragOn = false;
   };
 
   onPointerCancel = (event: PointerEvent) => {
-    this.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+    this.domElement.dispatchEvent(new PointerEvent("pointerup", event));
   };
 
   onWheel = (event: WheelEvent) => {
@@ -147,36 +144,22 @@ export class WalkControls extends EventDispatcher {
   };
 
   onKeyUp = (event: KeyboardEvent) => {
-    switch (event.code) {
-      case "ArrowLeft":
-      case "ArrowRight":
-      case "ArrowUp":
-      case "ArrowDown":
-      case "KeyW":
-      case "KeyS":
-      case "KeyA":
-      case "KeyD":
-      case "KeyQ":
-      case "KeyE":
-        this.moveKeys.delete(event.code);
-        this.update();
-        break;
-    }
+    if (this.moveKeys.delete(event.code)) this.update();
   };
 
-  update() {
+  override update() {
     if (this.moveKeys.size > 0) {
       const timeDelta = this.moveClock.getDelta();
       const moveDelta = timeDelta * this.movementSpeed * this.multiplier;
 
-      if (this.moveKeys.has("KeyW")) this.camera.translateZ(-moveDelta);
-      if (this.moveKeys.has("KeyS")) this.camera.translateZ(moveDelta);
+      if (this.moveKeys.has("KeyW")) this.object.translateZ(-moveDelta);
+      if (this.moveKeys.has("KeyS")) this.object.translateZ(moveDelta);
 
-      if (this.moveKeys.has("KeyA")) this.camera.translateX(-moveDelta);
-      if (this.moveKeys.has("KeyD")) this.camera.translateX(moveDelta);
+      if (this.moveKeys.has("KeyA")) this.object.translateX(-moveDelta);
+      if (this.moveKeys.has("KeyD")) this.object.translateX(moveDelta);
 
-      if (this.moveKeys.has("KeyQ")) this.camera.translateY(moveDelta);
-      if (this.moveKeys.has("KeyE")) this.camera.translateY(-moveDelta);
+      if (this.moveKeys.has("KeyQ")) this.object.translateY(moveDelta);
+      if (this.moveKeys.has("KeyE")) this.object.translateY(-moveDelta);
 
       const lookDelta = this.lookSpeed + (this.multiplier - 1);
 
@@ -187,15 +170,15 @@ export class WalkControls extends EventDispatcher {
       if (this.moveKeys.has("ArrowRight")) this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
 
       this.moveWheel = 0;
-      this.dispatchEvent(_changeEvent);
+      this.dispatchEvent({ type: "change" });
     }
 
     if (this.moveWheel !== 0) {
       const moveDelta = this.moveWheel * 0.0001 * this.movementSpeed * this.multiplier;
 
-      this.camera.translateZ(-moveDelta);
+      this.object.translateZ(-moveDelta);
       this.moveWheel += -1 * Math.sign(this.moveWheel);
-      this.dispatchEvent(_changeEvent);
+      this.dispatchEvent({ type: "change" });
     }
 
     if (this.moveKeys.size === 0 && this.moveWheel === 0) {
@@ -205,11 +188,11 @@ export class WalkControls extends EventDispatcher {
   }
 
   rotateCamera(delta: Vector2) {
-    const rotateX = (Math.PI * delta.x) / this.canvas.clientWidth;
-    const rotateY = (Math.PI * delta.y) / this.canvas.clientHeight;
+    const rotateX = (Math.PI * delta.x) / this.domElement.clientWidth;
+    const rotateY = (Math.PI * delta.y) / this.domElement.clientHeight;
 
     const xRotation = new Quaternion();
-    xRotation.setFromAxisAngle(this.camera.up, rotateX);
+    xRotation.setFromAxisAngle(this.object.up, rotateX);
 
     const yRotation = new Quaternion();
     yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
@@ -217,6 +200,6 @@ export class WalkControls extends EventDispatcher {
     const quaternion = this.quaternion.clone();
     quaternion.premultiply(xRotation).multiply(yRotation).normalize();
 
-    this.camera.setRotationFromQuaternion(quaternion);
+    this.object.setRotationFromQuaternion(quaternion);
   }
 }

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -60,7 +60,7 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.transform.attach(this.planeCenter);
     this.transform.addEventListener("change", this.transformChange);
     this.transform.addEventListener("dragging-changed", this.transformDrag);
-    this.viewer.helpers.add(this.transform);
+    this.viewer.helpers.add(this.transform.getHelper());
 
     this.viewer.on("explode", this.viewerExplode);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
@@ -73,7 +73,8 @@ export class CuttingPlaneDragger extends OrbitDragger {
 
     this.transform.removeEventListener("change", this.transformChange);
     this.transform.removeEventListener("dragging-changed", this.transformDrag);
-    this.transform.removeFromParent();
+    this.transform.getHelper().removeFromParent();
+    this.transform.detach();
     this.transform.dispose();
 
     this.planeHelper.removeFromParent();