@mml-io/3d-web-client-core 0.0.0-experimental-42d909b-20240717 → 0.0.0-experimental-81deb84-20240724

package/build/index.js

@@ -82,159 +82,6 @@ var EventHandlerCollection = class _EventHandlerCollection {
   }
 };
 
-// src/input/VirtualJoystick.ts
-var VirtualJoystick = class _VirtualJoystick {
-  constructor(holderElement, attrs) {
-    this.holderElement = holderElement;
-    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.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";
-    this.holderElement.appendChild(this.div);
-    this.setupBaseAndControl();
-    this.bindEvents();
-  }
-  static checkForTouch() {
-    try {
-      document.createEvent("TouchEvent");
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  checkTouch() {
-    return _VirtualJoystick.checkForTouch();
-  }
-  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();
-    evt.stopPropagation();
-    if (evt.touches) {
-      const touch = evt.touches[0];
-      this.updateControlAndDirection(touch);
-    }
-  }
-  handleTouchMove(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    if (evt.touches.length > 0) {
-      const touch = evt.touches[0];
-      this.updateControlAndDirection(touch);
-    }
-  }
-  handleMouseDown(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.updateControlAndDirection(evt);
-  }
-  handleMouseMove(evt) {
-    if (evt.buttons === 1) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      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);
-  }
-};
-
 // src/tweakpane/blades/cameraFolder.ts
 var camValues = {
   initialDistance: 3.3,
@@ -244,10 +91,9 @@ var camValues = {
   maxFOV: 70,
   minFOV: 60,
   invertFOVMapping: false,
-  damping: 0.15,
-  dampingScale: 5e-3,
+  damping: 0.25,
   zoomScale: 0.088,
-  zoomDamping: 0.16
+  zoomDamping: 0.4
 };
 var camOptions = {
   initialDistance: { min: 1, max: 5, step: 0.1 },
@@ -256,8 +102,7 @@ var camOptions = {
   initialFOV: { min: 60, max: 85, step: 1 },
   maxFOV: { min: 50, max: 100, step: 1 },
   minFOV: { min: 50, max: 100, step: 1 },
-  damping: { min: 0.01, max: 0.15, step: 0.01 },
-  dampingScale: { min: 1e-3, max: 0.02, step: 1e-3 },
+  damping: { min: 0.01, max: 1, step: 1e-3 },
   zoomScale: { min: 5e-3, max: 0.3, step: 1e-3 },
   zoomDamping: { min: 0, max: 2, step: 0.01 }
 };
@@ -277,7 +122,6 @@ var CameraFolder = class {
     this.folder.addBinding(camValues, "maxFOV", camOptions.maxFOV);
     this.folder.addBinding({ invertFOVMapping: camValues.invertFOVMapping }, "invertFOVMapping");
     this.folder.addBinding(camValues, "damping", camOptions.damping);
-    this.folder.addBinding(camValues, "dampingScale", camOptions.dampingScale);
     this.folder.addBinding(camValues, "zoomScale", camOptions.zoomScale);
     this.folder.addBinding(camValues, "zoomDamping", camOptions.zoomDamping);
   }
@@ -326,20 +170,16 @@ var CameraFolder = class {
           cameraManager.recomputeFoV();
           break;
         }
-        case "invertFOVMapping":
+        case "invertFOVMapping": {
           const boolValue = e.value;
           cameraManager.invertFOVMapping = boolValue;
           break;
+        }
         case "damping": {
           const value = e.value;
           cameraManager.damping = value;
           break;
         }
-        case "dampingScale": {
-          const value = e.value;
-          cameraManager.dampingScale = value;
-          break;
-        }
         case "zoomScale": {
           const value = e.value;
           cameraManager.zoomScale = value;
@@ -371,124 +211,114 @@ function getTweakpaneActive() {
 }
 
 // src/camera/CameraManager.ts
+var cameraPanSensitivity = 20;
+var scrollZoomSensitivity = 0.1;
+var pinchZoomSensitivity = 0.025;
 var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
+    this.targetElement = targetElement;
     this.collisionsManager = collisionsManager;
     this.initialDistance = camValues.initialDistance;
     this.minDistance = camValues.minDistance;
     this.maxDistance = camValues.maxDistance;
-    this.initialFOV = camValues.initialFOV;
-    this.maxFOV = camValues.maxFOV;
-    this.minFOV = camValues.minFOV;
     this.damping = camValues.damping;
-    this.dampingScale = 0.01;
     this.zoomScale = camValues.zoomScale;
     this.zoomDamping = camValues.zoomDamping;
+    this.initialFOV = camValues.initialFOV;
+    this.maxFOV = camValues.maxFOV;
+    this.minFOV = camValues.minFOV;
     this.invertFOVMapping = camValues.invertFOVMapping;
     this.fov = this.initialFOV;
     this.targetFOV = this.initialFOV;
     this.minPolarAngle = Math.PI * 0.25;
     this.maxPolarAngle = Math.PI * 0.95;
-    this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
+    this.targetDistance = this.initialDistance;
     this.desiredDistance = this.initialDistance;
-    this.phi = Math.PI / 2;
-    this.theta = Math.PI / 2;
-    this.dragging = false;
     this.target = new Vector32(0, 1.55, 0);
     this.hadTarget = false;
-    this.isLerping = false;
     this.finalTarget = new Vector32();
+    this.isLerping = false;
     this.lerpTarget = new Vector32();
     this.lerpFactor = 0;
     this.lerpDuration = 2.1;
-    this.hasTouchControl = false;
-    this.lastTouchX = 0;
-    this.lastTouchY = 0;
+    this.activePointers = /* @__PURE__ */ new Map();
+    this.targetElement.style.touchAction = "pinch-zoom";
     this.phi = initialPhi;
-    this.targetPhi = initialPhi;
+    this.targetPhi = this.phi;
     this.theta = initialTheta;
-    this.targetTheta = initialTheta;
+    this.targetTheta = this.theta;
     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, "pointerdown", this.onPointerDown.bind(this)],
+      [targetElement, "gesturestart", this.preventDefaultAndStopPropagation.bind(this)],
+      [document, "pointerup", this.onPointerUp.bind(this)],
+      [document, "pointercancel", this.onPointerUp.bind(this)],
+      [document, "pointermove", this.onPointerMove.bind(this)],
       [targetElement, "wheel", this.onMouseWheel.bind(this)],
       [targetElement, "contextmenu", this.onContextMenu.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
-      });
-    }
-  }
-  setupTweakPane(tweakPane) {
-    tweakPane.setupCamPane(this);
   }
