@inweb/viewer-three 26.10.3 → 26.10.5

package/lib/Viewer/controls/JoyStickControls.d.ts

@@ -0,0 +1,44 @@
+import { Camera, Controls, Object3D } from "three";
+interface JoyStickControlsEventMap {
+    change: {
+        type: "change";
+    };
+}
+export declare class JoyStickControls extends Controls<JoyStickControlsEventMap> {
+    readonly EYE_HEIGHT = 1.7;
+    readonly FAILING_DISTANCE = 2;
+    readonly GROUND_FOLLOWING_SPEED = 0.05;
+    readonly WALK_SPEED_DELIMITER = 4;
+    movementSpeed: number;
+    multiplier: number;
+    private raycaster;
+    private groundObjects;
+    private canvas;
+    private overlayElement;
+    private joyStickCanvas;
+    private context;
+    private moveClock;
+    private camera;
+    private joyStickPosition;
+    private isActive;
+    private readonly MAX_JOYSTICK_DISTANCE;
+    private readonly INTERNAL_RADIUS;
+    private readonly MAX_MOVE_STICK;
+    private readonly EXTERNAL_RADIUS;
+    private readonly CANVAS_SIZE;
+    private centerX;
+    private centerY;
+    private pressed;
+    constructor(camera: Camera, domElement: HTMLElement, canvasElement: HTMLCanvasElement, groundObjects: Object3D[]);
+    dispose(): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onResize;
+    private updateVisibility;
+    private updatePosition;
+    private draw;
+    private updateGroundFollowing;
+    update(): void;
+}
+export {};

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

@@ -4,6 +4,7 @@ import { FlyControls } from "../controls/FlyControls";
 export declare class FlyDragger implements IDragger {
     protected viewer: Viewer;
     controls: FlyControls;
+    private joyStickControls;
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;

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

@@ -4,6 +4,7 @@ import { WalkControls } from "../controls/WalkControls";
 export declare class WalkDragger implements IDragger {
     protected viewer: Viewer;
     controls: WalkControls;
+    private joyStickControls;
     constructor(viewer: Viewer);
     dispose(): void;
     updateControls: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.10.3",
+  "version": "26.10.5",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,18 +35,18 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.10.3",
-    "@inweb/eventemitter2": "~26.10.3",
-    "@inweb/markup": "~26.10.3",
-    "@inweb/viewer-core": "~26.10.3"
+    "@inweb/client": "~26.10.5",
+    "@inweb/eventemitter2": "~26.10.5",
+    "@inweb/markup": "~26.10.5",
+    "@inweb/viewer-core": "~26.10.5"
   },
   "devDependencies": {
-    "@types/three": "^0.179.0",
+    "@types/three": "^0.180.0",
     "potree-core": "^2.0.11",
-    "three": "^0.179.1"
+    "three": "^0.180.0"
   },
   "peerDependencies": {
-    "@types/three": "^0.179.0",
-    "three": "^0.179.1"
+    "@types/three": "^0.180.0",
+    "three": "^0.180.0"
   }
 }

package/plugins/loaders/IFCX/render.js

@@ -30,7 +30,7 @@
 // published under MIT license
 
 /* eslint-disable lines-between-class-members */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
 /* eslint-disable prefer-const */
 /* eslint-disable no-useless-catch */
 

package/src/Viewer/controls/JoyStickControls.ts

