@inweb/viewer-three 26.9.1 → 26.9.3

package/src/Viewer/controls/FlyControls.ts

@@ -0,0 +1,205 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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, Controls, Quaternion, Vector2, Vector3 } from "three";
+
+interface FlyControlsEventMap {
+  change: { type: "change" };
+  flyspeedchange: { type: "flyspeedchange"; data: number };
+}
+
+export class FlyControls extends Controls<FlyControlsEventMap> {
+  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(camera, 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.domElement.addEventListener("pointerdown", this.onPointerDown);
+    this.domElement.addEventListener("pointermove", this.onPointerMove);
+    this.domElement.addEventListener("pointerup", this.onPointerUp);
+    this.domElement.addEventListener("pointercancel", this.onPointerCancel);
+    this.domElement.addEventListener("wheel", this.onWheel);
+
+    window.addEventListener("keydown", this.onKeyDown);
+    window.addEventListener("keyup", this.onKeyUp);
+  }
+
+  override dispose() {
+    this.domElement.removeEventListener("pointerdown", this.onPointerDown);
+    this.domElement.removeEventListener("pointermove", this.onPointerMove);
+    this.domElement.removeEventListener("pointerup", this.onPointerUp);
+    this.domElement.removeEventListener("pointercancel", this.onPointerCancel);
+    this.domElement.removeEventListener("wheel", this.onWheel);
+
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("keyup", this.onKeyUp);
+
+    super.dispose();
+  }
+
+  onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0) return;
+
+    this.domElement.setPointerCapture(event.pointerId);
+    this.downPosition.set(event.clientX, event.clientY);
+    this.quaternion.copy(this.object.quaternion);
+    this.mouseDragOn = true;
+  };
+
+  onPointerMove = (event: PointerEvent) => {
+    if (!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({ type: "change" });
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    this.domElement.releasePointerCapture(event.pointerId);
+    this.mouseDragOn = false;
+  };
+
+  onPointerCancel = (event: PointerEvent) => {
+    this.domElement.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: "flyspeedchange", data: this.multiplier });
+        }
+        break;
+
+      case "NumpadAdd":
+      case "Equal":
+        if (this.multiplier < 10) {
+          this.multiplier = this.multiplier + 1;
+          this.dispatchEvent({ type: "flyspeedchange", 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) => {
+    if (this.moveKeys.delete(event.code)) this.update();
+  };
+
+  override update() {
+    if (this.moveKeys.size > 0) {
+      const timeDelta = this.moveClock.getDelta();
+      const moveDelta = timeDelta * this.movementSpeed * this.multiplier;
+
+      if (this.moveKeys.has("KeyW")) this.object.translateZ(-moveDelta);
+      if (this.moveKeys.has("KeyS")) this.object.translateZ(moveDelta);
+
+      if (this.moveKeys.has("KeyA")) this.object.translateX(-moveDelta);
+      if (this.moveKeys.has("KeyD")) this.object.translateX(moveDelta);
+
+      if (this.moveKeys.has("KeyQ")) this.object.translateY(moveDelta);
+      if (this.moveKeys.has("KeyE")) this.object.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({ type: "change" });
+    }
+
+    if (this.moveWheel !== 0) {
+      const moveDelta = this.moveWheel * 0.0001 * this.movementSpeed * this.multiplier;
+
+      this.object.translateZ(-moveDelta);
+      this.moveWheel += -1 * Math.sign(this.moveWheel);
+      this.dispatchEvent({ type: "change" });
+    }
+
+    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.domElement.clientWidth;
+    const rotateY = (Math.PI * delta.y) / this.domElement.clientHeight;
+
+    const xRotation = new Quaternion();
+    xRotation.setFromAxisAngle(this.object.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.object.setRotationFromQuaternion(quaternion);
+  }
+}

package/src/Viewer/controls/WalkControls.ts

@@ -21,7 +21,10 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Clock, Camera, Controls, Quaternion, Vector2, Vector3 } from "three";
+import { Clock, Camera, Controls, Quaternion, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
+import { Viewer } from "../Viewer";
+import { IModelImpl } from "../models/IModelImpl";
+import { HighlighterComponent } from "../components/HighlighterComponent";
 
 interface WalkControlsEventMap {
   change: { type: "change" };
@@ -29,9 +32,18 @@ interface WalkControlsEventMap {
 }
 
 export class WalkControls extends Controls<WalkControlsEventMap> {
-  public movementSpeed = 0.2;
-  public lookSpeed = 5;
-  public multiplier = 5;
+  readonly EYE_HEIGHT = 1.7;
+  readonly FAILING_DISTANCE = 2;
+  readonly GROUND_FOLLOWING_SPEED = 0.05;
+  readonly LOOK_SPEED = 0.1;
+  readonly WALK_SPEED_DELIMITER = 4;
+  readonly WHEEL_SPEED_DELIMITER = 15000;
+
+  public movementSpeed = 0.1;
+  public multiplier = 3;
+
+  private raycaster: Raycaster;
+  private groundObjects: Object3D[];
 
   private moveKeys: Set<string>;
   private moveWheel = 0;
@@ -42,8 +54,19 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   private mouseDragOn = false;
   public rotateDelta: Vector2;
 
-  constructor(camera: Camera, canvas: HTMLElement) {
+  private camera: Camera;
+  private viewer: Viewer;
+  protected highlighter: HighlighterComponent;
+
+  constructor(camera: Camera, canvas: HTMLElement, groundObjects: Object3D[], viewer: Viewer) {
     super(camera, canvas);
+    this.camera = camera;
+    this.viewer = viewer;
+
+    this.groundObjects = groundObjects;
+    this.raycaster = new Raycaster();
+    this.raycaster.near = 0;
+    this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
 
     this.moveKeys = new Set();
     this.moveClock = new Clock();
@@ -147,37 +170,123 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     if (this.moveKeys.delete(event.code)) this.update();
   };
 
-  override update() {
-    if (this.moveKeys.size > 0) {
-      const timeDelta = this.moveClock.getDelta();
-      const moveDelta = timeDelta * this.movementSpeed * this.multiplier;
+  private updateGroundFollowing() {
+    this.raycaster.set(this.object.position, new Vector3(0, -1, 0));
+
+    this.raycaster.params = this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0 },
+      Line2: { threshold: 0 },
+      LOD: { threshold: 0 },
+      Points: { threshold: 0 },
+      Sprite: { threshold: 0 },
+    };
+
+    let intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+    if (intersects.length > 0) {
+      const groundY = intersects[0].point.y;
+      const targetY = groundY + this.EYE_HEIGHT;
+
+      // Smoothly interpolate the camera's y position to the target height
+      this.object.position.y = MathUtils.lerp(this.object.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+
+      // Only for debug
+      // const model = this.viewer.models[0];
+      // const handles = model.getHandlesByObjects(intersects[0].object);
+      // const objects = model.getObjectsByHandles(handles);
+      // this.viewer.clearSelected();
+      // this.select(objects, model);
+    }
+  }
+
+  select(objects: Object3D | Object3D[], model?: IModelImpl) {
+    if (!model) {
+      this.viewer.models.forEach((model) => this.select(objects, model));
+      return;
+    }
+
+    if (!Array.isArray(objects)) objects = [objects];
+    if (!objects.length) return;
 
-      if (this.moveKeys.has("KeyW")) this.object.translateZ(-moveDelta);
-      if (this.moveKeys.has("KeyS")) this.object.translateZ(moveDelta);
+    model.showOriginalObjects(objects);
+    this.highlighter.highlight(objects);
 
-      if (this.moveKeys.has("KeyA")) this.object.translateX(-moveDelta);
-      if (this.moveKeys.has("KeyD")) this.object.translateX(moveDelta);
+    objects.forEach((object: any) => this.viewer.selected.push(object));
+    objects.forEach((object: any) => (object.isSelected = true));
+  }
+
+  initHighlighter = () => {
+    this.highlighter = this.viewer.getComponent("HighlighterComponent") as HighlighterComponent;
+  };
 
-      if (this.moveKeys.has("KeyQ")) this.object.translateY(moveDelta);
-      if (this.moveKeys.has("KeyE")) this.object.translateY(-moveDelta);
+  override update() {
+    let moved = false;
+    let upgradeGroundFollowing = false;
+    const forward = new Vector3();
+    const sideways = new Vector3();
 
-      const lookDelta = this.lookSpeed + (this.multiplier - 1);
+    if (this.moveKeys.size > 0) {
+      upgradeGroundFollowing = true;
+      const timeDelta = this.moveClock.getDelta();
+      const moveDelta = (timeDelta * this.multiplier * this.movementSpeed) / this.WALK_SPEED_DELIMITER;
+
+      this.object.getWorldDirection(forward);
+      forward.y = 0;
+      forward.normalize();
+
+      sideways.setFromMatrixColumn(this.object.matrix, 0);
+      sideways.y = 0;
+      sideways.normalize();
+
+      if (this.moveKeys.has("KeyW")) {
+        this.object.position.addScaledVector(forward, moveDelta);
+      }
+      if (this.moveKeys.has("KeyS")) {
+        this.object.position.addScaledVector(forward, -moveDelta);
+      }
+
+      if (this.moveKeys.has("KeyA")) {
+        this.object.position.addScaledVector(sideways, -moveDelta);
+      }
+      if (this.moveKeys.has("KeyD")) {
+        this.object.position.addScaledVector(sideways, moveDelta);
+      }
+
+      if (this.moveKeys.has("KeyQ")) {
+        this.object.translateY(moveDelta);
+        upgradeGroundFollowing = false;
+      }
+      if (this.moveKeys.has("KeyE")) {
+        this.object.translateY(-moveDelta);
+        upgradeGroundFollowing = false;
+      }
+
+      const lookDelta = this.LOOK_SPEED + (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({ type: "change" });
+      moved = true;
     }
 
     if (this.moveWheel !== 0) {
-      const moveDelta = this.moveWheel * 0.0001 * this.movementSpeed * this.multiplier;
+      const moveDelta = (this.moveWheel * this.multiplier * this.movementSpeed) / this.WHEEL_SPEED_DELIMITER;
+
+      this.object.getWorldDirection(forward);
+      forward.y = 0;
+      forward.normalize();
+      this.object.position.addScaledVector(forward, -moveDelta);
 
-      this.object.translateZ(-moveDelta);
       this.moveWheel += -1 * Math.sign(this.moveWheel);
+      moved = true;
+    }
+
+    if (upgradeGroundFollowing) this.updateGroundFollowing();
+
+    if (moved) {
       this.dispatchEvent({ type: "change" });
     }
 

package/src/Viewer/draggers/FlyDragger.ts

@@ -0,0 +1,73 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, 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-2025 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 IDragger } from "@inweb/viewer-core";
+
+import type { Viewer } from "../Viewer";
+import { FlyControls } from "../controls/FlyControls";
+
+export class FlyDragger implements IDragger {
+  protected viewer: Viewer;
+  public controls: FlyControls;
+
+  constructor(viewer: Viewer) {
+    this.controls = new FlyControls(viewer.camera, viewer.canvas);
+    this.controls.addEventListener("change", this.controlsChange);
+    this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
+    this.viewer = viewer;
+    this.viewer.on("render", this.viewerRender);
+    this.viewer.on("zoom", this.viewerZoom);
+    this.updateControls();
+  }
+
+  dispose() {
+    this.viewer.off("render", this.viewerRender);
+    this.viewer.off("zoom", this.viewerZoom);
+    this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
+    this.controls.removeEventListener("change", this.controlsChange);
+    this.controls.dispose();
+  }
+
+  updateControls = () => {
+    const size = this.viewer.extents.getSize(new Vector3());
+    this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+  };
+
+  controlsChange = () => {
+    this.viewer.update();
+    this.viewer.emitEvent({ type: "changecamera" });
+  };
+
+  flyspeedChange = (event: any) => {
+    this.viewer.emitEvent(event);
+  };
+
+  viewerRender = () => {
+    this.controls.update();
+  };
+
+  viewerZoom = () => {
+    this.controls.rotateDelta.set(0, 0);
+  };
+}

package/src/Viewer/draggers/OrbitDragger.ts

@@ -81,6 +81,13 @@ export class OrbitDragger implements IDragger {
     this.viewer.update();
 
     switch (this.orbit.state) {
+      case STATE.ROTATE:
+      case STATE.TOUCH_ROTATE:
+        this.viewer.emitEvent({
+          type: "orbit",
+        });
+        break;
+
       case STATE.PAN:
       case STATE.TOUCH_PAN:
         this.viewer.emitEvent({
@@ -102,6 +109,8 @@ export class OrbitDragger implements IDragger {
         break;
     }
 
+    this.viewer.emitEvent({ type: "changecamera" });
+
     this.changed = true;
   };
 

package/src/Viewer/draggers/WalkDragger.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
+import { Mesh, Vector3 } from "three";
 import { type IDragger } from "@inweb/viewer-core";
 
 import type { Viewer } from "../Viewer";
@@ -32,7 +32,15 @@ export class WalkDragger implements IDragger {
   public controls: WalkControls;
 
   constructor(viewer: Viewer) {
-    this.controls = new WalkControls(viewer.camera, viewer.canvas);
+    const meshOnlyGround: Mesh[] = [];
+    viewer.models[0].getObjects().forEach((obj) => {
+      obj.traverse((child) => {
+        if (child instanceof Mesh) {
+          meshOnlyGround.push(child);
+        }
+      });
+    });
+    this.controls = new WalkControls(viewer.camera, viewer.canvas, meshOnlyGround, viewer);
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
     this.viewer = viewer;
@@ -56,6 +64,7 @@ export class WalkDragger implements IDragger {
 
   controlsChange = () => {
     this.viewer.update();
+    this.viewer.emitEvent({ type: "changecamera" });
   };
 
   walkspeedChange = (event: any) => {

package/src/Viewer/draggers/index.ts

@@ -30,6 +30,7 @@ import { MeasureLineDragger } from "./MeasureLineDragger";
 import { OrbitDragger } from "./OrbitDragger";
 import { PanDragger } from "./PanDragger";
 import { WalkDragger } from "./WalkDragger";
+import { FlyDragger } from "./FlyDragger";
 import { ZoomDragger } from "./ZoomDragger";
 
 /**
@@ -87,3 +88,4 @@ draggers.registerDragger("CuttingPlaneXAxis", (viewer) => new CuttingPlaneXAxisD
 draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new CuttingPlaneYAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new CuttingPlaneZAxisDragger(viewer));
 draggers.registerDragger("Walk", (viewer) => new WalkDragger(viewer));
+draggers.registerDragger("Fly", (viewer) => new FlyDragger(viewer));

package/src/Viewer/helpers/WCSHelper.ts

@@ -28,9 +28,9 @@ export class WCSHelper extends Object3D {
     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 matRed = new MeshBasicMaterial({ toneMapped: false, color: "#dd0000" });
+    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00dd00" });
+    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000dd" });
 
     const spriteRed = this.getSpriteMaterial(matRed.color, "X");
     const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");