@inweb/viewer-three 27.2.1 → 27.2.3

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

@@ -19,8 +19,14 @@ export declare class WalkControls extends Controls<WalkControlsEventMap> {
     movementSpeed: number;
     multiplier: number;
     private groundFollowingSkippedFrames;
+    readonly GROUND_BOX_HALF_SIZE = 20;
+    readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3;
     private raycaster;
     private groundObjects;
+    private _groundObjectBoxes;
+    private _activeGroundObjects;
+    private _groundBox;
+    private _groundBoxCenter;
     private moveKeys;
     private moveWheel;
     private moveClock;
@@ -41,6 +47,8 @@ export declare class WalkControls extends Controls<WalkControlsEventMap> {
     onWheel: (event: WheelEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void;
     onKeyUp: (event: KeyboardEvent) => void;
+    private _rebuildGroundBox;
+    private _needsGroundBoxRebuild;
     private updateGroundFollowing;
     update(): void;
     rotateCamera(delta: Vector2): void;

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

@@ -1,18 +1,40 @@
-import { Object3D, Plane, Vector3 } from "three";
+import { Plane, Quaternion, Vector2, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 import type { Viewer } from "../Viewer";
-import { PlaneHelper } from "../helpers/PlaneHelper";
+import { PlaneHelper2 } from "../helpers/PlaneHelper2";
+import { Snapper } from "../measurement/Snapper";
 import { OrbitDragger } from "./OrbitDragger";
 export declare class CuttingPlaneDragger extends OrbitDragger {
-    protected plane: Plane;
-    protected planeCenter: Object3D;
-    protected planeHelper: PlaneHelper;
-    protected transform: TransformControls;
-    constructor(viewer: Viewer, normal: Vector3, color: number);
+    protected clippingPlanes: Plane[];
+    protected helpers: PlaneHelper2[];
+    protected activeHelper: PlaneHelper2;
+    protected snapper: Snapper;
+    protected downPosition: Vector2;
+    protected position0: Vector3;
+    protected quaternion0: Quaternion;
+    protected translate: TransformControls;
+    protected rotate: TransformControls;
+    constructor(viewer: Viewer);
     dispose(): void;
     transformChange: () => void;
-    transformDrag: (event: any) => void;
+    translateDrag: (event: any) => void;
+    rotateDrag: (event: any) => void;
     updatePlaneSize: () => void;
     updateTransformCamera: () => void;
+    clearHelpers: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
     onDoubleClick: (event: PointerEvent) => void;
+    private addHelper;
+    private setActiveHelper;
+    private saveState;
+    private reset;
+    addPlane(normal: Vector3): void;
+    addPlaneX(): void;
+    addPlaneY(): void;
+    addPlaneZ(): void;
+    deleteActivePlane(): void;
 }

package/lib/Viewer/helpers/PlaneHelper2.d.ts

@@ -0,0 +1,12 @@
+import { Line, LineBasicMaterial, Mesh, MeshBasicMaterial, Object3D, Plane } from "three";
+export declare class PlaneHelper2 extends Object3D {
+    plane: Plane;
+    size: number;
+    outline: Line;
+    mesh: Mesh;
+    constructor(size?: number, color?: number, opacity?: number);
+    dispose(): void;
+    updateMatrixWorld(force: boolean): void;
+    getLineMaterial(): LineBasicMaterial;
+    getMeshMaterial(): MeshBasicMaterial;
+}

package/lib/Viewer/measurement/Snapper.d.ts

@@ -10,7 +10,7 @@ export declare class Snapper {
     constructor(camera: Camera, renderer: WebGLRenderer, canvas: HTMLCanvasElement);
     isMobile(): boolean;
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
-    getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>>;
+    getPointerIntersects(mouse: Vector2, objects: Object3D[], recursive?: boolean, clip?: boolean): Array<Intersection<Object3D>>;
     getDetectRadius(point: Vector3): number;
     getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.2.1",
+  "version": "27.2.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": "~27.2.1",
-    "@inweb/eventemitter2": "~27.2.1",
-    "@inweb/markup": "~27.2.1",
-    "@inweb/viewer-core": "~27.2.1"
+    "@inweb/client": "~27.2.3",
+    "@inweb/eventemitter2": "~27.2.3",
+    "@inweb/markup": "~27.2.3",
+    "@inweb/viewer-core": "~27.2.3"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/Viewer.ts

@@ -542,6 +542,8 @@ export class Viewer
     if (!this.renderer) return;
 
     this._markup.clearOverlay();
+
+    this.emitEvent({ type: "clearoverlay" });
     this.update();
   }
 
@@ -549,6 +551,8 @@ export class Viewer
     if (!this.renderer) return;
 
     this.renderer.clippingPlanes = [];
+
+    this.emitEvent({ type: "clearslices" });
     this.update();
   }
 

package/src/Viewer/components/SelectionComponent.ts

@@ -58,7 +58,7 @@ export class SelectionComponent implements IComponent {
   };
 
   onPointerUp = (event: PointerEvent) => {
-    if (!event.isPrimary) return;
+    if (!event.isPrimary || event.button !== 0) return;
 
     const upPosition = this.getMousePosition(event, new Vector2());
     if (upPosition.distanceTo(this.downPosition) !== 0) return;

package/src/Viewer/controls/WalkControls.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Clock, Camera, Controls, Quaternion, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
+import { Box3, Clock, Camera, Controls, Quaternion, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
 
 interface WalkControlsEventMap {
   change: { type: "change" };
@@ -41,8 +41,15 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   public multiplier = 3;
   private groundFollowingSkippedFrames = 0;
 
+  readonly GROUND_BOX_HALF_SIZE = 20;
+  readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3;
+
   private raycaster: Raycaster;
   private groundObjects: Object3D[];
+  private _groundObjectBoxes = new Map<Object3D, Box3>();
+  private _activeGroundObjects: Object3D[] = [];
+  private _groundBox = new Box3();
+  private _groundBoxCenter = new Vector3();
 
   private moveKeys: Set<string>;
   private moveWheel = 0;
@@ -64,6 +71,12 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     this.camera = camera;
 
     this.groundObjects = groundObjects;
+    for (const obj of groundObjects) {
+      this._groundObjectBoxes.set(obj, new Box3().setFromObject(obj));
+    }
+    const pos = this.object.position;
+    this._rebuildGroundBox(pos);
+
     this.raycaster = new Raycaster();
     this.raycaster.near = 0;
     this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
@@ -175,14 +188,47 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   };
 
   onKeyUp = (event: KeyboardEvent) => {
-    if (this.moveKeys.delete(event.code)) this.update();
+    if (this.moveKeys.delete(event.code)) {
+      if (this.moveKeys.size === 0) {
+        this._rebuildGroundBox(this.object.position);
+      }
+      this.update();
+    }
   };
 
+  private _rebuildGroundBox(center: Vector3) {
+    const h = this.GROUND_BOX_HALF_SIZE;
+    this._groundBoxCenter.copy(center);
+    this._groundBox.set(
+      new Vector3(center.x - h, center.y - h * 4, center.z - h),
+      new Vector3(center.x + h, center.y + h * 4, center.z + h)
+    );
+
+    this._activeGroundObjects = this.groundObjects.filter((obj) => {
+      const objectBox = this._groundObjectBoxes.get(obj);
+      return objectBox !== undefined && this._groundBox.intersectsBox(objectBox);
+    });
+  }
+
+  private _needsGroundBoxRebuild(pos: Vector3): boolean {
+    if (this._activeGroundObjects.length === 0 && this.groundObjects.length > 0) return true;
+    const threshold = this.GROUND_BOX_HALF_SIZE * this.GROUND_BOX_REFRESH_THRESHOLD;
+    return (
+      Math.abs(pos.x - this._groundBoxCenter.x) > threshold || Math.abs(pos.z - this._groundBoxCenter.z) > threshold
+    );
+  }
+
   private updateGroundFollowing() {
+    const pos = this.object.position;
+
+    if (this._needsGroundBoxRebuild(pos)) {
+      this._rebuildGroundBox(pos);
+    }
+
     this._up.copy(this.camera.up).negate();
-    this.raycaster.set(this.object.position, this._up);
+    this.raycaster.set(pos, this._up);
 
-    const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+    const intersects = this.raycaster.intersectObjects(this._activeGroundObjects, false);
     if (intersects.length > 0) {
       const groundY = intersects[0].point.y;
       const targetY = groundY + this.EYE_HEIGHT;

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -21,52 +21,77 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Plane, Vector3 } from "three";
+import { Plane, Quaternion, Vector2, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
 import type { Viewer } from "../Viewer";
-import { PlaneHelper } from "../helpers/PlaneHelper";
+import { STATE } from "../controls/OrbitControls.js";
+import { PlaneHelper2 } from "../helpers/PlaneHelper2";
+import { Snapper } from "../measurement/Snapper";
 import { OrbitDragger } from "./OrbitDragger";
 
 export class CuttingPlaneDragger extends OrbitDragger {
-  protected plane: Plane;
-  protected planeCenter: Object3D;
-  protected planeHelper: PlaneHelper;
-  protected transform: TransformControls;
+  protected clippingPlanes: Plane[];
+  protected helpers: PlaneHelper2[] = [];
+  protected activeHelper: PlaneHelper2 = null;
+  protected snapper: Snapper;
+  protected downPosition: Vector2;
+  protected position0: Vector3;
+  protected quaternion0: Quaternion;
+  protected translate: TransformControls;
+  protected rotate: TransformControls;
 
-  constructor(viewer: Viewer, normal: Vector3, color: number) {
+  constructor(viewer: Viewer) {
     super(viewer);
 
+    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
+
+    this.clippingPlanes = viewer.renderer.clippingPlanes;
+    this.clippingPlanes.forEach((plane) => this.addHelper(plane));
+
     const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
-    const extentsCenter = viewer.extents.getCenter(new Vector3());
-    const constant = -extentsCenter.dot(normal);
 
-    this.plane = new Plane(normal, constant);
+    this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+    this.snapper.threshold = extentsSize / 10000;
 
-    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
-    viewer.renderer.clippingPlanes.push(this.plane);
+    this.downPosition = new Vector2();
+    this.position0 = new Vector3();
+    this.quaternion0 = new Quaternion();
 
-    this.planeHelper = new PlaneHelper(this.plane, extentsSize, color, extentsCenter);
-    this.viewer.helpers.add(this.planeHelper);
+    this.translate = new TransformControls(viewer.camera, viewer.canvas);
+    this.translate.setMode("translate");
+    this.translate.setSpace("local");
+    this.translate.showX = false;
+    this.translate.showY = false;
+    this.translate.showZ = true;
+    this.translate.addEventListener("change", this.transformChange);
+    this.translate.addEventListener("dragging-changed", this.translateDrag);
+    this.viewer.helpers.add(this.translate.getHelper());
 
-    this.planeCenter = new Object3D();
-    this.planeCenter.position.copy(extentsCenter);
-    this.viewer.helpers.add(this.planeCenter);
+    this.rotate = new TransformControls(viewer.camera, viewer.canvas);
+    this.rotate.setMode("rotate");
+    this.rotate.setSpace("local");
+    this.rotate.showX = true;
+    this.rotate.showY = true;
+    this.rotate.showZ = false;
+    this.rotate.addEventListener("change", this.transformChange);
+    this.rotate.addEventListener("dragging-changed", this.rotateDrag);
+    this.viewer.helpers.add(this.rotate.getHelper());
 
-    this.transform = new TransformControls(viewer.camera, viewer.canvas);
-    this.transform.showX = !!normal.x;
-    this.transform.showY = !!normal.y;
-    this.transform.showZ = !!normal.z;
-    this.transform.attach(this.planeCenter);
-    this.transform.addEventListener("change", this.transformChange);
-    this.transform.addEventListener("dragging-changed", this.transformDrag);
-    this.viewer.helpers.add(this.transform.getHelper());
+    this.setActiveHelper(this.helpers[this.helpers.length - 1]);
 
     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.addEventListener("clearslices", this.clearHelpers);
+    this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown, true);
+    this.viewer.canvas.addEventListener("pointerup", this.onPointerUp, true);
+    this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+    window.addEventListener("keydown", this.onKeyDown);
+    window.addEventListener("keyup", this.onKeyUp);
+
     this.viewer.update();
   }
 
@@ -75,47 +100,223 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.viewer.removeEventListener("show", this.updatePlaneSize);
     this.viewer.removeEventListener("showall", this.updatePlaneSize);
     this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+    this.viewer.removeEventListener("clearslices", this.clearHelpers);
+    this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown, true);
+    this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp, true);
+    this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("keyup", this.onKeyUp);
 
-    this.transform.removeEventListener("change", this.transformChange);
-    this.transform.removeEventListener("dragging-changed", this.transformDrag);
-    this.transform.getHelper().removeFromParent();
-    this.transform.detach();
-    this.transform.dispose();
-
-    this.planeHelper.removeFromParent();
-    this.planeHelper.dispose();
+    this.translate.removeEventListener("change", this.transformChange);
+    this.translate.removeEventListener("dragging-changed", this.translateDrag);
+    this.translate.getHelper().removeFromParent();
+    this.translate.detach();
+    this.translate.dispose();
 
-    this.planeCenter.removeFromParent();
+    this.rotate.removeEventListener("change", this.transformChange);
+    this.rotate.removeEventListener("dragging-changed", this.rotateDrag);
+    this.rotate.getHelper().removeFromParent();
+    this.rotate.detach();
+    this.rotate.dispose();
 
-    // this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane) => plane !== this.plane);
-    // this.viewer.update();
+    this.helpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.helpers = [];
+    this.activeHelper = null;
 
     super.dispose();
   }
 
   transformChange = () => {
-    this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+    if (!this.activeHelper) return;
+
+    const plane = this.activeHelper.plane;
+    plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.activeHelper.quaternion);
+    plane.constant = -this.activeHelper.position.dot(plane.normal);
+
     this.viewer.update();
+
+    this.changed = true; // <- cancel context menu
   };
 
-  transformDrag = (event) => {
+  translateDrag = (event) => {
     this.orbit.enabled = !event.value;
+    this.rotate.enabled = !event.value;
+  };
+
+  rotateDrag = (event) => {
+    this.orbit.enabled = !event.value;
+    this.translate.enabled = !event.value;
   };
 
   updatePlaneSize = () => {
-    this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    this.helpers.forEach((planeHelper) => (planeHelper.size = extentsSize));
     this.viewer.update();
   };
 
   updateTransformCamera = () => {
-    this.transform.camera = this.viewer.camera;
+    this.translate.camera = this.viewer.camera;
+    this.rotate.camera = this.viewer.camera;
+    this.snapper.camera = this.viewer.camera;
+  };
+
+  clearHelpers = () => {
+    this.setActiveHelper();
+
+    this.helpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.helpers = [];
+
+    this.viewer.update();
+  };
+
+  onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Shift") this.rotate.setRotationSnap(Math.PI / 4);
+    if (event.key === "Delete" || event.key === "Backspace") this.deleteActivePlane();
+    if (event.key === "Escape" && (this.translate.dragging || this.rotate.dragging)) this.reset();
+  };
+
+  onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === "Shift") this.rotate.setRotationSnap(null);
+  };
+
+  onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || !event.isPrimary) return;
+
+    this.snapper.getMousePosition(event, this.downPosition);
+    this.saveState();
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    if (event.button !== 0) return;
+
+    const upPosition = this.snapper.getMousePosition(event, new Vector2());
+    if (upPosition.distanceTo(this.downPosition) !== 0) return;
+
+    const intersects = this.snapper.getPointerIntersects(upPosition, this.helpers, true, false);
+    if (intersects.length === 0) return;
+
+    this.setActiveHelper(intersects[0].object.parent as PlaneHelper2);
+  };
+
+  onPointerCancel = (event: PointerEvent) => {
+    this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
   };
 
   onDoubleClick = (event: PointerEvent) => {
+    if (!this.activeHelper) return;
+
+    const mousePosition = this.snapper.getMousePosition(event, new Vector2());
+
+    const intersects = this.snapper.getPointerIntersects(mousePosition, [this.activeHelper], true, false);
+    if (intersects.length === 0) return;
+
+    this.activeHelper.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
+    this.transformChange();
+
     event.stopPropagation();
+  };
+
+  private addHelper(plane: Plane): PlaneHelper2 {
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+
+    const helper = new PlaneHelper2(extentsSize);
+    helper.plane = plane;
+    helper.position.copy(plane.projectPoint(extentsCenter, new Vector3()));
+    helper.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), plane.normal);
+
+    this.helpers.push(helper);
+    this.viewer.helpers.add(helper);
+
+    return helper;
+  }
+
+  private setActiveHelper(helper?: PlaneHelper2) {
+    if (helper === this.activeHelper) return;
+
+    if (this.activeHelper) {
+      this.activeHelper.getLineMaterial().color.setHex(0xf0f0f0);
+      this.activeHelper.getMeshMaterial().opacity = 0.15;
+
+      this.translate.detach();
+      this.rotate.detach();
+    }
+
+    this.activeHelper = helper;
+
+    if (this.activeHelper) {
+      this.activeHelper.getLineMaterial().color.setHex(0xd0d0d0);
+      this.activeHelper.getMeshMaterial().opacity = 0.3;
+
+      this.translate.attach(this.activeHelper);
+      this.rotate.attach(this.activeHelper);
+    }
 
-    this.plane.negate();
     this.viewer.update();
-  };
+  }
+
+  private saveState() {
+    if (!this.activeHelper) return;
+
+    this.position0.copy(this.activeHelper.position);
+    this.quaternion0.copy(this.activeHelper.quaternion);
+  }
+
+  private reset() {
+    if (!this.activeHelper) return;
+
+    this.translate.dragging = false;
+    this.rotate.dragging = false;
+    this.orbit.state = STATE.NONE;
+
+    this.activeHelper.position.copy(this.position0);
+    this.activeHelper.quaternion.copy(this.quaternion0);
+
+    this.transformChange();
+  }
+
+  addPlane(normal: Vector3) {
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+    const constant = -extentsCenter.dot(normal);
+
+    const plane = new Plane(normal, constant);
+    this.clippingPlanes.push(plane);
+
+    const helper = this.addHelper(plane);
+    this.setActiveHelper(helper);
+  }
+
+  addPlaneX() {
+    this.addPlane(new Vector3(-1, 0, 0));
+  }
+
+  addPlaneY() {
+    this.addPlane(new Vector3(0, -1, 0));
+  }
+
+  addPlaneZ() {
+    this.addPlane(new Vector3(0, 0, -1));
+  }
+
+  deleteActivePlane() {
+    if (!this.activeHelper) return;
+
+    const helper = this.activeHelper;
+
+    const index = this.clippingPlanes.indexOf(helper.plane);
+    if (index !== -1) this.clippingPlanes.splice(index, 1);
+
+    this.helpers = this.helpers.filter((x) => x !== helper);
+    helper.removeFromParent();
+    helper.dispose();
+
+    this.setActiveHelper(this.helpers[this.helpers.length - 1]);
+  }
 }