@@ -0,0 +1,285 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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.
+///////////////////////////////////////////////////////////////////////////////
+
+// ===================== AI-CODE-FILE ======================
+// Source: Claude Sonnet 4.5
+// Date: 2025-10-07
+// Reviewer: vitaly.ivanov@opendesign.com
+// Issue: CLOUD-5851
+// Notes: Originally AI-generated, modified manually
+// =========================================================
+
+import { Camera, Clock, Controls, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
+
+interface JoyStickControlsEventMap {
+  change: { type: "change" };
+}
+
+export class JoyStickControls extends Controls<JoyStickControlsEventMap> {
+  readonly EYE_HEIGHT = 1.7;
+  readonly FAILING_DISTANCE = 2;
+  readonly GROUND_FOLLOWING_SPEED = 0.05;
+  readonly WALK_SPEED_DELIMITER = 4;
+
+  public movementSpeed = 0.1;
+  public multiplier = 3;
+
+  private raycaster: Raycaster;
+  private groundObjects: Object3D[];
+
+  private canvas: HTMLCanvasElement;
+  private overlayElement: HTMLDivElement;
+  private joyStickCanvas: HTMLCanvasElement;
+  private context: CanvasRenderingContext2D;
+
+  private moveClock: Clock;
+  private camera: Camera;
+
+  private joyStickPosition: Vector2;
+  private isActive: boolean = false;
+
+  private readonly MAX_JOYSTICK_DISTANCE = 100;
+  private readonly INTERNAL_RADIUS = 35;
+  private readonly MAX_MOVE_STICK = 40;
+  private readonly EXTERNAL_RADIUS = 65;
+  private readonly CANVAS_SIZE = 200;
+
+  private centerX: number;
+  private centerY: number;
+  private pressed: boolean = false;
+
+  constructor(camera: Camera, domElement: HTMLElement, canvasElement: HTMLCanvasElement, groundObjects: Object3D[]) {
+    super(camera, domElement);
+    this.camera = camera;
+    this.canvas = canvasElement;
+    this.moveClock = new Clock(false);
+    this.joyStickPosition = new Vector2(0, 0);
+
+    this.groundObjects = groundObjects;
+    this.raycaster = new Raycaster();
+    this.raycaster.near = 0;
+    this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+
+    this.centerX = this.CANVAS_SIZE / 2;
+    this.centerY = this.CANVAS_SIZE / 2;
+
+    this.overlayElement = document.createElement("div");
+    this.overlayElement.id = "joyStickDiv";
+    this.overlayElement.style.background = "rgba(0,0,0,0)";
+    this.overlayElement.style.position = "fixed";
+    this.overlayElement.style.zIndex = "0";
+    this.overlayElement.style.touchAction = "none";
+    document.body.appendChild(this.overlayElement);
+
+    this.joyStickCanvas = document.createElement("canvas");
+    this.joyStickCanvas.id = "joyStickCanvas";
+    this.joyStickCanvas.width = this.CANVAS_SIZE;
+    this.joyStickCanvas.height = this.CANVAS_SIZE;
+    this.overlayElement.appendChild(this.joyStickCanvas);
+    this.context = this.joyStickCanvas.getContext("2d")!;
+
+    this.joyStickCanvas.addEventListener("pointerdown", this.onPointerDown);
+    document.addEventListener("pointermove", this.onPointerMove);
+    document.addEventListener("pointerup", this.onPointerUp);
+
+    window.addEventListener("resize", this.onResize);
+    document.addEventListener("fullscreenchange", this.onResize);
+
+    this.updateVisibility();
+    this.updatePosition();
+    this.draw();
+  }
+
+  override dispose() {
+    this.joyStickCanvas.removeEventListener("pointerdown", this.onPointerDown);
+    document.removeEventListener("pointermove", this.onPointerMove);
+    document.removeEventListener("pointerup", this.onPointerUp);
+
+    window.removeEventListener("resize", this.onResize);
+    document.removeEventListener("fullscreenchange", this.onResize);
+
+    this.overlayElement.remove();
+    super.dispose();
+  }
+
+  private onPointerDown = (event: PointerEvent) => {
+    event.preventDefault();
+    this.pressed = true;
+  };
+
+  private onPointerMove = (event: PointerEvent) => {
+    event.preventDefault();
+    if (!this.pressed) return;
+
+    let movedX = event.pageX;
+    let movedY = event.pageY;
+
+    if (
+      this.joyStickCanvas.offsetParent &&
+      (this.joyStickCanvas.offsetParent as HTMLElement).tagName.toUpperCase() === "BODY"
+    ) {
+      movedX -= this.joyStickCanvas.offsetLeft;
+      movedY -= this.joyStickCanvas.offsetTop;
+    } else if (this.joyStickCanvas.offsetParent) {
+      movedX -= (this.joyStickCanvas.offsetParent as HTMLElement).offsetLeft;
+      movedY -= (this.joyStickCanvas.offsetParent as HTMLElement).offsetTop;
+    }
+
+    const x = 100 * ((movedX - this.centerX) / this.MAX_MOVE_STICK);
+    const y = 100 * ((movedY - this.centerY) / this.MAX_MOVE_STICK) * -1;
+
+    const distance = Math.sqrt(x * x + y * y);
+    if (distance > 20) {
+      this.joyStickPosition.set(x, y);
+      this.isActive = true;
+    } else {
+      this.joyStickPosition.set(0, 0);
+      this.isActive = false;
+    }
+
+    this.draw();
+    this.moveClock.start();
+    this.update();
+  };
+
+  private onPointerUp = (event: PointerEvent) => {
+    event.preventDefault();
+    this.pressed = false;
+    this.joyStickPosition.set(0, 0);
+    this.isActive = false;
+    this.moveClock.stop();
+    this.draw();
+  };
+
+  private onResize = () => {
+    this.updateVisibility();
+    this.updatePosition();
+  };
+
+  private updateVisibility() {
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isNarrowScreen = window.innerWidth < 1024;
+
+    if (isMobile || isNarrowScreen) {
+      this.overlayElement.style.display = "block";
+    } else {
+      this.overlayElement.style.display = "none";
+    }
+  }
+
+  private updatePosition() {
+    const rect = this.canvas.getBoundingClientRect();
+    this.overlayElement.style.top = `${rect.height - this.CANVAS_SIZE}px`;
+    this.overlayElement.style.left = `${rect.left}px`;
+    this.overlayElement.style.width = `${this.CANVAS_SIZE}px`;
+    this.overlayElement.style.height = `${this.CANVAS_SIZE}px`;
+  }
+
+  private draw() {
+    this.context.clearRect(0, 0, this.CANVAS_SIZE, this.CANVAS_SIZE);
+
+    // Draw external circle
+    this.context.beginPath();
+    this.context.arc(this.centerX, this.centerY, this.EXTERNAL_RADIUS, 0, 2 * Math.PI, false);
+    this.context.lineWidth = 2;
+    this.context.strokeStyle = "#35436E";
+    this.context.globalAlpha = 0.5;
+    this.context.stroke();
+
+    // Draw internal circle
+    let movedX = this.centerX + (this.joyStickPosition.x * this.MAX_MOVE_STICK) / 100;
+    let movedY = this.centerY - (this.joyStickPosition.y * this.MAX_MOVE_STICK) / 100;
+
+    movedX = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedX));
+    movedY = Math.max(this.MAX_MOVE_STICK, Math.min(this.CANVAS_SIZE - this.MAX_MOVE_STICK, movedY));
+
+    this.context.beginPath();
+    this.context.arc(movedX, movedY, this.INTERNAL_RADIUS, 0, 2 * Math.PI, false);
+    this.context.fillStyle = "#35436E";
+    this.context.lineWidth = 2;
+    this.context.strokeStyle = "#35436E";
+    this.context.globalAlpha = 0.5;
+    this.context.fill();
+    this.context.stroke();
+  }
+
+  private updateGroundFollowing() {
+    const up = new Vector3().copy(this.camera.up);
+    this.raycaster.set(this.camera.position, up.negate());
+
+    this.raycaster.params = this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0 },
+      Line2: { threshold: 0 },
+      LOD: { threshold: 0 },
+      Points: { threshold: 0 },
+      Sprite: { threshold: 0 },
+    };
+
+    const 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.camera.position.y = MathUtils.lerp(this.camera.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+    }
+  }
+
+  override update() {
+    if (!this.isActive) return;
+
+    const forwardInput = this.joyStickPosition.y / this.MAX_JOYSTICK_DISTANCE;
+    const rightInput = this.joyStickPosition.x / this.MAX_JOYSTICK_DISTANCE;
+
+    const timeDelta = this.moveClock.getDelta();
+    const moveDelta = (timeDelta * this.multiplier * this.movementSpeed) / this.WALK_SPEED_DELIMITER;
+
+    const forward = new Vector3();
+    const sideways = new Vector3();
+
+    this.camera.getWorldDirection(forward);
+    if (this.groundObjects.length > 0) {
+      forward.y = 0;
+    }
+    forward.normalize();
+
+    sideways.setFromMatrixColumn(this.camera.matrix, 0);
+    if (this.groundObjects.length > 0) {
+      sideways.y = 0;
+    }
+    sideways.normalize();
+
+    if (forwardInput !== 0) {
+      this.camera.position.addScaledVector(forward, moveDelta * forwardInput);
+    }
+    if (rightInput !== 0) {
+      this.camera.position.addScaledVector(sideways, moveDelta * rightInput);
+    }
+
+    if (forwardInput !== 0 || rightInput !== 0) {
+      if (this.groundObjects.length > 0) this.updateGroundFollowing();
+      this.dispatchEvent({ type: "change" });
+    }
+  }
+}

