@inweb/viewer-three 25.3.15

package/src/ThreejsViewer/components/RenderLoopComponent.ts

@@ -0,0 +1,44 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { IComponent } from "../IComponent";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class RenderLoopComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+  protected requestID: number;
+
+  constructor(viewer: ThreejsViewer) {
+    this.viewer = viewer;
+    this.animate();
+  }
+
+  dispose() {
+    cancelAnimationFrame(this.requestID);
+  }
+
+  animate = (time = 0) => {
+    this.requestID = requestAnimationFrame(this.animate);
+    this.viewer.render(time);
+  };
+}

package/src/ThreejsViewer/components/ResizeCanvasComponent.ts

@@ -0,0 +1,53 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { IComponent } from "../IComponent";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class ResizeCanvasComponent implements IComponent {
+  protected viewer: ThreejsViewer;
+  protected resizeObserver: ResizeObserver;
+
+  constructor(viewer: ThreejsViewer) {
+    this.viewer = viewer;
+    this.resizeObserver = new ResizeObserver(this.resizeViewer);
+    this.resizeObserver.observe(viewer.canvas.parentElement);
+  }
+
+  dispose() {
+    this.resizeObserver.disconnect();
+  }
+
+  resizeViewer = (entries: ResizeObserverEntry[]) => {
+    const { width, height } = entries[0].contentRect;
+
+    if (!width || !height) return; // <- invisible viewer, or viewer with parent removed
+
+    this.viewer.camera.aspect = width / height;
+    this.viewer.camera.updateProjectionMatrix();
+    this.viewer.renderer.setSize(width, height, true);
+
+    this.viewer.update(true);
+    this.viewer.emitEvent({ type: "resize", width, height });
+  };
+}

package/src/ThreejsViewer/draggers/ClippingPlaneDragger.ts

@@ -0,0 +1,120 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 * as THREE from "three";
+
+export class ClippingPlaneDragger {
+  protected viewer: any;
+  protected start: THREE.Vector3;
+  protected end: THREE.Vector3;
+  protected delta: THREE.Vector3;
+  protected planeHelper: THREE.PlaneHelper;
+
+  public plane: THREE.Plane;
+
+  constructor(viewer: any) {
+    this.viewer = viewer;
+
+    this.viewer.addEventListener("pointerdown", this.onPointerDown);
+    this.viewer.addEventListener("pointerup", this.onPointerUp);
+
+    this.plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+
+    this.start = new THREE.Vector3();
+    this.end = new THREE.Vector3();
+    this.delta = new THREE.Vector3();
+    if (!this.viewer.renderer.clippingPlanes) this.viewer.renderer.clippingPlanes = [];
+
+    this.viewer.renderer.clippingPlanes.push(this.plane);
+
+    this.planeHelper = new THREE.PlaneHelper(this.plane, 150, 0xffff00);
+    this.viewer.scene.add(this.planeHelper);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("pointerdown", this.onPointerDown);
+    this.viewer.removeEventListener("pointerup", this.onPointerUp);
+    this.viewer.removeEventListener("pointermove", this.onPointerMove);
+
+    this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane) => this.plane !== plane);
+
+    this.planeHelper.removeFromParent();
+  }
+
+  onPointerDown = (event: PointerEvent) => {
+    this.viewer.addEventListener("pointermove", this.onPointerMove);
+
+    const { offsetX, offsetY } = event;
+    this.start.set(offsetX, offsetY, 0.5);
+    this.start = this.screenToPlane(this.start);
+    this.delta.set(0, 0, 0);
+    this.end.set(0, 0, 0);
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    this.viewer.removeEventListener("pointermove", this.onPointerMove);
+
+    if (this.end.length() === 0) {
+      const plane: THREE.Plane = this.plane;
+      plane.normal.multiplyScalar(-1);
+      plane.constant *= -1;
+    } else {
+      const { offsetX, offsetY } = event;
+      this.end.set(offsetX, offsetY, 0.5);
+      this.end = this.screenToPlane(this.end);
+    }
+  };
+
+  onPointerMove = (event: PointerEvent) => {
+    const { offsetX, offsetY } = event;
+    this.end.set(offsetX, offsetY, 0.5);
+    this.end = this.screenToPlane(this.end);
+    this.delta.copy(this.end).sub(this.start);
+    this.start.copy(this.end);
+
+    const plane: THREE.Plane = this.plane;
+    plane.translate(this.delta);
+  };
+
+  update() {}
+
+  screenToWorld(v: THREE.Vector3) {
+    v.x = (2 * v.x) / this.viewer.canvas.clientWidth - 1;
+    v.y = 1 - (2 * v.y) / this.viewer.canvas.clientHeight;
+    return v.unproject(this.viewer.camera);
+  }
+
+  screenToPlane(v: THREE.Vector3) {
+    v = this.screenToWorld(v);
+    const direction = v.sub(this.viewer.camera.position).normalize();
+    const ray = new THREE.Ray(this.viewer.camera.position, direction);
+    let plane: THREE.Plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+    const dot = plane.normal.dot(this.plane.normal);
+    if (Math.abs(dot) === 1) {
+      plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
+    }
+    const result = new THREE.Vector3();
+    ray.intersectPlane(plane, result);
+    return result;
+  }
+}

package/src/ThreejsViewer/draggers/OrbitDragger.ts

@@ -0,0 +1,61 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { GeometryEndEvent } from "@inweb/viewer-core";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class OrbitDragger extends OrbitControls {
+  private viewer: ThreejsViewer;
+
+  constructor(viewer: ThreejsViewer) {
+    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.viewer = viewer;
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.addEventListener("change", this.updateViewer);
+  }
+
+  override dispose() {
+    this.removeEventListener("change", this.updateViewer);
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    super.dispose();
+  }
+
+  geometryEnd = (event: GeometryEndEvent) => {
+    const { data: scene } = event;
+    const box = new THREE.Box3().setFromObject(scene);
+    const size = box.getSize(new THREE.Vector3()).length();
+
+    this.maxDistance = size * 10;
+    this.update();
+  };
+
+  updateViewer = () => {
+    this.viewer.update();
+  };
+}

package/src/ThreejsViewer/draggers/PanDragger.ts

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 * as THREE from "three";
+import { OrbitDragger } from "./OrbitDragger";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class PanDragger extends OrbitDragger {
+  constructor(viewer: ThreejsViewer) {
+    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 };
+  }
+}

package/src/ThreejsViewer/draggers/WalkDragger.ts

@@ -0,0 +1,260 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 { RenderEvent } from "@inweb/viewer-core";
+import * as THREE from "three";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class WalkDragger {
+  protected viewer: ThreejsViewer;
+  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;
+
+  constructor(viewer: ThreejsViewer) {
+    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);
+  }
+
+  dispose() {
+    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);
+  }
+
+  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++;
+    }
+  };
+
+  onContextMenu = (event: MouseEvent) => {
+    console.log(event);
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+
+  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);
+    }
+  };
+
+  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);
+  };
+
+  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;
+    }
+  };
+
+  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/ThreejsViewer/draggers/ZoomDragger.ts

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2023, 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-2021 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 * as THREE from "three";
+import { OrbitDragger } from "./OrbitDragger";
+import type { ThreejsViewer } from "../ThreejsViewer";
+
+export class ZoomDragger extends OrbitDragger {
+  constructor(viewer: ThreejsViewer) {
+    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 };
+  }
+}