@mml-io/3d-web-client-core 0.12.2 → 0.13.0

package/build/camera/CameraManager.d.ts

@@ -31,7 +31,13 @@ export declare class CameraManager {
     private lerpTarget;
     private lerpFactor;
     private lerpDuration;
+    private hasTouchControl;
+    private lastTouchX;
+    private lastTouchY;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
     private onMouseDown;
     private onMouseUp;
     private onMouseMove;

package/build/index.js

@@ -82,6 +82,169 @@ var EventHandlerCollection = class _EventHandlerCollection {
   }
 };
 
+// src/input/VirtualJoystick.ts
+var _VirtualJoystick = class _VirtualJoystick {
+  constructor(attrs) {
+    this.left = false;
+    this.right = false;
+    this.up = false;
+    this.down = false;
+    this.hasDirection = false;
+    this.clearFlags = () => {
+      this.left = false;
+      this.right = false;
+      this.up = false;
+      this.down = false;
+      this.hasDirection = false;
+      this.control.style.left = `${this.width / 2 - this.inner_radius}px`;
+      this.control.style.top = `${this.height / 2 - this.inner_radius}px`;
+    };
+    this.radius = attrs.radius || 50;
+    this.inner_radius = attrs.inner_radius || this.radius / 2;
+    this.anchor = attrs.anchor || "left";
+    this.x = attrs.x || 0;
+    this.y = attrs.y || 0;
+    this.width = attrs.width || this.radius * 2 + this.inner_radius * 2;
+    this.height = attrs.height || this.radius * 2 + this.inner_radius * 2;
+    this.mouse_support = this.checkTouch() || attrs.mouse_support === true;
+    this.initializeJoystick();
+  }
+  static checkForTouch() {
+    try {
+      document.createEvent("TouchEvent");
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  static isTouchOnJoystick(touch) {
+    if (!_VirtualJoystick.JOYSTICK_DIV) {
+      return false;
+    }
+    const divRect = _VirtualJoystick.JOYSTICK_DIV.getBoundingClientRect();
+    return touch.clientX >= divRect.left && touch.clientX <= divRect.right && touch.clientY >= divRect.top && touch.clientY <= divRect.bottom;
+  }
+  checkTouch() {
+    return _VirtualJoystick.checkForTouch();
+  }
+  initializeJoystick() {
+    if (!_VirtualJoystick.JOYSTICK_DIV) {
+      this.div = document.createElement("div");
+      const divStyle = this.div.style;
+      divStyle.display = this.checkTouch() || this.mouse_support ? "visible" : "none";
+      divStyle.position = "fixed";
+      if (this.anchor === "left") {
+        divStyle.left = `${this.x}px`;
+      } else {
+        divStyle.right = `${this.x}px`;
+      }
+      divStyle.bottom = `${this.y}px`;
+      divStyle.width = `${this.width}px`;
+      divStyle.height = `${this.height}px`;
+      divStyle.zIndex = "10000";
+      divStyle.overflow = "hidden";
+      document.body.appendChild(this.div);
+      _VirtualJoystick.JOYSTICK_DIV = this.div;
+    }
+    this.setupBaseAndControl();
+    this.bindEvents();
+  }
+  setupBaseAndControl() {
+    this.base = document.createElement("span");
+    let divStyle = this.base.style;
+    divStyle.width = `${this.radius * 2}px`;
+    divStyle.height = `${this.radius * 2}px`;
+    divStyle.position = "absolute";
+    divStyle.left = `${this.width / 2 - this.radius}px`;
+    divStyle.bottom = `${this.height / 2 - this.radius}px`;
+    divStyle.borderRadius = "50%";
+    divStyle.borderColor = "rgba(200,200,200,0.5)";
+    divStyle.borderWidth = "2px";
+    divStyle.borderStyle = "solid";
+    this.div.appendChild(this.base);
+    this.control = document.createElement("span");
+    divStyle = this.control.style;
+    divStyle.width = `${this.inner_radius * 2}px`;
+    divStyle.height = `${this.inner_radius * 2}px`;
+    divStyle.position = "absolute";
+    divStyle.left = `${this.width / 2 - this.inner_radius}px`;
+    divStyle.bottom = `${this.height / 2 - this.inner_radius}px`;
+    divStyle.borderRadius = "50%";
+    divStyle.backgroundColor = "rgba(200,200,200,0.3)";
+    divStyle.borderWidth = "1px";
+    divStyle.borderColor = "rgba(200,200,200,0.8)";
+    divStyle.borderStyle = "solid";
+    this.div.appendChild(this.control);
+  }
+  bindEvents() {
+    this.div.addEventListener("touchstart", this.handleTouchStart.bind(this), false);
+    this.div.addEventListener("touchmove", this.handleTouchMove.bind(this), false);
+    this.div.addEventListener("touchend", this.clearFlags.bind(this), false);
+    if (this.mouse_support) {
+      this.div.addEventListener("mousedown", this.handleMouseDown.bind(this));
+      this.div.addEventListener("mousemove", this.handleMouseMove.bind(this));
+      this.div.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    }
+  }
+  handleTouchStart(evt) {
+    evt.preventDefault();
+    if (evt.touches) {
+      const touch = evt.touches[0];
+      this.updateControlAndDirection(touch);
+    }
+  }
+  handleTouchMove(evt) {
+    evt.preventDefault();
+    if (evt.touches.length > 0) {
+      const touch = evt.touches[0];
+      this.updateControlAndDirection(touch);
+    }
+  }
+  handleMouseDown(evt) {
+    evt.preventDefault();
+    this.updateControlAndDirection(evt);
+  }
+  handleMouseMove(evt) {
+    if (evt.buttons === 1) {
+      evt.preventDefault();
+      this.updateControlAndDirection(evt);
+    }
+  }
+  handleMouseUp(evt) {
+    this.clearFlags();
+  }
+  updateControlAndDirection(input) {
+    const rect = this.div.getBoundingClientRect();
+    const dx = input.clientX - (rect.left + this.div.offsetWidth / 2);
+    const dy = input.clientY - (rect.top + this.div.offsetHeight / 2);
+    const distance = Math.min(Math.sqrt(dx * dx + dy * dy), this.radius);
+    const angle = Math.atan2(dy, dx);
+    const constrainedX = distance * Math.cos(angle);
+    const constrainedY = distance * Math.sin(angle);
+    this.control.style.left = `${constrainedX + this.width / 2 - this.inner_radius}px`;
+    this.control.style.top = `${constrainedY + this.height / 2 - this.inner_radius}px`;
+    this.up = this.isUp(dx, dy);
+    this.down = this.isDown(dx, dy);
+    this.left = this.isLeft(dx, dy);
+    this.right = this.isRight(dx, dy);
+    this.hasDirection = this.up || this.down || this.left || this.right;
+  }
+  isUp(dx, dy) {
+    return dy < 0 && Math.abs(dx) <= 2 * Math.abs(dy);
+  }
+  isDown(dx, dy) {
+    return dy > 0 && Math.abs(dx) <= 2 * Math.abs(dy);
+  }
+  isLeft(dx, dy) {
+    return dx < 0 && Math.abs(dy) <= 2 * Math.abs(dx);
+  }
+  isRight(dx, dy) {
+    return dx > 0 && Math.abs(dy) <= 2 * Math.abs(dx);
+  }
+};
+_VirtualJoystick.JOYSTICK_DIV = null;
+var VirtualJoystick = _VirtualJoystick;
+
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
@@ -119,6 +282,9 @@ var CameraManager = class {
     this.lerpTarget = new Vector32();
     this.lerpFactor = 0;
     this.lerpDuration = 2.1;
+    this.hasTouchControl = false;
+    this.lastTouchX = 0;
+    this.lastTouchY = 0;
     this.phi = initialPhi;
     this.targetPhi = initialPhi;
     this.theta = initialTheta;
@@ -126,12 +292,61 @@ var CameraManager = class {
     this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
+    this.hasTouchControl = VirtualJoystick.checkForTouch();
     this.eventHandlerCollection = EventHandlerCollection.create([
       [targetElement, "mousedown", this.onMouseDown.bind(this)],
       [document, "mouseup", this.onMouseUp.bind(this)],
       [document, "mousemove", this.onMouseMove.bind(this)],
       [targetElement, "wheel", this.onMouseWheel.bind(this)]
     ]);
+    if (this.hasTouchControl) {
+      this.eventHandlerCollection.add(targetElement, "touchstart", this.onTouchStart.bind(this), {
+        passive: false
+      });
+      this.eventHandlerCollection.add(document, "touchmove", this.onTouchMove.bind(this), {
+        passive: false
+      });
+      this.eventHandlerCollection.add(document, "touchend", this.onTouchEnd.bind(this), {
+        passive: false
+      });
+    }
+  }
+  onTouchStart(evt) {
+    Array.from(evt.touches).forEach((touch) => {
+      if (!VirtualJoystick.isTouchOnJoystick(touch)) {
+        this.dragging = true;
+        this.lastTouchX = touch.clientX;
+        this.lastTouchY = touch.clientY;
+      }
+    });
+  }
+  onTouchMove(evt) {
+    if (!this.dragging || getTweakpaneActive()) {
+      return;
+    }
+    evt.preventDefault();
+    const touch = Array.from(evt.touches).find((t) => !VirtualJoystick.isTouchOnJoystick(t));
+    if (touch) {
+      const dx = touch.clientX - this.lastTouchX;
+      const dy = touch.clientY - this.lastTouchY;
+      this.lastTouchX = touch.clientX;
+      this.lastTouchY = touch.clientY;
+      if (this.targetTheta !== null && this.targetPhi !== null) {
+        this.targetTheta += dx * 0.01;
+        this.targetPhi -= dy * 0.01;
+        this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
+      }
+    }
+  }
+  onTouchEnd(evt) {
+    if (this.dragging) {
+      const touchEnded = Array.from(evt.changedTouches).some(
+        (t) => !VirtualJoystick.isTouchOnJoystick(t)
+      );
+      if (touchEnded) {
+        this.dragging = false;
+      }
+    }
   }
   onMouseDown() {
     this.dragging = true;
@@ -1795,9 +2010,17 @@ var KeyInputManager = class {
     this.shouldCaptureKeyPress = shouldCaptureKeyPress;
     this.keys = /* @__PURE__ */ new Map();
     this.eventHandlerCollection = new EventHandlerCollection();
+    this.directionJoystick = null;
     this.eventHandlerCollection.add(document, "keydown", this.onKeyDown.bind(this));
     this.eventHandlerCollection.add(document, "keyup", this.onKeyUp.bind(this));
     this.eventHandlerCollection.add(window, "blur", this.handleUnfocus.bind(this));
+    this.directionJoystick = new VirtualJoystick({
+      radius: 70,
+      inner_radius: 20,
+      x: 70,
+      y: 0,
+      mouse_support: false
+    });
   }
   handleUnfocus(_event) {
     this.keys.clear();
@@ -1821,19 +2044,19 @@ var KeyInputManager = class {
     return this.keys.get(key) || false;
   }
   isMovementKeyPressed() {
-    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
+    return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key)) || this.directionJoystick.hasDirection;
   }
   get forward() {
-    return this.isKeyPressed("w" /* W */);
+    return this.isKeyPressed("w" /* W */) || this.directionJoystick.up;
   }
   get backward() {
-    return this.isKeyPressed("s" /* S */);
+    return this.isKeyPressed("s" /* S */) || this.directionJoystick.down;
   }
   get left() {
-    return this.isKeyPressed("a" /* A */);
+    return this.isKeyPressed("a" /* A */) || this.directionJoystick.left;
   }
   get right() {
-    return this.isKeyPressed("d" /* D */);
+    return this.isKeyPressed("d" /* D */) || this.directionJoystick.right;
   }
   get run() {
     return this.isKeyPressed("shift" /* SHIFT */);