package/src/Viewer/controls/OrbitControls.js

@@ -285,7 +285,6 @@ class OrbitControls extends EventDispatcher {
     // internals
     //
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const scope = this;
 
     scope.state = STATE.NONE;

package/src/Viewer/draggers/FlyDragger.ts

@@ -26,15 +26,21 @@ import { type IDragger } from "@inweb/viewer-core";
 
 import type { Viewer } from "../Viewer";
 import { FlyControls } from "../controls/FlyControls";
+import { JoyStickControls } from "../controls/JoyStickControls";
 
 export class FlyDragger implements IDragger {
   protected viewer: Viewer;
   public controls: FlyControls;
+  private joyStickControls: JoyStickControls;
 
   constructor(viewer: Viewer) {
     this.controls = new FlyControls(viewer.camera, viewer.canvas);
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
+
+    this.joyStickControls = new JoyStickControls(viewer.camera, viewer.canvas, viewer.canvas, []);
+    this.joyStickControls.addEventListener("change", this.controlsChange);
+
     this.viewer = viewer;
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("zoom", this.viewerZoom);
@@ -49,11 +55,16 @@ export class FlyDragger implements IDragger {
     this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
+
+    this.joyStickControls.removeEventListener("change", this.controlsChange);
+    this.joyStickControls.dispose();
   }
 
   updateControls = () => {
     const size = this.viewer.extents.getSize(new Vector3());
     this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+    this.joyStickControls.movementSpeed = this.controls.movementSpeed;
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   updateControlsCamera = () => {
@@ -67,9 +78,11 @@ export class FlyDragger implements IDragger {
 
   flyspeedChange = (event: any) => {
     this.viewer.emitEvent(event);
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   viewerRender = () => {
+    this.joyStickControls.update();
     this.controls.update();
   };
 

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -367,7 +367,7 @@ class MeasureOverlay {
     if (!this.canvas.parentElement) return;
 
     this.canvas.parentElement.appendChild(this.container);
-    this.resizeObserver.observe(this.canvas.parentElement);
+    this.resizeObserver.observe(this.canvas);
   }
 
   dispose() {
@@ -403,13 +403,16 @@ class MeasureOverlay {
     this.lines = this.lines.filter((x) => x !== line);
   }
 
-  resizeContainer = (entries: ResizeObserverEntry[]) => {
-    const { width, height } = entries[0].contentRect;
+  resizeContainer = () => {
+    const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.canvas;
 
-    if (!width || !height) return; // <- invisible canvas, or canvas with parent removed
+    if (!offsetWidth || !offsetHeight) return; // <- invisible canvas, or canvas with parent removed
 
-    this.container.style.width = `${width}px`;
-    this.container.style.height = `${height}px`;
+    this.container.style.left = `${offsetLeft}px`;
+    this.container.style.top = `${offsetTop}px`;
+
+    this.container.style.width = `${offsetWidth}px`;
+    this.container.style.height = `${offsetHeight}px`;
   };
 }
 

package/src/Viewer/draggers/WalkDragger.ts

@@ -26,10 +26,12 @@ import { type IDragger } from "@inweb/viewer-core";
 
 import type { Viewer } from "../Viewer";
 import { WalkControls } from "../controls/WalkControls";
+import { JoyStickControls } from "../controls/JoyStickControls";
 
 export class WalkDragger implements IDragger {
   protected viewer: Viewer;
   public controls: WalkControls;
+  private joyStickControls: JoyStickControls;
 
   constructor(viewer: Viewer) {
     const meshOnlyGround: Mesh[] = [];
@@ -43,6 +45,10 @@ export class WalkDragger implements IDragger {
     this.controls = new WalkControls(viewer.camera, viewer.canvas, meshOnlyGround);
     this.controls.addEventListener("change", this.controlsChange);
     this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+
+    this.joyStickControls = new JoyStickControls(viewer.camera, viewer.canvas, viewer.canvas, meshOnlyGround);
+    this.joyStickControls.addEventListener("change", this.controlsChange);
+
     this.viewer = viewer;
     this.viewer.addEventListener("render", this.viewerRender);
     this.viewer.addEventListener("zoom", this.viewerZoom);
@@ -57,11 +63,16 @@ export class WalkDragger implements IDragger {
     this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
     this.controls.removeEventListener("change", this.controlsChange);
     this.controls.dispose();
+
+    this.joyStickControls.removeEventListener("change", this.controlsChange);
+    this.joyStickControls.dispose();
   }
 
   updateControls = () => {
     const size = this.viewer.extents.getSize(new Vector3());
     this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+    this.joyStickControls.movementSpeed = this.controls.movementSpeed;
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   updateControlsCamera = () => {
@@ -75,9 +86,11 @@ export class WalkDragger implements IDragger {
 
   walkspeedChange = (event: any) => {
     this.viewer.emitEvent(event);
+    this.joyStickControls.multiplier = this.controls.multiplier;
   };
 
   viewerRender = () => {
+    this.joyStickControls.update();
     this.controls.update();
   };