@inweb/viewer-three 25.9.8 → 25.11.0

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 };
   }
 }

package/src/Viewer/helpers/PlaneHelper.ts

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 {
+  BufferGeometry,
+  DoubleSide,
+  Float32BufferAttribute,
+  Line,
+  LineBasicMaterial,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  Vector3,
+} from "three";
+
+class PlaneHelper extends Line {
+  public plane: Plane;
+  public size: number;
+  public offset: Vector3;
+  public helper: Object3D;
+
+  constructor(plane: Plane, size = 1, color = 0xffff00, offset: Vector3 = new Vector3()) {
+    // const positions = [1, -1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+    const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+    geometry.computeBoundingSphere();
+
+    super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
+
+    (this as any).type = "PlaneHelper";
+
+    this.plane = plane;
+    this.size = size;
+    this.offset = offset;
+
+    const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
+
+    const geometry2 = new BufferGeometry();
+    geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
+    geometry2.computeBoundingSphere();
+
+    this.helper = new Mesh(
+      geometry2,
+      new MeshBasicMaterial({
+        color,
+        opacity: 0.2,
+        transparent: true,
+        depthWrite: false,
+        toneMapped: false,
+        side: DoubleSide,
+      })
+    );
+    this.add(this.helper);
+  }
+
+  dispose() {
+    this.geometry.dispose();
+    (this.material as any).dispose();
+    (this.children[0] as any).geometry.dispose();
+    (this.children[0] as any).material.dispose();
+  }
+
+  override updateMatrixWorld(force: boolean) {
+    this.position.set(0, 0, 0);
+    this.lookAt(this.plane.normal);
+
+    this.position.copy(this.offset);
+    this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
+
+    this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
+
+    super.updateMatrixWorld(force);
+  }
+}
+
+export { PlaneHelper };

package/src/Viewer/helpers/WCSHelper.ts

@@ -0,0 +1,119 @@
+import {
+  Camera,
+  CylinderGeometry,
+  CanvasTexture,
+  Color,
+  Mesh,
+  MeshBasicMaterial,
+  Object3D,
+  OrthographicCamera,
+  Sprite,
+  SpriteMaterial,
+  SRGBColorSpace,
+  Vector4,
+  WebGLRenderer,
+} from "three";
+
+export class WCSHelper extends Object3D {
+  private camera: Camera;
+  private orthoCamera: OrthographicCamera;
+  public size: number;
+
+  constructor(camera: Camera) {
+    super();
+
+    this.camera = camera;
+    this.size = 160;
+
+    this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
+    this.orthoCamera.position.set(0, 0, 2);
+
+    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#aa0000" });
+    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00aa00" });
+    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000aa" });
+
+    const spriteRed = this.getSpriteMaterial(matRed.color, "X");
+    const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
+    const spriteBlue = this.getSpriteMaterial(matBlue.color, "Z");
+
+    const lineGeometry = new CylinderGeometry(0.01, 0.01, 1, 3);
+    lineGeometry.translate(0, 0.5, 0);
+
+    const arrowGeometry = new CylinderGeometry(0, 0.1, 0.25, 12);
+    arrowGeometry.translate(0, 0.625, 0);
+
+    const axesMap = {
+      X: [
+        [new Mesh(arrowGeometry, matRed), [0.5, 0, 0], [0, 0, -Math.PI / 2]],
+        [new Mesh(lineGeometry, matRed), [0, 0, 0], [0, 0, -Math.PI / 2]],
+        [new Sprite(spriteRed), [1.55, 0, 0]],
+      ],
+      Y: [
+        [new Mesh(arrowGeometry, matGreen), [0, 0.5, 0], null],
+        [new Mesh(lineGeometry, matGreen), null, null],
+        [new Sprite(spriteGreen), [0, 1.55, 0]],
+      ],
+      Z: [
+        [new Mesh(arrowGeometry, matBlue), [0, 0, 0.5], [Math.PI / 2, 0, 0]],
+        [new Mesh(lineGeometry, matBlue), null, [Math.PI / 2, 0, 0]],
+        [new Sprite(spriteBlue), [0, 0, 1.55]],
+      ],
+    };
+
+    Object.keys(axesMap).forEach((key) => {
+      axesMap[key].forEach((objects: any) => {
+        const object = objects[0];
+        const position = objects[1];
+        const rotation = objects[2];
+
+        object.name = key;
+        if (position) object.position.set(position[0], position[1], position[2]);
+        if (rotation) object.rotation.set(rotation[0], rotation[1], rotation[2]);
+        object.updateMatrixWorld();
+
+        this.add(object);
+      });
+    });
+  }
+
+  dispose() {
+    this.traverse((object: any) => {
+      if (object.geometry) object.geometry.dispose();
+      if (object.material) object.material.dispose();
+    });
+  }
+
+  getSpriteMaterial(color: Color, text: string) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 64;
+    canvas.height = 64;
+
+    const context = canvas.getContext("2d");
+    context.clearRect(0, 0, 64, 64);
+    context.font = "24px Arial";
+    context.textAlign = "center";
+    context.fillStyle = color.getStyle();
+    context.fillText(text, 32, 41);
+
+    const texture = new CanvasTexture(canvas);
+    texture.colorSpace = SRGBColorSpace;
+
+    return new SpriteMaterial({ map: texture, toneMapped: false });
+  }
+
+  render(renderer: WebGLRenderer) {
+    this.quaternion.copy(this.camera.quaternion).invert();
+    this.updateMatrixWorld();
+
+    const clippingPlanes = renderer.clippingPlanes;
+    const viewport = renderer.getViewport(new Vector4());
+
+    renderer.setViewport(this.position.x, this.position.y, this.size, this.size);
+    renderer.clippingPlanes = [];
+    renderer.clearDepth();
+    renderer.render(this, this.orthoCamera);
+
+    renderer.setViewport(viewport);
+    renderer.clippingPlanes = clippingPlanes;
+  }
+}

