@inweb/viewer-three 25.9.8 → 25.10.0

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -0,0 +1,110 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { Object3D, Plane, Vector3 } from "three";
+import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+
+import type { Viewer } from "../Viewer";
+import { PlaneHelper } from "../helpers/PlaneHelper";
+import { OrbitDragger } from "./OrbitDragger";
+
+export class CuttingPlaneDragger extends OrbitDragger {
+  protected plane: Plane;
+  protected planeCenter: Object3D;
+  protected planeHelper: PlaneHelper;
+  protected transform: TransformControls;
+
+  constructor(viewer: Viewer, normal: Vector3, color: number) {
+    super(viewer);
+
+    const size = viewer.extents.getSize(new Vector3()).length();
+    const center = viewer.extents.getCenter(new Vector3());
+    const constant = -center.dot(normal);
+
+    this.plane = new Plane(normal, constant);
+
+    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
+    viewer.renderer.clippingPlanes.push(this.plane);
+
+    this.planeHelper = new PlaneHelper(this.plane, size, color, center);
+    this.viewer.helpers.add(this.planeHelper);
+
+    this.planeCenter = new Object3D();
+    this.planeCenter.position.copy(viewer.extents.getCenter(new Vector3()));
+    this.viewer.helpers.add(this.planeCenter);
+
+    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);
+
+    this.viewer.on("explode", this.viewerExplode);
+    this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+    this.viewer.update();
+  }
+
+  override dispose() {
+    this.viewer.off("explode", this.viewerExplode);
+    this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+
+    this.transform.removeEventListener("change", this.transformChange);
+    this.transform.removeEventListener("dragging-changed", this.transformDrag);
+    this.transform.removeFromParent();
+    this.transform.dispose();
+
+    this.planeHelper.removeFromParent();
+    this.planeHelper.dispose();
+
+    this.planeCenter.removeFromParent();
+
+    // this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane) => plane !== this.plane);
+    // this.viewer.update();
+
+    super.dispose();
+  }
+
+  transformChange = () => {
+    this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+    this.viewer.update();
+  };
+
+  transformDrag = (event) => {
+    this.orbit.enabled = !event.value;
+  };
+
+  viewerExplode = () => {
+    this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length();
+    this.viewer.update();
+  };
+
+  onDoubleClick = (event: PointerEvent) => {
+    event.stopPropagation();
+
+    this.plane.negate();
+    this.viewer.update();
+  };
+}

package/src/Viewer/draggers/CuttingPlaneXAxis.ts

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { 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);
+  }
+}

package/src/Viewer/draggers/CuttingPlaneYAxis.ts

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { 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);
+  }
+}

package/src/Viewer/draggers/CuttingPlaneZAxis.ts

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { 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);
+  }
+}

package/src/Viewer/draggers/OrbitDragger.ts

