@inweb/viewer-three 25.9.7 → 25.10.0

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -21,10 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { IComponent } from "../IComponent";
+import { IDisposable } from "../IDisposable";
 import type { Viewer } from "../Viewer";
 
-export class ResizeCanvasComponent implements IComponent {
+export class ResizeCanvasComponent implements IDisposable {
   protected viewer: Viewer;
   protected resizeObserver: ResizeObserver;
 

package/src/Viewer/components/SelectionComponent.ts

@@ -0,0 +1,132 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Intersection, MeshBasicMaterial, Object3D, Raycaster, Vector2 } from "three";
+
+import { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+
+export class SelectionComponent implements IDisposable {
+  protected viewer: Viewer;
+  protected raycaster: Raycaster;
+  protected downPosition: Vector2;
+  protected facesMaterial: MeshBasicMaterial;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.raycaster = new Raycaster();
+    this.downPosition = new Vector2();
+
+    const { facesColor, facesTransparancy } = this.viewer.options;
+    this.facesMaterial = new MeshBasicMaterial();
+    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+    this.facesMaterial.transparent = true;
+
+    this.viewer.addEventListener("pointerdown", this.onPointerDown);
+    this.viewer.addEventListener("pointerup", this.onPointerUp);
+    this.viewer.addEventListener("dblclick", this.onDoubleClick);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+  }
+
+  dispose() {
+    this.facesMaterial.dispose();
+
+    this.viewer.removeEventListener("pointerdown", this.onPointerDown);
+    this.viewer.removeEventListener("pointerup", this.onPointerUp);
+    this.viewer.removeEventListener("dblclick", this.onDoubleClick);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+  }
+
+  onPointerDown = (event: PointerEvent) => {
+    if (!event.isPrimary || event.button !== 0) return;
+
+    this.getMousePosition(event, this.downPosition);
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    if (!event.isPrimary) return;
+
+    const upPosition = this.getMousePosition(event, new Vector2());
+    if (this.downPosition.distanceTo(upPosition) !== 0) return;
+
+    const intersects = this.getPointerIntersects(upPosition);
+
+    this.clearSelection();
+    if (intersects.length > 0) this.select(intersects[0].object);
+
+    this.viewer.update();
+    this.viewer.emitEvent({ type: "select", data: undefined, handles: this.viewer.getSelected() });
+  };
+
+  onDoubleClick = (event: MouseEvent) => {
+    if (event.button !== 0) return;
+
+    this.viewer.executeCommand("zoomToSelected");
+  };
+
+  getMousePosition(event: MouseEvent, position: Vector2): Vector2 {
+    const rect = this.viewer.canvas.getBoundingClientRect();
+
+    position.setX((event.clientX - rect.left) / rect.width);
+    position.setY((event.clientY - rect.top) / rect.height);
+
+    return position;
+  }
+
+  getPointerIntersects(position: Vector2): Array<Intersection<Object3D>> {
+    const mouse = new Vector2(position.x * 2 - 1, -(position.y * 2) + 1);
+    this.raycaster.setFromCamera(mouse, this.viewer.camera);
+
+    const objects = [];
+    this.viewer.scene.traverseVisible((child) => objects.push(child));
+
+    return this.raycaster.intersectObjects(objects, false);
+  }
+
+  select(object: any) {
+    if (object.isSelected) return;
+
+    object.isSelected = true;
+    object.originalMaterial = object.material;
+    object.material = this.facesMaterial;
+
+    this.viewer.selected.push(object);
+  }
+
+  clearSelection() {
+    this.viewer.selected.forEach((object: any) => {
+      object.isSelected = false;
+      object.material = object.originalMaterial;
+    });
+    this.viewer.selected.length = 0;
+  }
+
+  optionsChange = () => {
+    const { facesColor, facesTransparancy } = this.viewer.options;
+    this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+    this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+
+    this.viewer.update();
+  };
+}

package/src/Viewer/components/ViewPositionComponent.ts

@@ -0,0 +1,165 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Euler, Quaternion, Object3D, Vector3 } from "three";
+
+import { CommandEvent, RenderEvent } from "@inweb/viewer-core";
+import { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+
+export const defaultViewPositions = {
+  top: new Vector3(0, 0, 1),
+  bottom: new Vector3(0, 0, -1),
+  left: new Vector3(-1, 0, 0),
+  right: new Vector3(1, 0, 0),
+  front: new Vector3(0, 1, 0),
+  back: new Vector3(0, -1, 0),
+  sw: new Vector3(-0.5, -0.5, 1.0).normalize(),
+  se: new Vector3(0.5, -0.5, 1.0).normalize(),
+  ne: new Vector3(0.5, 0.5, 1.0).normalize(),
+  nw: new Vector3(-0.5, 0.5, 1.0).normalize(),
+};
+
+export class ViewPositionComponent implements IDisposable {
+  private position: string;
+  private center: Vector3;
+  private targetPosition: Vector3;
+  private targetQuaternion: Quaternion;
+  private radius: number;
+  private q1: Quaternion;
+  private q2: Quaternion;
+  private animating: boolean;
+  private viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.animating = false;
+    // this.center = new THREE.Vector3();
+    this.targetPosition = new Vector3();
+    this.targetQuaternion = new Quaternion();
+    this.q1 = new Quaternion();
+    this.q2 = new Quaternion();
+    this.viewer = viewer;
+    this.viewer.addEventListener("render", this.onRender);
+    this.viewer.addEventListener("command", this.onCommand);
+
+    console.log("--- ViewPositionComponent.constructor");
+  }
+
+  dispose() {
+    this.viewer.off("render", this.onRender);
+    this.viewer.off("viewposition", this.onCommand);
+
+    console.log("--- ViewPositionComponent.dispose");
+  }
+
+  onCommand = (event: CommandEvent) => {
+    if (this.animating) return;
+
+    this.position = event.data === "setDefaultViewPosition" ? event.args[0] : event.data;
+
+    console.log("--- ViewPositionComponent:onCommand", this.position);
+
+    switch (this.position) {
+      case "left":
+        this.targetPosition.set(-1, 0, 0);
+        this.targetQuaternion.setFromEuler(new Euler(0, -Math.PI * 0.5, 0));
+        break;
+
+      case "right":
+        this.targetPosition.set(1, 0, 0);
+        this.targetQuaternion.setFromEuler(new Euler(0, Math.PI * 0.5, 0));
+        break;
+
+      case "front":
+        this.targetPosition.set(0, 1, 0);
+        this.targetQuaternion.setFromEuler(new Euler(-Math.PI * 0.5, 0, 0));
+        // this.targetQuaternion.setFromEuler(new Euler(Math.PI * 0.5, 0, 0));
+        break;
+
+      case "back":
+        this.targetPosition.set(0, -1, 0);
+        this.targetQuaternion.setFromEuler(new Euler(Math.PI * 0.5, 0, 0));
+        break;
+
+      case "top":
+      default:
+        this.targetPosition.set(0, 0, 1);
+        this.targetQuaternion.setFromEuler(new Euler());
+        break;
+
+      case "bottom":
+        this.targetPosition.set(0, 0, -1);
+        this.targetQuaternion.setFromEuler(new Euler(0, Math.PI, 0));
+        break;
+    }
+
+    this.center = this.viewer.extents.getCenter(new Vector3());
+
+    this.radius = this.viewer.camera.position.distanceTo(this.center);
+    this.targetPosition.multiplyScalar(this.radius).add(this.center);
+
+    const dummy = new Object3D();
+    dummy.position.copy(this.center);
+
+    dummy.lookAt(this.viewer.camera.position);
+    this.q1.copy(dummy.quaternion);
+
+    dummy.lookAt(this.targetPosition);
+    this.q2.copy(dummy.quaternion);
+
+    this.animating = true;
+
+    // this.viewer.camera.position.set(0, 0, 1).applyQuaternion(this.q2).multiplyScalar(this.radius).add(this.center);
+    // this.viewer.camera.quaternion.copy(this.targetQuaternion);
+    // this.viewer.camera.updateProjectionMatrix();
+
+    this.viewer.update();
+  };
+
+  onRender = (event: RenderEvent) => {
+    if (!this.animating) return;
+
+    const turnRate = 2 * Math.PI; // turn rate in angles per second
+    const step = (event.deltaTime * turnRate) / 10;
+
+    // animate position by doing a slerp and then scaling the position on the unit sphere
+    this.q1.rotateTowards(this.q2, step);
+    this.viewer.camera.position.set(0, 0, 1).applyQuaternion(this.q1).multiplyScalar(this.radius).add(this.center);
+
+    // animate orientation
+    this.viewer.camera.quaternion.rotateTowards(this.targetQuaternion, step);
+
+    this.viewer.update();
+
+    if (this.q1.angleTo(this.q2) === 0) {
+      this.animating = false;
+
+      // console.log("--- ViewPositionComponent.onRender", event.deltaTime, step, this.animating);
+
+      this.viewer.emit({ type: "viewposition", data: this.position });
+      return;
+    }
+
+    // console.log("--- ViewPositionComponent.onRender", event.deltaTime, step, this.animating);
+  };
+}

package/src/Viewer/components/WCSHelperComponent.ts

@@ -0,0 +1,46 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { IDisposable } from "../IDisposable";
+import type { Viewer } from "../Viewer";
+import { WCSHelper } from "../helpers/WCSHelper";
+
+export class WCSHelperComponent implements IDisposable {
+  private wcsHelper: WCSHelper;
+  private viewer: Viewer;
+
+  constructor(viewer: Viewer) {
+    this.wcsHelper = new WCSHelper(viewer.camera);
+    this.viewer = viewer;
+    this.viewer.addEventListener("render", this.viewerRender);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("render", this.viewerRender);
+    this.wcsHelper.dispose();
+  }
+
+  viewerRender = () => {
+    if (!this.viewer.extents.isEmpty()) this.wcsHelper.render(this.viewer.renderer);
+  };
+}

package/src/Viewer/controls/WalkControls.ts

@@ -0,0 +1,221 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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);
+  }
+}