package/src/Viewer/draggers/CuttingPlaneXAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(1, 0, 0), 0xff0000);
+    super(viewer);
+    this.addPlaneX();
   }
 }

package/src/Viewer/draggers/CuttingPlaneYAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, 1, 0), 0x00ff00);
+    super(viewer);
+    this.addPlaneY();
   }
 }

package/src/Viewer/draggers/CuttingPlaneZAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, 0, 1), 0x0000ff);
+    super(viewer);
+    this.addPlaneZ();
   }
 }

package/src/Viewer/draggers/index.ts

@@ -23,6 +23,7 @@
 
 import { IDraggersRegistry, draggersRegistry } from "@inweb/viewer-core";
 
+import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 import { CuttingPlaneXAxisDragger } from "./CuttingPlaneXAxis";
 import { CuttingPlaneYAxisDragger } from "./CuttingPlaneYAxis";
 import { CuttingPlaneZAxisDragger } from "./CuttingPlaneZAxis";
@@ -84,6 +85,7 @@ draggers.registerDragger("Pan", (viewer) => new PanDragger(viewer));
 draggers.registerDragger("Orbit", (viewer) => new OrbitDragger(viewer));
 draggers.registerDragger("Zoom", (viewer) => new ZoomDragger(viewer));
 draggers.registerDragger("MeasureLine", (viewer) => new MeasureLineDragger(viewer));
+draggers.registerDragger("CuttingPlane", (viewer) => new CuttingPlaneDragger(viewer));
 draggers.registerDragger("CuttingPlaneXAxis", (viewer) => new CuttingPlaneXAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new CuttingPlaneYAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new CuttingPlaneZAxisDragger(viewer));