@@ -21,41 +21,66 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { GeometryEndEvent } from "@inweb/viewer-core";
-import * as THREE from "three";
+import { MOUSE, TOUCH } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import type { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class OrbitDragger extends OrbitControls {
-  private viewer: Viewer;
+export class OrbitDragger implements IDisposable {
+  protected viewer: Viewer;
+  protected orbit: OrbitControls;
+  protected changed: boolean;
 
   constructor(viewer: Viewer) {
-    super(viewer.camera, viewer.canvas);
-    this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN };
-    this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
-    this.screenSpacePanning = true;
-    this.rotateSpeed = 0.33;
+    this.orbit = new OrbitControls(viewer.camera, viewer.canvas);
+    this.orbit.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.PAN, RIGHT: MOUSE.PAN };
+    this.orbit.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+    this.orbit.screenSpacePanning = true;
+    this.orbit.rotateSpeed = 0.33;
+    this.orbit.addEventListener("start", this.controlsStart);
+    this.orbit.addEventListener("change", this.controlsChange);
+    this.changed = false;
     this.viewer = viewer;
-    this.viewer.addEventListener("geometryend", this.geometryEnd);
-    this.addEventListener("change", this.updateViewer);
+    this.viewer.on("geometryend", this.updateControls);
+    this.viewer.on("viewposition", this.updateControls);
+    this.viewer.on("zoom", this.updateControls);
+    this.viewer.on("contextmenu", this.stopContextMenu);
+    this.updateControls();
   }
 
-  override dispose(): void {
-    this.removeEventListener("change", this.updateViewer);
-    this.viewer.removeEventListener("geometryend", this.geometryEnd);
-    super.dispose();
+  dispose(): void {
+    this.viewer.off("contextmenu", this.stopContextMenu);
+    this.viewer.off("zoom", this.updateControls);
+    this.viewer.off("viewposition", this.updateControls);
+    this.viewer.off("geometryend", this.updateControls);
+
+    this.orbit.removeEventListener("change", this.controlsChange);
+    this.orbit.dispose();
   }
 
-  geometryEnd = (event: GeometryEndEvent) => {
-    const { data: scene } = event;
-    const box = new THREE.Box3().setFromObject(scene);
-    const size = box.getSize(new THREE.Vector3()).length();
+  updateControls = () => {
+    this.orbit.maxDistance = this.viewer.camera.far;
+    this.orbit.minDistance = this.viewer.camera.near;
+    this.orbit.target.copy(this.viewer.target);
+    this.orbit.update();
+  };
 
-    this.maxDistance = size * 10;
-    this.update();
+  controlsStart = () => {
+    this.changed = false;
   };
 
-  updateViewer = () => {
+  controlsChange = () => {
+    this.viewer.target.copy(this.orbit.target);
     this.viewer.update();
+
+    this.changed = true;
+  };
+
+  stopContextMenu = (event: PointerEvent) => {
+    if (this.changed) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
   };
 }

package/src/Viewer/draggers/PanDragger.ts

@@ -21,14 +21,15 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
+import { MOUSE } from "three";
+
 import { OrbitDragger } from "./OrbitDragger";
 import type { Viewer } from "../Viewer";
 
 export class PanDragger extends OrbitDragger {
   constructor(viewer: Viewer) {
     super(viewer);
-    this.mouseButtons = { LEFT: THREE.MOUSE.PAN, MIDDLE: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN };
-    this.touches = { ONE: THREE.TOUCH.PAN, TWO: THREE.TOUCH.DOLLY_ROTATE };
+    this.orbit.mouseButtons = { LEFT: MOUSE.PAN, MIDDLE: MOUSE.PAN, RIGHT: MOUSE.PAN };
+    // this.controls.touches = { ONE: TOUCH.PAN, TWO: TOUCH.DOLLY_ROTATE };
   }
 }

package/src/Viewer/draggers/WalkDragger.ts

@@ -21,240 +21,51 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { RenderEvent } from "@inweb/viewer-core";
-import * as THREE from "three";
+import { Vector3 } from "three";
+
 import type { Viewer } from "../Viewer";
+import { WalkControls } from "../controls/WalkControls";
 
 export class WalkDragger {
   protected viewer: Viewer;
-  protected camera: THREE.Camera;
-  protected canvas: HTMLCanvasElement;
-  protected _target: THREE.Vector3;
-  protected quaternion: THREE.Quaternion;
-  protected mouseStart: THREE.Vector2;
-  protected mouseDelta: THREE.Vector2;
-  protected xAxis: THREE.Vector3;
-  protected yAxis: THREE.Vector3;
-  protected zAxis: THREE.Vector3;
-  protected speed: THREE.Vector3;
-  protected _maxDistance: number;
-  protected xRotation: THREE.Quaternion;
-  protected yRotation: THREE.Quaternion;
-  protected yRotationAxis: THREE.Vector3;
-  protected touchStartDistance: number;
-
-  public walkSpeed: number;
-  public boostSpeed: number;
+  public controls: WalkControls;
 
   constructor(viewer: Viewer) {
+    this.controls = new WalkControls(viewer.camera, viewer.canvas);
+    this.controls.addEventListener("change", this.controlsChange);
+    this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
     this.viewer = viewer;
-
-    this._target = new THREE.Vector3();
-
-    this.quaternion = this.viewer.camera.quaternion.clone();
-    this.xRotation = new THREE.Quaternion();
-    this.yRotation = new THREE.Quaternion();
-
-    this.mouseStart = new THREE.Vector2();
-    this.mouseDelta = new THREE.Vector2();
-
-    this.xAxis = new THREE.Vector3();
-    this.yAxis = new THREE.Vector3();
-    this.zAxis = new THREE.Vector3();
-    this.yRotationAxis = new THREE.Vector3(1, 0, 0);
-    this.walkSpeed = 1;
-    this.boostSpeed = 5;
-    this.speed = new THREE.Vector3();
-    this._maxDistance = 1;
-
-    this.touchStartDistance = 0;
-
-    this.viewer.addEventListener("render", this.onRender);
-
-    this.viewer.addEventListener("contextmenu", this.onContextMenu);
-
-    this.viewer.addEventListener("mousedown", this.onMouseDown);
-    this.viewer.addEventListener("mouseup", this.onMouseUp);
-
-    this.viewer.addEventListener("touchstart", this.onTouchStart);
-    this.viewer.addEventListener("touchmove", this.onTouchMove);
-    this.viewer.addEventListener("touchend", this.onTouchEnd);
-
-    this.viewer.addEventListener("wheel", this.onMouseWheel);
-
-    document.addEventListener("keydown", this.onKeyDown);
-    document.addEventListener("keyup", this.onKeyUp);
+    this.viewer.on("render", this.viewerRender);
+    this.viewer.on("zoom", this.viewerZoom);
+    this.updateControls();
   }
 
-  dispose(): void {
-    this.viewer.removeEventListener("render", this.onRender);
-
-    this.viewer.removeEventListener("contextmenu", this.onContextMenu);
-
-    this.viewer.removeEventListener("mousedown", this.onMouseDown);
-    this.viewer.removeEventListener("mouseup", this.onMouseUp);
-    this.viewer.removeEventListener("mousemove", this.onMouseMove);
-
-    this.viewer.removeEventListener("touchstart", this.onTouchStart);
-    this.viewer.removeEventListener("touchmove", this.onTouchMove);
-    this.viewer.removeEventListener("touchend", this.onTouchEnd);
-
-    this.viewer.removeEventListener("wheel", this.onMouseWheel);
-
-    document.removeEventListener("keydown", this.onKeyDown);
-    document.removeEventListener("keyup", this.onKeyUp);
+  dispose() {
+    this.viewer.off("render", this.viewerRender);
+    this.viewer.off("zoom", this.viewerZoom);
+    this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+    this.controls.removeEventListener("change", this.controlsChange);
+    this.controls.dispose();
   }
 
-  onKeyDown = (event: KeyboardEvent) => {
-    switch (event.code) {
-      case "KeyW": // Forward
-        if (event.shiftKey) {
-          this.speed.z = this.walkSpeed * this.boostSpeed;
-        } else {
-          this.speed.z = this.walkSpeed;
-        }
-        break;
-      case "KeyS": // Backward
-        if (event.shiftKey) {
-          this.speed.z = -this.walkSpeed * this.boostSpeed;
-        } else {
-          this.speed.z = -this.walkSpeed;
-        }
-        break;
-      case "KeyA": // Left
-        if (event.shiftKey) {
-          this.speed.x = this.walkSpeed * this.boostSpeed;
-        } else {
-          this.speed.x = this.walkSpeed;
-        }
-        break;
-      case "KeyD": // Right
-        if (event.shiftKey) {
-          this.speed.x = -this.walkSpeed * this.boostSpeed;
-        } else {
-          this.speed.x = -this.walkSpeed;
-        }
-        break;
-      default:
-        break;
-    }
-  };
-
-  onKeyUp = (event: KeyboardEvent) => {
-    switch (event.code) {
-      case "KeyW":
-        this.speed.z = 0;
-        break;
-      case "KeyS":
-        this.speed.z = 0;
-        break;
-      case "KeyA":
-        this.speed.x = 0;
-        break;
-      case "KeyD":
-        this.speed.x = 0;
-        break;
-      default:
-        break;
-    }
-  };
-
-  onMouseDown = (event: PointerEvent) => {
-    const { clientX, clientY } = event;
-    this.mouseStart.set(clientX, clientY);
-    this.mouseDelta.set(0, 0);
-    this.quaternion.copy(this.viewer.camera.quaternion);
-    this.viewer.addEventListener("mousemove", this.onMouseMove);
-  };
-
-  onMouseMove = (event: MouseEvent) => {
-    const { clientX, clientY } = event;
-    this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
-    this.rotateCamera(this.mouseDelta);
-  };
-
-  onMouseUp = (event: PointerEvent) => {
-    this.speed.set(0, 0, 0);
-    this.mouseStart.set(0, 0);
-    this.mouseDelta.set(0, 0);
-    this.quaternion.copy(this.viewer.camera.quaternion);
-    this.viewer.removeEventListener("mousemove", this.onMouseMove);
-  };
-
-  onMouseWheel = (event: WheelEvent) => {
-    event.preventDefault();
-
-    if (-event.deltaY < 0) {
-      this.walkSpeed = Math.max(0.001, this.walkSpeed - 1);
-    } else if (-event.deltaY > 0) {
-      this.walkSpeed++;
-    }
+  updateControls = () => {
+    const size = this.viewer.extents.getSize(new Vector3());
+    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
   };
 
-  onContextMenu = (event: MouseEvent) => {
-    console.log(event);
-    event.preventDefault();
-    event.stopImmediatePropagation();
+  controlsChange = () => {
+    this.viewer.update();
   };
 
-  onTouchStart = (event: TouchEvent) => {
-    if (event.touches.length > 1) {
-      this.touchStartDistance = this.getTouchsDistance(event.touches);
-    } else {
-      const { clientX, clientY } = event.touches[0];
-      this.mouseStart.set(clientX, clientY);
-      this.mouseDelta.set(0, 0);
-      this.quaternion.copy(this.viewer.camera.quaternion);
-    }
+  walkspeedChange = (event: any) => {
+    this.viewer.emitEvent(event);
   };
 
-  onTouchEnd = (event: TouchEvent) => {
-    if (event.touches.length === 0) {
-      this.touchStartDistance = 0;
-    }
-    this.speed.set(0, 0, 0);
-    this.mouseStart.set(0, 0);
-    this.mouseDelta.set(0, 0);
-    this.quaternion.copy(this.viewer.camera.quaternion);
+  viewerRender = () => {
+    this.controls.update();
   };
 
-  onTouchMove = (event: TouchEvent) => {
-    if (event.touches.length === 1 && this.touchStartDistance === 0) {
-      const { clientX, clientY } = event.touches[0];
-      this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
-      this.rotateCamera(this.mouseDelta);
-    }
-    if (event.touches.length === 2) {
-      const distance = this.getTouchsDistance(event.touches);
-      this.speed.z = (distance - this.touchStartDistance) / 2;
-    }
+  viewerZoom = () => {
+    this.controls.rotateDelta.set(0, 0);
   };
-
-  getTouchsDistance(touches) {
-    const [start, end] = touches;
-    const dx = start.clientX - end.clientX;
-    const dy = start.clientY - end.clientY;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-    return distance;
-  }
-
-  onRender = (event: RenderEvent) => {
-    this.viewer.camera.matrix.extractBasis(this.xAxis, this.yAxis, this.zAxis);
-    this.viewer.camera.position.add(this.zAxis.multiplyScalar(-event.deltaTime * this.speed.z));
-    this.viewer.camera.position.add(this.xAxis.multiplyScalar(-event.deltaTime * this.speed.x));
-  };
-
-  update() {}
-
-  rotateCamera(delta: THREE.Vector2) {
-    const rotateX = (Math.PI * delta.x) / this.viewer.canvas.clientWidth;
-    const rotateY = (Math.PI * delta.y) / this.viewer.canvas.clientHeight;
-
-    const quaternion = this.quaternion.clone();
-    this.xRotation.setFromAxisAngle(this.viewer.camera.up, rotateX);
-    this.yRotation.setFromAxisAngle(this.yRotationAxis, rotateY);
-    quaternion.premultiply(this.xRotation).multiply(this.yRotation).normalize();
-
-    this.viewer.camera.setRotationFromQuaternion(quaternion);
-  }
 }

package/src/Viewer/draggers/ZoomDragger.ts

@@ -21,14 +21,15 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
+import { MOUSE } from "three";
+
 import { OrbitDragger } from "./OrbitDragger";
 import type { Viewer } from "../Viewer";
 
 export class ZoomDragger extends OrbitDragger {
   constructor(viewer: Viewer) {
     super(viewer);
-    this.mouseButtons = { LEFT: THREE.MOUSE.DOLLY, MIDDLE: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN };
-    this.touches = { ONE: THREE.TOUCH.DOLLY_PAN, TWO: THREE.TOUCH.DOLLY_PAN };
+    this.orbit.mouseButtons = { LEFT: MOUSE.DOLLY, MIDDLE: MOUSE.PAN, RIGHT: MOUSE.PAN };
+    // this.controls.touches = { ONE: TOUCH.DOLLY_PAN, TWO: TOUCH.DOLLY_PAN };
   }
 }