@inweb/viewer-three 25.9.8 → 25.11.0

package/src/Viewer/controls/WalkControls.ts

@@ -0,0 +1,222 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Clock, Camera, EventDispatcher, Quaternion, Vector2, Vector3 } from "three";
+
+const _changeEvent = { type: "change" };
+
+export class WalkControls extends EventDispatcher {
+  public camera: Camera;
+  public canvas: HTMLElement;
+
+  public movementSpeed = 0.2;
+  public lookSpeed = 5;
+  public multiplier = 5;
+
+  private moveKeys: Set<string>;
+  private moveWheel = 0;
+  private moveClock: Clock;
+
+  private quaternion: Quaternion;
+  private downPosition: Vector2;
+  private mouseDragOn = false;
+  public rotateDelta: Vector2;
+
+  constructor(camera: Camera, canvas: HTMLElement) {
+    super();
+
+    this.camera = camera;
+    this.canvas = canvas;
+
+    this.moveKeys = new Set();
+    this.moveClock = new Clock();
+
+    this.quaternion = camera.quaternion.clone();
+    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);
+
+    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);
+
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("keyup", this.onKeyUp);
+  }
+
+  onPointerDown = (event: PointerEvent) => {
+    if (!event.isPrimary || event.button !== 0) return;
+
+    this.canvas.setPointerCapture(event.pointerId);
+    this.downPosition.set(event.clientX, event.clientY);
+    this.quaternion.copy(this.camera.quaternion);
+    this.mouseDragOn = true;
+  };
+
+  onPointerMove = (event: PointerEvent) => {
+    if (!event.isPrimary || !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);
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    if (!event.isPrimary || event.button !== 0) return;
+
+    this.canvas.releasePointerCapture(event.pointerId);
+    this.mouseDragOn = false;
+  };
+
+  onPointerCancel = (event: PointerEvent) => {
+    this.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+  };
+
+  onWheel = (event: WheelEvent) => {
+    this.moveWheel = event.deltaY;
+    this.update();
+  };
+
+  onKeyDown = (event: KeyboardEvent) => {
+    switch (event.code) {
+      case "NumpadSubtract":
+      case "Minus":
+        if (this.multiplier > 1) {
+          this.multiplier = this.multiplier - 1;
+          this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+        }
+        break;
+
+      case "NumpadAdd":
+      case "Equal":
+        if (this.multiplier < 10) {
+          this.multiplier = this.multiplier + 1;
+          this.dispatchEvent({ type: "walkspeedchange", data: this.multiplier });
+        }
+        break;
+
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "ArrowUp":
+      case "ArrowDown":
+      case "KeyW":
+      case "KeyS":
+      case "KeyA":
+      case "KeyD":
+      case "KeyQ":
+      case "KeyE":
+        this.moveKeys.add(event.code);
+        this.update();
+        break;
+    }
+  };
+
+  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;
+    }
+  };
+
+  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("KeyA")) this.camera.translateX(-moveDelta);
+      if (this.moveKeys.has("KeyD")) this.camera.translateX(moveDelta);
+
+      if (this.moveKeys.has("KeyQ")) this.camera.translateY(moveDelta);
+      if (this.moveKeys.has("KeyE")) this.camera.translateY(-moveDelta);
+
+      const lookDelta = this.lookSpeed + (this.multiplier - 1);
+
+      if (this.moveKeys.has("ArrowUp")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, -lookDelta / 2)));
+      if (this.moveKeys.has("ArrowDown")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, lookDelta / 2)));
+
+      if (this.moveKeys.has("ArrowLeft")) this.rotateCamera(this.rotateDelta.add(new Vector2(lookDelta, 0)));
+      if (this.moveKeys.has("ArrowRight")) this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
+
+      this.moveWheel = 0;
+      this.dispatchEvent(_changeEvent);
+    }
+
+    if (this.moveWheel !== 0) {
+      const moveDelta = this.moveWheel * 0.0001 * this.movementSpeed * this.multiplier;
+
+      this.camera.translateZ(-moveDelta);
+      this.moveWheel += -1 * Math.sign(this.moveWheel);
+      this.dispatchEvent(_changeEvent);
+    }
+
+    if (this.moveKeys.size === 0 && this.moveWheel === 0) {
+      this.moveClock.stop();
+      this.moveClock.autoStart = true;
+    }
+  }
+
+  rotateCamera(delta: Vector2) {
+    const rotateX = (Math.PI * delta.x) / this.canvas.clientWidth;
+    const rotateY = (Math.PI * delta.y) / this.canvas.clientHeight;
+
+    const xRotation = new Quaternion();
+    xRotation.setFromAxisAngle(this.camera.up, rotateX);
+
+    const yRotation = new Quaternion();
+    yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
+
+    const quaternion = this.quaternion.clone();
+    quaternion.premultiply(xRotation).multiply(yRotation).normalize();
+
+    this.camera.setRotationFromQuaternion(quaternion);
+  }
+}

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,88 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { GeometryEndEvent } from "@inweb/viewer-core";
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { MOUSE, TOUCH } from "three";
+
+import type { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
+import { OrbitControls, STATE } from "../controls/OrbitControls.js";
 
-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("geometryend", this.updateControls);
+    this.viewer.off("viewposition", this.updateControls);
+    this.viewer.off("zoom", this.updateControls);
+    this.viewer.off("contextmenu", this.stopContextMenu);
+
+    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();
+
+    switch (this.orbit.state) {
+      case STATE.PAN:
+      case STATE.TOUCH_PAN:
+        this.viewer.emitEvent({
+          type: "pan",
+          x: this.orbit.panEnd.x,
+          y: this.orbit.panEnd.y,
+          dX: this.orbit.panDelta.x,
+          dY: this.orbit.panDelta.y,
+        });
+        break;
+
+      case STATE.DOLLY:
+        this.viewer.emitEvent({
+          type: "zoomat",
+          data: this.orbit.dollyScale,
+          x: this.orbit.dollyEnd.x,
+          y: this.orbit.dollyEnd.y,
+        });
+        break;
+    }
+
+    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 };
   }
 }