package/src/Viewer/loaders/GLTFLoadingManager.ts

@@ -21,17 +21,17 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import * as THREE from "three";
+import { LoadingManager, LoaderUtils } from "three";
 
-export class GLTFLoadingManager extends THREE.LoadingManager {
+export class GLTFLoadingManager extends LoadingManager {
   public path = "";
   public resourcePath = "";
   public fileURL = "";
   public dataURLs = new Map();
 
   constructor(
-    file: string | ArrayBuffer | Blob,
-    externalData: Map<string, string | ArrayBuffer | Blob> = new Map(),
+    file: string | globalThis.File | ArrayBuffer | Blob,
+    externalData: Map<string, string | File | ArrayBuffer | Blob> = new Map(),
     params: { path?: string } = {}
   ) {
     super();
@@ -40,7 +40,7 @@ export class GLTFLoadingManager extends THREE.LoadingManager {
 
     if (typeof file === "string") {
       this.fileURL = file;
-      this.resourcePath = THREE.LoaderUtils.extractUrlBase(file);
+      this.resourcePath = LoaderUtils.extractUrlBase(file);
     } else {
       externalData.forEach((value, key) => (this.fileURL = value === file ? key : this.fileURL));
       externalData.set(this.fileURL, file);
@@ -63,7 +63,7 @@ export class GLTFLoadingManager extends THREE.LoadingManager {
     });
   }
 
-  dispose(): void {
+  dispose() {
     this.dataURLs.forEach(URL.revokeObjectURL);
   }
 }

package/src/index.ts

@@ -21,5 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+import "./Viewer/commands";
+
 export * from "@inweb/viewer-core";
 export { Viewer } from "./Viewer/Viewer";

package/lib/Viewer/IComponent.d.ts

@@ -1,3 +0,0 @@
-export interface IComponent {
-    dispose(): void;
-}

package/lib/Viewer/components/ObjectSelectionComponent.d.ts

@@ -1,16 +0,0 @@
-import * as THREE from "three";
-import { IComponent } from "../IComponent";
-import type { Viewer } from "../Viewer";
-export declare class ObjectSelectionComponent implements IComponent {
-    protected viewer: Viewer;
-    protected raycaster: THREE.Raycaster;
-    protected mouse: THREE.Vector2;
-    protected selectionMaterial: THREE.MeshBasicMaterial;
-    constructor(viewer: Viewer);
-    dispose(): void;
-    onPointerUp: (event: PointerEvent) => void;
-    onPointerDown: (event: PointerEvent) => void;
-    clearSelection(): void;
-    setSelectObject(object: any, selected: any): void;
-    highlightObject(object: any, enable: any): void;
-}

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

@@ -1,17 +0,0 @@
-import * as THREE from "three";
-export declare class ClippingPlaneDragger {
-    protected viewer: any;
-    protected start: THREE.Vector3;
-    protected end: THREE.Vector3;
-    protected delta: THREE.Vector3;
-    protected planeHelper: THREE.PlaneHelper;
-    plane: THREE.Plane;
-    constructor(viewer: any);
-    dispose(): void;
-    onPointerDown: (event: PointerEvent) => void;
-    onPointerUp: (event: PointerEvent) => void;
-    onPointerMove: (event: PointerEvent) => void;
-    update(): void;
-    screenToWorld(v: THREE.Vector3): THREE.Vector3;
-    screenToPlane(v: THREE.Vector3): THREE.Vector3;
-}

package/src/Viewer/IComponent.ts

@@ -1,3 +0,0 @@
-export interface IComponent {
-  dispose(): void;
-}