@mml-io/3d-web-client-core 0.18.0 → 0.19.0

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,19 +379,20 @@ 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() {
     this.eventHandlerCollection.clear();
+    document.body.style.cursor = "";
   }
   easeOutExpo(x) {
     return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
@@ -586,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
@@ -1480,6 +1315,9 @@ var Character = class extends Group {
   }
   async load() {
     const previousModel = this.model;
+    if (previousModel && previousModel.mesh) {
+      this.remove(previousModel.mesh);
+    }
     this.model = new CharacterModel({
       characterDescription: this.config.characterDescription,
       animationConfig: this.config.animationConfig,
@@ -1489,9 +1327,6 @@ var Character = class extends Group {
       isLocal: this.config.isLocal
     });
     await this.model.init();
-    if (previousModel && previousModel.mesh) {
-      this.remove(previousModel.mesh);
-    }
     this.add(this.model.mesh);
     if (this.speakingIndicator === null) {
       this.speakingIndicator = new CharacterSpeakingIndicator(this.config.composer.postPostScene);
@@ -1769,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 },
@@ -1776,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++) {
@@ -1829,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() {
@@ -1887,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;
@@ -1908,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;
@@ -1924,7 +1736,7 @@ var LocalController = class {
         this.canJump = false;
       }
     }
-    if (!this.jump) {
+    if (!jump) {
       this.jumpReleased = true;
       if (!this.characterOnGround) {
         currentAcceleration.y += this.gravity;
@@ -1932,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();
@@ -1967,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);
@@ -1998,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;
@@ -2320,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
@@ -2449,41 +2254,243 @@ 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,
   MMLClickTrigger,
   PromptManager,
-  LoadingProgressManager
+  LoadingProgressManager,
+  MMLDocumentTimeManager
 } from "mml-web";
 import { Group as Group3 } from "three";
 var MMLCompositionScene = class {
@@ -2500,6 +2507,7 @@ var MMLCompositionScene = class {
     this.interactionManager = interactionManager;
     this.interactionListener = interactionListener;
     this.loadingProgressManager = new LoadingProgressManager();
+    this.documentTimeManager = new MMLDocumentTimeManager();
     this.mmlScene = {
       getAudioListener: () => this.config.audioListener,
       getRenderer: () => this.config.renderer,
@@ -2533,8 +2541,11 @@ var MMLCompositionScene = class {
       removeChatProbe: (chatProbe) => {
         this.chatProbes.delete(chatProbe);
       },
-      prompt: (promptProps, callback) => {
-        this.promptManager.prompt(promptProps, callback);
+      prompt: (promptProps, abortSignal, callback) => {
+        this.promptManager.prompt(promptProps, abortSignal, callback);
+      },
+      link: (linkProps, abortSignal, windowCallback) => {
+        this.promptManager.link(linkProps, abortSignal, windowCallback);
       },
       getLoadingProgressManager: () => {
         return this.loadingProgressManager;
@@ -3436,24 +3447,27 @@ var TweakPane = class {
     this.characterControls = new CharacterControlsFolder(this.gui, false);
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
-    this.setupGUIListeners();
-    window.addEventListener("keydown", (e) => {
-      this.processKey(e);
-    });
-  }
-  setupGUIListeners() {
+    this.eventHandlerCollection = new EventHandlerCollection();
     const gui = this.gui;
     const paneElement = gui.containerElem_;
     paneElement.style.right = this.guiVisible ? "0px" : "-450px";
-    this.gui.element.addEventListener("mouseenter", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousemove", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mousedown", () => setTweakpaneActive(true));
-    this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
-    this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(this.gui.element, "mouseenter", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousemove", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(this.gui.element, "mousedown", () => setTweakpaneActive(true));
+    this.eventHandlerCollection.add(
+      this.gui.element,
+      "mouseleave",
+      () => setTweakpaneActive(false)
+    );
+    this.eventHandlerCollection.add(this.gui.element, "mouseup", () => setTweakpaneActive(false));
+    this.eventHandlerCollection.add(window, "keydown", (e) => {
+      this.processKey(e);
+    });
   }
   processKey(e) {
-    if (e.key === "p")
+    if (e.key === "p") {
       this.toggleGUI();
+    }
   }
   setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
@@ -3487,6 +3501,7 @@ var TweakPane = class {
     });
   }
   dispose() {
+    this.eventHandlerCollection.clear();
     this.gui.dispose();
     this.tweakPaneWrapper.remove();
   }
@@ -5144,12 +5159,12 @@ var Composer = class {
     this.width = 1;
     this.height = 1;
     this.resolution = new Vector27(this.width, this.height);
-    this.isEnvHDRI = false;
     this.bcs = BrightnessContrastSaturation;
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
+    this.skyboxState = { src: {}, latestPromise: null };
     this.sun = null;
-    var _a;
+    var _a, _b;
     this.scene = scene;
     this.postPostScene = new Scene4();
     this.camera = camera;
@@ -5262,6 +5277,13 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    if ((_b = this.environmentConfiguration) == null ? void 0 : _b.skybox) {
+      if ("hdrJpgUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRJPG(this.environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in this.environmentConfiguration.skybox) {
+        this.useHDRI(this.environmentConfiguration.skybox.hdrUrl);
+      }
+    }
     this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
@@ -5269,6 +5291,19 @@ var Composer = class {
     window.addEventListener("resize", this.resizeListener, false);
     this.fitContainer();
   }
+  updateEnvironmentConfiguration(environmentConfiguration) {
+    this.environmentConfiguration = environmentConfiguration;
+    if (environmentConfiguration.skybox) {
+      if ("hdrJpgUrl" in environmentConfiguration.skybox) {
+        this.useHDRJPG(environmentConfiguration.skybox.hdrJpgUrl);
+      } else if ("hdrUrl" in environmentConfiguration.skybox) {
+        this.useHDRI(environmentConfiguration.skybox.hdrUrl);
+      }
+    }
+    this.updateSkyboxAndEnvValues();
+    this.updateAmbientLightValues();
+    this.updateSunValues();
+  }
   setupTweakPane(tweakPane) {
     tweakPane.setupRenderPane(
       this.effectComposer,
@@ -5359,71 +5394,71 @@ var Composer = class {
       0
     );
   }
-  useHDRJPG(url, fromFile = false) {
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
-      const hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
-      hdrJpgEquirectangularMap.mapping = EquirectangularReflectionMapping;
-      hdrJpgEquirectangularMap.needsUpdate = true;
-      const envMap = pmremGenerator.fromEquirectangular(hdrJpgEquirectangularMap).texture;
-      if (envMap) {
-        envMap.colorSpace = LinearSRGBColorSpace;
-        envMap.needsUpdate = true;
-        this.scene.environment = envMap;
-        this.scene.environmentIntensity = envValues.envMapIntensity;
-        this.scene.environmentRotation = new Euler3(
-          MathUtils.degToRad(envValues.skyboxPolarAngle),
-          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-          0
-        );
-        this.scene.background = envMap;
-        this.scene.backgroundIntensity = envValues.skyboxIntensity;
-        this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
-        this.scene.backgroundRotation = new Euler3(
-          MathUtils.degToRad(envValues.skyboxPolarAngle),
-          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-          0
-        );
-        this.isEnvHDRI = true;
+  async loadHDRJPG(url) {
+    return new Promise((resolve, reject) => {
+      const pmremGenerator = new PMREMGenerator(this.renderer);
+      const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
+        const hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
+        hdrJpgEquirectangularMap.mapping = EquirectangularReflectionMapping;
+        hdrJpgEquirectangularMap.needsUpdate = true;
+        const envMap = pmremGenerator.fromEquirectangular(hdrJpgEquirectangularMap).texture;
         hdrJpgEquirectangularMap.dispose();
         pmremGenerator.dispose();
-      }
-      hdrJpg.dispose();
+        hdrJpg.dispose();
+        if (envMap) {
+          envMap.colorSpace = LinearSRGBColorSpace;
+          envMap.needsUpdate = true;
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
+        }
+      });
     });
   }
-  useHDRI(url, fromFile = false) {
-    if (this.isEnvHDRI && fromFile === false || !this.renderer) {
-      return;
-    }
-    const pmremGenerator = new PMREMGenerator(this.renderer);
-    new RGBELoader(new LoadingManager()).load(
-      url,
-      (texture) => {
+  async loadHDRi(url) {
+    return new Promise((resolve, reject) => {
+      const pmremGenerator = new PMREMGenerator(this.renderer);
+      new RGBELoader(new LoadingManager()).load(url, (texture) => {
         const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        texture.dispose();
+        pmremGenerator.dispose();
         if (envMap) {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
-          this.scene.environment = envMap;
-          this.scene.environmentIntensity = envValues.envMapIntensity;
-          this.scene.environmentRotation = new Euler3(
-            MathUtils.degToRad(envValues.skyboxPolarAngle),
-            MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
-            0
-          );
-          this.scene.background = envMap;
-          this.scene.backgroundIntensity = envValues.skyboxIntensity;
-          this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
-          this.isEnvHDRI = true;
-          texture.dispose();
-          pmremGenerator.dispose();
+          resolve(envMap);
+        } else {
+          reject("Failed to generate environment map");
         }
-      },
-      () => {
-      },
-      (error) => {
-        console.error(`Can't load ${url}: ${JSON.stringify(error)}`);
+      });
+    });
+  }
+  useHDRJPG(url, fromFile = false) {
+    if (this.skyboxState.src.hdrJpgUrl === url) {
+      return;
+    }
+    const hdrJPGPromise = this.loadHDRJPG(url);
+    this.skyboxState.src = { hdrJpgUrl: url };
+    this.skyboxState.latestPromise = hdrJPGPromise;
+    hdrJPGPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrJPGPromise) {
+        return;
       }
-    );
+      this.applyEnvMap(envMap);
+    });
+  }
+  useHDRI(url) {
+    if (this.skyboxState.src.hdrUrl === url) {
+      return;
+    }
+    const hdrPromise = this.loadHDRi(url);
+    this.skyboxState.src = { hdrUrl: url };
+    this.skyboxState.latestPromise = hdrPromise;
+    hdrPromise.then((envMap) => {
+      if (this.skyboxState.latestPromise !== hdrPromise) {
+        return;
+      }
+      this.applyEnvMap(envMap);
+    });
   }
   setHDRIFromFile() {
     if (!this.renderer)
@@ -5442,7 +5477,7 @@ var Composer = class {
       const fileURL = URL.createObjectURL(file);
       if (fileURL) {
         if (extension === "hdr") {
-          this.useHDRI(fileURL, true);
+          this.useHDRI(fileURL);
         } else if (extension === "jpg") {
           this.useHDRJPG(fileURL);
         } else {
@@ -5524,6 +5559,23 @@ var Composer = class {
     }
     this.setAmbientLight();
   }
+  applyEnvMap(envMap) {
+    this.scene.environment = envMap;
+    this.scene.environmentIntensity = envValues.envMapIntensity;
+    this.scene.environmentRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+    this.scene.background = envMap;
+    this.scene.backgroundIntensity = envValues.skyboxIntensity;
+    this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
+    this.scene.backgroundRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
+      0
+    );
+  }
 };
 
 // src/time/TimeManager.ts