-  onTouchStart(evt) {
-    Array.from(evt.touches).forEach((touch) => {
-      this.dragging = true;
-      this.lastTouchX = touch.clientX;
-      this.lastTouchY = touch.clientY;
-    });
-  }
-  onTouchMove(evt) {
-    if (!this.dragging || getTweakpaneActive()) {
-      return;
-    }
+  preventDefaultAndStopPropagation(evt) {
     evt.preventDefault();
-    const touch = Array.from(evt.touches).find((t) => true);
-    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 * this.dampingScale;
-        this.targetPhi -= dy * this.dampingScale;
-        this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
-      }
-    }
+    evt.stopPropagation();
   }
-  onTouchEnd(evt) {
-    if (this.dragging) {
-      const touchEnded = Array.from(evt.changedTouches).some((t) => true);
-      if (touchEnded) {
-        this.dragging = false;
-      }
-    }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCamPane(this);
   }
-  onMouseDown(event) {
+  onPointerDown(event) {
     if (event.button === 0 || event.button === 2) {
-      this.dragging = true;
+      const pointerInfo = { x: event.clientX, y: event.clientY };
+      this.activePointers.set(event.pointerId, pointerInfo);
       document.body.style.cursor = "none";
     }
   }
-  onMouseUp(event) {
-    if (event.button === 0 || event.button === 2) {
-      this.dragging = false;
-      document.body.style.cursor = "default";
+  onPointerUp(event) {
+    const existingPointer = this.activePointers.get(event.pointerId);
+    if (existingPointer) {
+      this.activePointers.delete(event.pointerId);
+      if (this.activePointers.size === 0) {
+        document.body.style.cursor = "default";
+      }
     }
   }
-  onMouseMove(event) {
+  getAveragePointerPositionAndSpread() {
+    const existingSum = { x: 0, y: 0 };
+    this.activePointers.forEach((p) => {
+      existingSum.x += p.x;
+      existingSum.y += p.y;
+    });
+    const aX = existingSum.x / this.activePointers.size;
+    const aY = existingSum.y / this.activePointers.size;
+    let sumOfDistances = 0;
+    this.activePointers.forEach((p) => {
+      const distance = Math.sqrt((p.x - aX) ** 2 + (p.y - aY) ** 2);
+      sumOfDistances += distance;
+    });
+    return { pos: { x: aX, y: aY }, spread: sumOfDistances / this.activePointers.size };
+  }
+  onPointerMove(event) {
     if (getTweakpaneActive()) {
       return;
     }
-    if (this.dragging) {
-      if (this.targetTheta === null || this.targetPhi === null)
-        return;
-      this.targetTheta += event.movementX * this.dampingScale;
-      this.targetPhi -= event.movementY * this.dampingScale;
+    const existingPointer = this.activePointers.get(event.pointerId);
+    if (existingPointer) {
+      const previous = this.getAveragePointerPositionAndSpread();
+      existingPointer.x = event.clientX;
+      existingPointer.y = event.clientY;
+      const latest = this.getAveragePointerPositionAndSpread();
+      const sX = latest.pos.x - previous.pos.x;
+      const sY = latest.pos.y - previous.pos.y;
+      const dx = sX / this.targetElement.clientWidth * cameraPanSensitivity;
+      const dy = sY / this.targetElement.clientHeight * cameraPanSensitivity;
+      if (this.activePointers.size > 1) {
+        const zoomDelta = latest.spread - previous.spread;
+        this.zoom(-zoomDelta * pinchZoomSensitivity);
+      }
+      this.targetTheta += dx;
+      this.targetPhi -= dy;
       this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
       event.preventDefault();
     }
@@ -497,14 +327,17 @@ var CameraManager = class {
     if (getTweakpaneActive()) {
       return;
     }
-    const scrollAmount = event.deltaY * this.zoomScale * 0.1;
-    this.targetDistance += scrollAmount;
+    event.preventDefault();
+    const scrollAmount = event.deltaY * this.zoomScale * scrollZoomSensitivity;
+    this.zoom(scrollAmount);
+  }
+  zoom(delta) {
+    this.targetDistance += delta;
     this.targetDistance = Math.max(
       this.minDistance,
       Math.min(this.maxDistance, this.targetDistance)
     );
     this.desiredDistance = this.targetDistance;
-    event.preventDefault();
   }
   onContextMenu(event) {
     event.preventDefault();
@@ -533,12 +366,12 @@ var CameraManager = class {
     const dy = this.camera.position.y - this.target.y;
     const dz = this.camera.position.z - this.target.z;
     this.targetDistance = Math.sqrt(dx * dx + dy * dy + dz * dz);
-    this.targetTheta = Math.atan2(dz, dx);
-    this.targetPhi = Math.acos(dy / this.targetDistance);
-    this.phi = this.targetPhi;
-    this.theta = this.targetTheta;
     this.distance = this.targetDistance;
     this.desiredDistance = this.targetDistance;
+    this.theta = Math.atan2(dz, dx);
+    this.targetTheta = this.theta;
+    this.phi = Math.acos(dy / this.targetDistance);
+    this.targetPhi = this.phi;
     this.recomputeFoV(true);
   }
   adjustCameraPosition() {
@@ -546,15 +379,15 @@ var CameraManager = class {
     const offset = new Vector32(0, 0, offsetDistance);
     offset.applyEuler(this.camera.rotation);
     const rayOrigin = this.camera.position.clone().add(offset);
-    const rayDirection = this.target.clone().sub(rayOrigin).normalize();
-    this.rayCaster.set(rayOrigin, rayDirection);
+    const rayDirection = rayOrigin.sub(this.target.clone()).normalize();
+    this.rayCaster.set(this.target.clone(), rayDirection);
     const firstRaycastHit = this.collisionsManager.raycastFirst(this.rayCaster.ray);
-    const cameraToPlayerDistance = this.camera.position.distanceTo(this.target);
-    if (firstRaycastHit !== null && firstRaycastHit[0] <= cameraToPlayerDistance) {
-      this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
-      this.distance = this.targetDistance;
+    if (firstRaycastHit !== null && firstRaycastHit[0] <= this.desiredDistance) {
+      const distanceToCollision = firstRaycastHit[0] - 0.1;
+      this.targetDistance = distanceToCollision;
+      this.distance = distanceToCollision;
     } else {
-      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.damping * 4;
+      this.targetDistance = this.desiredDistance;
     }
   }
   dispose() {
@@ -587,24 +420,25 @@ var CameraManager = class {
     } else {
       this.adjustCameraPosition();
     }
-    if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
-      this.distance += (this.targetDistance - this.distance) * this.damping * (0.21 + this.zoomDamping);
-      this.phi += (this.targetPhi - this.phi) * this.damping;
-      this.theta += (this.targetTheta - this.theta) * this.damping;
-      const x = this.target.x + this.distance * Math.sin(this.phi) * Math.cos(this.theta);
-      const y = this.target.y + this.distance * Math.cos(this.phi);
-      const z = this.target.z + this.distance * Math.sin(this.phi) * Math.sin(this.theta);
-      this.recomputeFoV();
-      this.fov += (this.targetFOV - this.fov) * this.damping;
-      this.camera.fov = this.fov;
-      this.camera.updateProjectionMatrix();
-      this.camera.position.set(x, y, z);
-      this.camera.lookAt(this.target);
-      if (this.isLerping && this.lerpFactor >= 1) {
-        this.isLerping = false;
-      }
+    this.distance += (this.targetDistance - this.distance) * this.zoomDamping;
+    this.theta += (this.targetTheta - this.theta) * this.damping;
+    this.phi += (this.targetPhi - this.phi) * this.damping;
+    const x = this.target.x + this.distance * Math.sin(this.phi) * Math.cos(this.theta);
+    const y = this.target.y + this.distance * Math.cos(this.phi);
+    const z = this.target.z + this.distance * Math.sin(this.phi) * Math.sin(this.theta);
+    this.recomputeFoV();
+    this.fov += (this.targetFOV - this.fov) * this.zoomDamping;
+    this.camera.fov = this.fov;
+    this.camera.updateProjectionMatrix();
+    this.camera.position.set(x, y, z);
+    this.camera.lookAt(this.target);
+    if (this.isLerping && this.lerpFactor >= 1) {
+      this.isLerping = false;
     }
   }
+  hasActiveInput() {
+    return this.activePointers.size > 0;
+  }
 };
 
 // src/character/Character.ts
@@ -1770,6 +1604,7 @@ var LocalController = class {
     this.jumpPressed = false;
     // Tracks if the jump button is pressed
     this.jumpReleased = true;
+    this.controlState = null;
     this.networkState = {
       id: this.config.id,
       position: { x: 0, y: 0, z: 0 },
@@ -1777,35 +1612,22 @@ var LocalController = class {
       state: 0 /* idle */
     };
   }
-  updateControllerState() {
-    var _a, _b, _c, _d, _e;
-    this.forward = this.config.keyInputManager.forward || ((_a = this.config.virtualJoystick) == null ? void 0 : _a.up) || false;
-    this.backward = this.config.keyInputManager.backward || ((_b = this.config.virtualJoystick) == null ? void 0 : _b.down) || false;
-    this.left = this.config.keyInputManager.left || ((_c = this.config.virtualJoystick) == null ? void 0 : _c.left) || false;
-    this.right = this.config.keyInputManager.right || ((_d = this.config.virtualJoystick) == null ? void 0 : _d.right) || false;
-    this.run = this.config.keyInputManager.run;
-    this.jump = this.config.keyInputManager.jump;
-    this.anyDirection = this.config.keyInputManager.anyDirection || ((_e = this.config.virtualJoystick) == null ? void 0 : _e.hasDirection) || false;
-    this.conflictingDirections = this.config.keyInputManager.conflictingDirection;
-    if (!this.jump) {
-      this.jumpReleased = true;
-    }
-  }
   update() {
-    this.updateControllerState();
+    var _a, _b;
+    this.controlState = this.config.keyInputManager.getOutput() || ((_a = this.config.virtualJoystick) == null ? void 0 : _a.getOutput()) || null;
     this.rayCaster.set(this.config.character.position, this.vectorDown);
     const firstRaycastHit = this.config.collisionsManager.raycastFirst(this.rayCaster.ray);
     if (firstRaycastHit !== null) {
       this.currentHeight = firstRaycastHit[0];
       this.currentSurfaceAngle.copy(firstRaycastHit[1]);
     }
-    if (this.anyDirection || !this.characterOnGround) {
+    if (((_b = this.controlState) == null ? void 0 : _b.direction) !== null || !this.characterOnGround) {
       const targetAnimation = this.getTargetAnimation();
       this.config.character.updateAnimation(targetAnimation);
     } else {
       this.config.character.updateAnimation(0 /* idle */);
     }
-    if (this.anyDirection) {
+    if (this.controlState) {
       this.updateRotation();
     }
     for (let i = 0; i < this.collisionDetectionSteps; i++) {
@@ -1830,30 +1652,17 @@ var LocalController = class {
       }
       return 4 /* air */;
     }
-    if (this.conflictingDirections) {
+    if (!this.controlState) {
       return 0 /* idle */;
     }
-    return this.run && this.anyDirection ? 2 /* running */ : this.anyDirection ? 1 /* walking */ : 0 /* idle */;
+    if (this.controlState.isSprinting) {
+      return 2 /* running */;
+    }
+    return 1 /* walking */;
   }
   updateRotationOffset() {
-    if (this.conflictingDirections)
-      return;
-    if (this.forward) {
-      this.rotationOffset = Math.PI;
-      if (this.left)
-        this.rotationOffset = Math.PI + Math.PI / 4;
-      if (this.right)
-        this.rotationOffset = Math.PI - Math.PI / 4;
-    } else if (this.backward) {
-      this.rotationOffset = Math.PI * 2;
-      if (this.left)
-        this.rotationOffset = -Math.PI * 2 - Math.PI / 4;
-      if (this.right)
-        this.rotationOffset = Math.PI * 2 + Math.PI / 4;
-    } else if (this.left) {
-      this.rotationOffset = Math.PI * -0.5;
-    } else if (this.right) {
-      this.rotationOffset = Math.PI * 0.5;
+    if (this.controlState && this.controlState.direction !== null) {
+      this.rotationOffset = this.controlState.direction;
     }
   }
   updateAzimuthalAngle() {
@@ -1888,17 +1697,19 @@ var LocalController = class {
     this.config.character.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   processJump(currentAcceleration, deltaTime) {
+    var _a;
+    const jump = (_a = this.controlState) == null ? void 0 : _a.jump;
     if (this.characterOnGround) {
       this.coyoteJumped = false;
       this.canDoubleJump = false;
       this.doubleJumpUsed = false;
       this.jumpCounter = 0;
-      if (!this.jump) {
+      if (!jump) {
         this.canDoubleJump = !this.doubleJumpUsed && this.jumpReleased && this.jumpCounter === 1;
         this.canJump = true;
         this.jumpReleased = true;
       }
-      if (this.jump && this.canJump && this.jumpReleased) {
+      if (jump && this.canJump && this.jumpReleased) {
         currentAcceleration.y += this.jumpForce / deltaTime;
         this.canJump = false;
         this.jumpReleased = false;
@@ -1909,13 +1720,13 @@ var LocalController = class {
         }
       }
     } else {
-      if (this.jump && !this.coyoteJumped && this.coyoteTime) {
+      if (jump && !this.coyoteJumped && this.coyoteTime) {
         this.coyoteJumped = true;
         currentAcceleration.y += this.jumpForce / deltaTime;
         this.canJump = false;
         this.jumpReleased = false;
         this.jumpCounter++;
-      } else if (this.jump && this.canDoubleJump) {
+      } else if (jump && this.canDoubleJump) {
         currentAcceleration.y += this.doubleJumpForce / deltaTime;
         this.doubleJumpUsed = true;
         this.jumpReleased = false;
@@ -1925,7 +1736,7 @@ var LocalController = class {
         this.canJump = false;
       }
     }
-    if (!this.jump) {
+    if (!jump) {
       this.jumpReleased = true;
       if (!this.characterOnGround) {
         currentAcceleration.y += this.gravity;
@@ -1933,31 +1744,19 @@ var LocalController = class {
     }
   }
   applyControls(deltaTime) {
+    var _a;
     const resistance = this.characterOnGround ? this.groundResistance : this.airResistance;
     const speedFactor = Math.pow(1 - resistance, deltaTime);
     this.characterVelocity.multiplyScalar(speedFactor);
     const acceleration = this.tempVector.set(0, 0, 0);
     this.canDoubleJump = !this.doubleJumpUsed && this.jumpReleased && this.jumpCounter === 1;
     this.processJump(acceleration, deltaTime);
-    const control = (this.characterOnGround ? this.run ? this.groundRunControl : this.groundWalkControl : this.airControlModifier) * this.baseControl;
+    const control = (this.characterOnGround ? ((_a = this.controlState) == null ? void 0 : _a.isSprinting) ? this.groundRunControl : this.groundWalkControl : this.airControlModifier) * this.baseControl;
     const controlAcceleration = this.tempVector2.set(0, 0, 0);
-    if (!this.conflictingDirections) {
-      if (this.forward) {
-        const forward = this.tempVector3.set(0, 0, -1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(forward);
-      }
-      if (this.backward) {
-        const backward = this.tempVector3.set(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(backward);
-      }
-      if (this.left) {
-        const left = this.tempVector3.set(-1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(left);
-      }
-      if (this.right) {
-        const right = this.tempVector3.set(1, 0, 0).applyAxisAngle(this.vectorUp, this.azimuthalAngle);
-        controlAcceleration.add(right);
-      }
+    if (this.controlState && this.controlState.direction !== null) {
+      const heading = this.controlState.direction;
+      const headingVector = this.tempVector3.set(0, 0, 1).applyAxisAngle(this.vectorUp, this.azimuthalAngle + heading);
+      controlAcceleration.add(headingVector);
     }
     if (controlAcceleration.length() > 0) {
       controlAcceleration.normalize();
@@ -1968,6 +1767,7 @@ var LocalController = class {
     this.config.character.position.addScaledVector(this.characterVelocity, deltaTime);
   }
   updatePosition(deltaTime, stepDeltaTime, iter) {
+    var _a;
     this.applyControls(stepDeltaTime);
     if (iter === 0) {
       const lastMovement = this.getMovementFromSurfaces(this.config.character.position, deltaTime);
@@ -1999,7 +1799,7 @@ var LocalController = class {
     if (this.characterWasOnGround && !this.characterOnGround) {
       this.characterAirborneSince = Date.now();
     }
-    if (!this.jump) {
+    if (!((_a = this.controlState) == null ? void 0 : _a.jump)) {
       this.jumpReleased = true;
     }
     this.coyoteTime = this.characterVelocity.y < 0 && !this.characterOnGround && Date.now() - this.characterAirborneSince < this.coyoteTimeThreshold;
@@ -2321,7 +2121,11 @@ var CharacterManager = class {
           this.remoteCharacterControllers.delete(id);
         }
       }
-      if (this.config.updateURLLocation && this.config.timeManager.frame % 60 === 0 && document.hasFocus()) {
+      if (this.config.updateURLLocation && this.config.timeManager.frame % 60 === 0 && document.hasFocus() && /*
+       Don't update the URL if the camera is being controlled as some browsers (e.g. Chrome) cause a hitch to Pointer
+       events when the url is updated
+      */
+      !this.config.cameraManager.hasActiveInput()) {
         const hash = encodeCharacterAndCamera(
           this.localCharacter,
           this.config.cameraManager.camera
@@ -2450,35 +2254,236 @@ var KeyInputManager = class {
   isMovementKeyPressed() {
     return ["w" /* W */, "a" /* A */, "s" /* S */, "d" /* D */].some((key) => this.isKeyPressed(key));
   }
-  get forward() {
+  getForward() {
     return this.isKeyPressed("w" /* W */);
   }
-  get backward() {
+  getBackward() {
     return this.isKeyPressed("s" /* S */);
   }
-  get left() {
+  getLeft() {
     return this.isKeyPressed("a" /* A */);
   }
-  get right() {
+  getRight() {
     return this.isKeyPressed("d" /* D */);
   }
-  get run() {
+  getRun() {
     return this.isKeyPressed("shift" /* SHIFT */);
   }
-  get jump() {
+  getJump() {
     return this.isKeyPressed(" " /* SPACE */);
   }
-  get anyDirection() {
-    return this.isMovementKeyPressed();
-  }
-  get conflictingDirection() {
-    return this.isKeyPressed("w" /* W */) && this.isKeyPressed("s" /* S */) || this.isKeyPressed("a" /* A */) && this.isKeyPressed("d" /* D */);
+  getOutput() {
+    const dx = (this.getRight() ? 1 : 0) - (this.getLeft() ? 1 : 0);
+    const dy = (this.getBackward() ? 1 : 0) - (this.getForward() ? 1 : 0);
+    const jump = this.getJump();
+    if (dx === 0 && dy === 0) {
+      if (this.getJump()) {
+        return { direction: null, isSprinting: false, jump };
+      }
+      return null;
+    }
+    const direction = Math.atan2(dx, dy);
+    return { direction, isSprinting: this.getRun(), jump };
   }
   dispose() {
     this.eventHandlerCollection.clear();
   }
 };
 
+// src/input/VirtualJoystick.ts
+var sprintingThreshold = 0.6;
+var VirtualJoystick = class _VirtualJoystick {
+  constructor(holderElement, config) {
+    this.holderElement = holderElement;
+    this.config = config;
+    this.joystickPointerId = null;
+    this.joystickOutput = null;
+    this.jumpPointerId = null;
+    this.clearJoystickState = () => {
+      this.joystickOutput = null;
+      this.joystickCenterElement.style.left = `${this.radius - this.innerRadius}px`;
+      this.joystickCenterElement.style.top = `${this.radius - this.innerRadius}px`;
+    };
+    this.radius = config.radius || 50;
+    this.innerRadius = config.innerRadius || this.radius / 2;
+    this.mouseSupport = this.checkTouch() || config.mouseSupport === true;
+    this.element = document.createElement("div");
+    const style = this.element.style;
+    style.display = this.mouseSupport ? "flex" : "none";
+    style.position = "absolute";
+    style.width = `100%`;
+    style.height = `200px`;
+    style.bottom = "50px";
+    style.zIndex = "10000";
+    style.alignItems = "center";
+    style.justifyContent = "space-between";
+    style.pointerEvents = "none";
+    style.padding = "20px";
+    style.boxSizing = "border-box";
+    style.userSelect = "none";
+    this.holderElement.appendChild(this.element);
+    this.joystickBaseElement = this.createBase();
+    this.element.appendChild(this.joystickBaseElement);
+    this.joystickCenterElement = this.createCenter();
+    this.joystickBaseElement.appendChild(this.joystickCenterElement);
+    this.jumpButton = this.createJumpButton();
+    this.element.appendChild(this.jumpButton);
+    this.bindEvents();
+    this.clearJoystickState();
+  }
+  static checkForTouch() {
+    try {
+      document.createEvent("TouchEvent");
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  checkTouch() {
+    return _VirtualJoystick.checkForTouch();
+  }
+  createBase() {
+    const base = document.createElement("span");
+    const style = base.style;
+    style.touchAction = "pinch-zoom";
+    style.width = `${this.radius * 2}px`;
+    style.height = `${this.radius * 2}px`;
+    style.position = "relative";
+    style.display = "block";
+    style.borderRadius = "50%";
+    style.borderColor = "rgba(200,200,200,0.5)";
+    style.borderWidth = "2px";
+    style.borderStyle = "solid";
+    style.pointerEvents = "auto";
+    style.userSelect = "none";
+    return base;
+  }
+  createCenter() {
+    const center = document.createElement("div");
+    const style = center.style;
+    style.width = `${this.innerRadius * 2}px`;
+    style.height = `${this.innerRadius * 2}px`;
+    style.position = "absolute";
+    style.borderRadius = "50%";
+    style.backgroundColor = "rgba(200,200,200,0.3)";
+    style.borderWidth = "1px";
+    style.borderColor = "rgba(200,200,200,0.8)";
+    style.borderStyle = "solid";
+    style.userSelect = "none";
+    return center;
+  }
+  createJumpButton() {
+    const button = document.createElement("button");
+    button.textContent = "JUMP";
+    const style = button.style;
+    style.touchAction = "pinch-zoom";
+    style.width = `100px`;
+    style.height = `100px`;
+    style.borderRadius = "20px";
+    style.color = "white";
+    style.font = "Helvetica, sans-serif";
+    style.fontSize = "16px";
+    style.backgroundColor = "rgba(200,200,200,0.3)";
+    style.color = "rgba(220,220,220,1)";
+    style.borderWidth = "1px";
+    style.borderColor = "rgba(200,200,200,0.8)";
+    style.borderStyle = "solid";
+    style.pointerEvents = "auto";
+    style.userSelect = "none";
+    return button;
+  }
+  bindEvents() {
+    this.joystickBaseElement.addEventListener("pointerdown", this.onJoystickPointerDown.bind(this));
+    this.joystickBaseElement.addEventListener(
+      "contextmenu",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.joystickBaseElement.addEventListener(
+      "touchstart",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.jumpButton.addEventListener("pointerdown", this.onJumpPointerDown.bind(this));
+    this.jumpButton.addEventListener(
+      "contextmenu",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    this.jumpButton.addEventListener(
+      "touchstart",
+      this.preventDefaultAndStopPropagation.bind(this)
+    );
+    document.addEventListener("pointermove", this.onPointerMove.bind(this));
+    document.addEventListener("pointerup", this.onPointerUp.bind(this));
+    document.addEventListener("pointercancel", this.onPointerUp.bind(this));
+  }
+  preventDefaultAndStopPropagation(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+  onJumpPointerDown(evt) {
+    if (this.jumpPointerId === null) {
+      this.jumpPointerId = evt.pointerId;
+    }
+  }
+  onJoystickPointerDown(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.buttons !== 1) {
+      return;
+    }
+    if (this.joystickPointerId === null) {
+      this.joystickPointerId = evt.pointerId;
+      this.updateControlAndDirection(evt);
+    }
+  }
+  onPointerMove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.pointerId !== this.joystickPointerId) {
+      return;
+    }
+    this.updateControlAndDirection(evt);
+  }
+  onPointerUp(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.pointerId === this.jumpPointerId) {
+      this.jumpPointerId = null;
+    }
+    if (evt.pointerId === this.joystickPointerId) {
+      this.joystickPointerId = null;
+      this.clearJoystickState();
+    }
+  }
+  updateControlAndDirection(input) {
+    const rect = this.joystickBaseElement.getBoundingClientRect();
+    const dx = input.clientX - (rect.left + this.radius);
+    const dy = input.clientY - (rect.top + this.radius);
+    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.joystickCenterElement.style.left = `${constrainedX + this.radius - this.innerRadius}px`;
+    this.joystickCenterElement.style.top = `${constrainedY + this.radius - this.innerRadius}px`;
+    const direction = Math.atan2(dx, dy);
+    const speed = distance / this.radius;
+    const isSprinting = speed > sprintingThreshold;
+    this.joystickOutput = { direction, isSprinting };
+  }
+  getOutput() {
+    const jump = this.jumpPointerId !== null;
+    if (!this.joystickOutput) {
+      if (jump) {
+        return { direction: null, isSprinting: false, jump };
+      }
+      return null;
+    }
+    return {
+      ...this.joystickOutput,
+      jump
+    };
+  }
+};
+
 // src/mml/MMLCompositionScene.ts
 import {
   InteractionManager,