@mml-io/3d-web-client-core 0.0.0-experimental-6ac3eeb-20240518 → 0.0.0-experimental-2404df1-20240520

package/build/camera/CameraManager.d.ts

@@ -1,22 +1,26 @@
 import { PerspectiveCamera, Vector3 } from "three";
 import { CollisionsManager } from "../collisions/CollisionsManager";
+import { TweakPane } from "../tweakpane/TweakPane";
 export declare class CameraManager {
     private collisionsManager;
     readonly camera: PerspectiveCamera;
     initialDistance: number;
-    private minDistance;
-    private maxDistance;
-    private initialFOV;
-    private fov;
-    private minFOV;
-    private maxFOV;
+    minDistance: number;
+    maxDistance: number;
+    initialFOV: number;
+    maxFOV: number;
+    minFOV: number;
+    damping: number;
+    dampingScale: number;
+    zoomScale: number;
+    invertFOVMapping: boolean;
+    fov: number;
     private targetFOV;
     minPolarAngle: number;
     private maxPolarAngle;
-    private dampingFactor;
     targetDistance: number;
-    private distance;
-    private desiredDistance;
+    distance: number;
+    desiredDistance: number;
     private targetPhi;
     private phi;
     private targetTheta;
@@ -35,6 +39,7 @@ export declare class CameraManager {
     private lastTouchX;
     private lastTouchY;
     constructor(targetElement: HTMLElement, collisionsManager: CollisionsManager, initialPhi?: number, initialTheta?: number);
+    setupTweakPane(tweakPane: TweakPane): void;
     private onTouchStart;
     private onTouchMove;
     private onTouchEnd;
@@ -49,5 +54,6 @@ export declare class CameraManager {
     dispose(): void;
     private easeOutExpo;
     updateAspect(aspect: number): void;
+    recomputeFoV(immediately?: boolean): void;
     update(): void;
 }

package/build/index.js

@@ -235,6 +235,124 @@ var VirtualJoystick = class _VirtualJoystick {
   }
 };
 
+// src/tweakpane/blades/cameraFolder.ts
+var camValues = {
+  initialDistance: 3.3,
+  minDistance: 0.1,
+  maxDistance: 8,
+  initialFOV: 60,
+  maxFOV: 85,
+  minFOV: 60,
+  invertFOVMapping: false,
+  damping: 0.091,
+  dampingScale: 0.01,
+  zoomScale: 0.01
+};
+var camOptions = {
+  initialDistance: { min: 1, max: 5, step: 0.1 },
+  minDistance: { min: 0.1, max: 2, step: 0.1 },
+  maxDistance: { min: 5, max: 20, step: 0.5 },
+  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 },
+  zoomScale: { min: 5e-3, max: 0.025, step: 1e-3 }
+};
+var CameraFolder = class {
+  constructor(parentFolder, expand = false) {
+    this.camData = {
+      distance: "0",
+      FoV: "0"
+    };
+    this.folder = parentFolder.addFolder({ title: "camera", expanded: expand });
+    this.folder.addBinding(this.camData, "distance", { readonly: true });
+    this.folder.addBinding(this.camData, "FoV", { readonly: true });
+    this.folder.addBinding(camValues, "initialDistance", camOptions.initialDistance);
+    this.folder.addBinding(camValues, "minDistance", camOptions.minDistance);
+    this.folder.addBinding(camValues, "maxDistance", camOptions.maxDistance);
+    this.folder.addBinding(camValues, "minFOV", camOptions.minFOV);
+    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);
+  }
+  setupChangeEvent(cameraManager) {
+    this.folder.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "initialDistance": {
+          const value = e.value;
+          cameraManager.initialDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "minDistance": {
+          const value = e.value;
+          cameraManager.minDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "maxDistance": {
+          const value = e.value;
+          cameraManager.maxDistance = value;
+          cameraManager.distance = value;
+          cameraManager.targetDistance = value;
+          cameraManager.desiredDistance = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "minFOV": {
+          const value = e.value;
+          cameraManager.minFOV = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        case "maxFOV": {
+          const value = e.value;
+          cameraManager.maxFOV = value;
+          cameraManager.recomputeFoV();
+          break;
+        }
+        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;
+          break;
+        }
+        default:
+          break;
+      }
+    });
+  }
+  update(cameraManager) {
+    this.camData.distance = cameraManager.distance.toFixed(2);
+    this.camData.FoV = cameraManager.fov.toFixed(2);
+  }
+};
+
 // src/tweakpane/tweakPaneActivity.ts
 var isTweakpaneActive = false;
 function setTweakpaneActive(status) {
@@ -248,17 +366,20 @@ function getTweakpaneActive() {
 var CameraManager = class {
   constructor(targetElement, collisionsManager, initialPhi = Math.PI / 2, initialTheta = -Math.PI / 2) {
     this.collisionsManager = collisionsManager;
-    this.initialDistance = 3.3;
-    this.minDistance = 0.1;
-    this.maxDistance = 8;
-    this.initialFOV = 60;
+    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.invertFOVMapping = camValues.invertFOVMapping;
     this.fov = this.initialFOV;
-    this.minFOV = 85;
-    this.maxFOV = 60;
     this.targetFOV = this.initialFOV;
     this.minPolarAngle = Math.PI * 0.25;
     this.maxPolarAngle = Math.PI * 0.95;
-    this.dampingFactor = 0.091;
     this.targetDistance = this.initialDistance;
     this.distance = this.initialDistance;
     this.desiredDistance = this.initialDistance;
@@ -301,6 +422,9 @@ var CameraManager = class {
       });
     }
   }
+  setupTweakPane(tweakPane) {
+    tweakPane.setupCamPane(this);
+  }
   onTouchStart(evt) {
     Array.from(evt.touches).forEach((touch) => {
       this.dragging = true;
@@ -320,8 +444,8 @@ var CameraManager = class {
       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.targetTheta += dx * this.dampingScale;
+        this.targetPhi -= dy * this.dampingScale;
         this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
       }
     }
@@ -345,13 +469,13 @@ var CameraManager = class {
       return;
     if (this.targetTheta === null || this.targetPhi === null)
       return;
-    this.targetTheta += event.movementX * 0.01;
-    this.targetPhi -= event.movementY * 0.01;
+    this.targetTheta += event.movementX * this.dampingScale;
+    this.targetPhi -= event.movementY * this.dampingScale;
     this.targetPhi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.targetPhi));
     event.preventDefault();
   }
   onMouseWheel(event) {
-    const scrollAmount = event.deltaY * 1e-3;
+    const scrollAmount = event.deltaY * this.zoomScale * 0.1;
     this.targetDistance += scrollAmount;
     this.targetDistance = Math.max(
       this.minDistance,
@@ -390,14 +514,7 @@ var CameraManager = class {
     this.theta = this.targetTheta;
     this.distance = this.targetDistance;
     this.desiredDistance = this.targetDistance;
-    this.targetFOV = remap(
-      this.targetDistance,
-      this.minDistance,
-      this.maxDistance,
-      this.minFOV,
-      this.maxFOV
-    );
-    this.fov = this.targetFOV;
+    this.recomputeFoV(true);
   }
   adjustCameraPosition() {
     const offsetDistance = 0.5;
@@ -412,7 +529,7 @@ var CameraManager = class {
       this.targetDistance = cameraToPlayerDistance - firstRaycastHit[0];
       this.distance = this.targetDistance;
     } else {
-      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.dampingFactor * 4;
+      this.targetDistance += (this.desiredDistance - this.targetDistance) * this.damping * 4;
     }
   }
   dispose() {
@@ -424,6 +541,18 @@ var CameraManager = class {
   updateAspect(aspect) {
     this.camera.aspect = aspect;
   }
+  recomputeFoV(immediately = false) {
+    this.targetFOV = remap(
+      this.targetDistance,
+      this.minDistance,
+      this.maxDistance,
+      this.invertFOVMapping ? this.minFOV : this.maxFOV,
+      this.invertFOVMapping ? this.maxFOV : this.minFOV
+    );
+    if (immediately) {
+      this.fov = this.targetFOV;
+    }
+  }
   update() {
     if (this.isLerping && this.lerpFactor < 1) {
       this.lerpFactor += 0.01 / this.lerpDuration;
@@ -433,20 +562,14 @@ var CameraManager = class {
       this.adjustCameraPosition();
     }
     if (this.phi !== null && this.targetPhi !== null && this.theta !== null && this.targetTheta !== null) {
-      this.distance += (this.targetDistance - this.distance) * this.dampingFactor * 0.21;
-      this.phi += (this.targetPhi - this.phi) * this.dampingFactor;
-      this.theta += (this.targetTheta - this.theta) * this.dampingFactor;
+      this.distance += (this.targetDistance - this.distance) * this.damping * 0.21;
+      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.targetFOV = remap(
-        this.targetDistance,
-        this.minDistance,
-        this.maxDistance,
-        this.minFOV,
-        this.maxFOV
-      );
-      this.fov += (this.targetFOV - this.fov) * this.dampingFactor;
+      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);
@@ -713,7 +836,7 @@ var CharacterMaterial = class extends MeshStandardMaterial {
   }
   update() {
     if (this.config.isLocal) {
-      this.targetAlpha = this.config.cameraManager.targetDistance < 0.4 ? 0 : 1;
+      this.targetAlpha = this.config.cameraManager.distance < 0.4 ? 0 : 1;
       this.currentAlpha += ease(this.targetAlpha, this.currentAlpha, 0.07);
       if (this.currentAlpha > 0.999) {
         this.currentAlpha = 1;
@@ -764,22 +887,24 @@ var _CharacterModel = class _CharacterModel {
   }
   async init() {
     await this.loadMainMesh();
-    await this.setAnimationFromFile(
-      this.config.animationConfig.idleAnimationFileUrl,
-      0 /* idle */
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.jogAnimationFileUrl,
-      1 /* walking */
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.sprintAnimationFileUrl,
-      2 /* running */
-    );
-    await this.setAnimationFromFile(
-      this.config.animationConfig.airAnimationFileUrl,
-      4 /* air */
-    );
+    await Promise.all([
+      this.setAnimationFromFile(
+        this.config.animationConfig.idleAnimationFileUrl,
+        0 /* idle */
+      ),
+      this.setAnimationFromFile(
+        this.config.animationConfig.jogAnimationFileUrl,
+        1 /* walking */
+      ),
+      this.setAnimationFromFile(
+        this.config.animationConfig.sprintAnimationFileUrl,
+        2 /* running */
+      ),
+      this.setAnimationFromFile(
+        this.config.animationConfig.airAnimationFileUrl,
+        4 /* air */
+      )
+    ]);
     this.applyCustomMaterials();
   }
   applyCustomMaterials() {
@@ -2198,6 +2323,10 @@ var sunOptions = {
   sunIntensity: { min: 0, max: 10, step: 0.1 }
 };
 var envValues = {
+  hdrAzimuthalAngle: 0,
+  hdrPolarAngle: 0,
+  hdrIntensity: 0.8,
+  hdrBlurriness: 0,
   ambientLight: {
     ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 }
@@ -2209,6 +2338,10 @@ var envValues = {
   }
 };
 var envOptions = {
+  hdrAzimuthalAngle: { min: 0, max: 360, step: 1 },
+  hdrPolarAngle: { min: 0, max: 360, step: 1 },
+  hdrIntensity: { min: 0, max: 1.3, step: 0.01 },
+  hdrBlurriness: { min: 0, max: 0.1, step: 1e-3 },
   ambientLight: {
     ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
   },
@@ -2236,7 +2369,11 @@ var EnvironmentFolder = class {
     this.sun.addBinding(sunValues, "sunColor", {
       color: { type: "float" }
     });
-    this.sunButton = this.sun.addButton({ title: "Set HDRI" });
+    this.hdrButton = this.ambient.addButton({ title: "Set HDRI" });
+    this.ambient.addBinding(envValues, "hdrIntensity", envOptions.hdrIntensity);
+    this.ambient.addBinding(envValues, "hdrBlurriness", envOptions.hdrBlurriness);
+    this.ambient.addBinding(envValues, "hdrAzimuthalAngle", envOptions.hdrAzimuthalAngle);
+    this.ambient.addBinding(envValues, "hdrPolarAngle", envOptions.hdrPolarAngle);
     this.ambient.addBinding(
       envValues.ambientLight,
       "ambientLightIntensity",
@@ -2251,7 +2388,7 @@ var EnvironmentFolder = class {
       color: { type: "float" }
     });
   }
-  setupChangeEvent(setHDR, setAmbientLight, setFog, sun) {
+  setupChangeEvent(scene, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog, sun) {
     this.sun.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2286,7 +2423,7 @@ var EnvironmentFolder = class {
           break;
       }
     });
-    this.sunButton.on("click", () => {
+    this.hdrButton.on("click", () => {
       setHDR();
     });
     this.ambient.on("change", (e) => {
@@ -2294,6 +2431,22 @@ var EnvironmentFolder = class {
       if (!target)
         return;
       switch (target) {
+        case "hdrAzimuthalAngle": {
+          const value = e.value;
+          setHDRAzimuthalAngle(value);
+          break;
+        }
+        case "hdrPolarAngle": {
+          const value = e.value;
+          setHDRPolarAngle(value);
+          break;
+        }
+        case "hdrIntensity":
+          scene.backgroundIntensity = e.value;
+          break;
+        case "hdrBlurriness":
+          scene.backgroundBlurriness = e.value;
+          break;
         case "ambientLightIntensity": {
           envValues.ambientLight.ambientLightIntensity = e.value;
           setAmbientLight();
@@ -2339,7 +2492,7 @@ var EnvironmentFolder = class {
 // src/tweakpane/blades/postExtrasFolder.ts
 var extrasValues = {
   grain: 0.045,
-  bloom: 0.75
+  bloom: 0.15
 };
 var extrasOptions = {
   grain: {
@@ -2378,16 +2531,12 @@ var PostExtrasFolder = class {
 var rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
-  exposure: 1.7,
-  bgIntensity: 0.8,
-  bgBlurriness: 0
+  exposure: 1.7
 };
 var rendererOptions = {
   shadowMap: { min: 0, max: 2, step: 1 },
   toneMapping: { min: 0, max: 5, step: 1 },
-  exposure: { min: 0, max: 3, step: 0.01 },
-  bgIntensity: { min: 0, max: 1.3, step: 0.01 },
-  bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
+  exposure: { min: 0, max: 3, step: 0.01 }
 };
 var shadowMapTypes = {
   0: "BasicShadowMap",
@@ -2425,10 +2574,8 @@ var RendererFolder = class {
     this.folder.addBinding(rendererValues, "toneMapping", rendererOptions.toneMapping);
     this.folder.addBinding(monitoredValues, "toneMappingType", { readonly: true });
     this.folder.addBinding(rendererValues, "exposure", rendererOptions.exposure);
-    this.folder.addBinding(rendererValues, "bgIntensity", rendererOptions.bgIntensity);
-    this.folder.addBinding(rendererValues, "bgBlurriness", rendererOptions.bgBlurriness);
   }
-  setupChangeEvent(scene, renderer, toneMappingFolder, toneMappingPass) {
+  setupChangeEvent(renderer, toneMappingFolder, toneMappingPass) {
     this.folder.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2449,12 +2596,6 @@ var RendererFolder = class {
         case "exposure":
           renderer.toneMappingExposure = e.value;
           break;
-        case "bgIntensity":
-          scene.backgroundIntensity = e.value;
-          break;
-        case "bgBlurriness":
-          scene.backgroundBlurriness = e.value;
-          break;
         default:
           break;
       }
@@ -2543,7 +2684,7 @@ var n8ssaoValues = {
   halfRes: true,
   aoRadius: 5,
   distanceFalloff: 3,
-  intensity: 1,
+  intensity: 1.5,
   color: { r: 0, g: 0, b: 0 },
   aoSamples: 16,
   denoiseSamples: 4,
@@ -2967,6 +3108,7 @@ var TweakPane = class {
     this.postExtrasFolder = new PostExtrasFolder(this.gui, false);
     this.character = new CharacterFolder(this.gui, false);
     this.environment = new EnvironmentFolder(this.gui, false);
+    this.camera = new CameraFolder(this.gui, false);
     this.toneMappingFolder.folder.hidden = rendererValues.toneMapping === 5 ? false : true;
     this.export = this.gui.addFolder({ title: "import / export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
@@ -2986,9 +3128,8 @@ var TweakPane = class {
     if (e.key === "p")
       this.toggleGUI();
   }
-  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
+  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
-      this.scene,
       this.renderer,
       this.toneMappingFolder.folder,
       toneMappingPass
@@ -2997,7 +3138,15 @@ var TweakPane = class {
     this.ssaoFolder.setupChangeEvent(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass);
     this.bcsFolder.setupChangeEvent(brightnessContrastSaturation);
     this.postExtrasFolder.setupChangeEvent(bloomEffect, gaussGrainEffect);
-    this.environment.setupChangeEvent(setHDR, setAmbientLight, setFog, sun);
+    this.environment.setupChangeEvent(
+      this.scene,
+      setHDR,
+      setHDRAzimuthalAngle,
+      setHDRPolarAngle,
+      setAmbientLight,
+      setFog,
+      sun
+    );
     this.environment.folder.hidden = hasLighting === false || sun === null;
     const exportButton = this.export.addButton({ title: "export" });
     exportButton.on("click", () => {
@@ -3010,9 +3159,15 @@ var TweakPane = class {
       });
     });
   }
+  setupCamPane(cameraManager) {
+    this.camera.setupChangeEvent(cameraManager);
+  }
   updateStats(timeManager) {
     this.renderStatsFolder.update(this.renderer, this.composer, timeManager);
   }
+  updateCameraData(cameraManager) {
+    this.camera.update(cameraManager);
+  }
   formatDateForFilename() {
     const date = /* @__PURE__ */ new Date();
     const year = date.getFullYear();
@@ -3098,7 +3253,9 @@ import {
   Scene as Scene4,
   Vector2 as Vector27,
   WebGLRenderer as WebGLRenderer4,
-  EquirectangularReflectionMapping
+  EquirectangularReflectionMapping,
+  MathUtils,
+  Euler as Euler3
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
@@ -4665,6 +4822,8 @@ var Composer = class {
     this.renderer.shadowMap.type = rendererValues.shadowMap;
     this.renderer.toneMapping = rendererValues.toneMapping;
     this.renderer.toneMappingExposure = rendererValues.exposure;
+    this.scene.backgroundIntensity = envValues.hdrIntensity;
+    this.scene.backgroundBlurriness = envValues.hdrBlurriness;
     this.setAmbientLight();
     this.setFog();
     this.effectComposer = new EffectComposer2(this.renderer, {
@@ -4778,6 +4937,8 @@ var Composer = class {
       this.spawnSun,
       this.sun,
       this.setHDRIFromFile.bind(this),
+      this.setHDRAzimuthalAngle.bind(this),
+      this.setHDRPolarAngle.bind(this),
       this.setAmbientLight.bind(this),
       this.setFog.bind(this)
     );
@@ -4832,6 +4993,20 @@ var Composer = class {
     this.renderer.clearDepth();
     this.renderer.render(this.postPostScene, this.camera);
   }
+  setHDRAzimuthalAngle(azimuthalAngle) {
+    this.scene.backgroundRotation = new Euler3(
+      MathUtils.degToRad(envValues.hdrPolarAngle),
+      MathUtils.degToRad(azimuthalAngle),
+      0
+    );
+  }
+  setHDRPolarAngle(polarAngle) {
+    this.scene.backgroundRotation = new Euler3(
+      MathUtils.degToRad(polarAngle),
+      MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+      0
+    );
+  }
   useHDRJPG(url, fromFile = false) {
     const pmremGenerator = new PMREMGenerator(this.renderer);
     const hdrJpg = new HDRJPGLoader(this.renderer).load(url, () => {
@@ -4843,7 +5018,13 @@ var Composer = class {
         envMap.colorSpace = LinearSRGBColorSpace;
         envMap.needsUpdate = true;
         this.scene.background = envMap;
-        this.scene.backgroundIntensity = rendererValues.bgIntensity;
+        this.scene.backgroundIntensity = envValues.hdrIntensity;
+        this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+        this.scene.backgroundRotation = new Euler3(
+          MathUtils.degToRad(envValues.hdrPolarAngle),
+          MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+          0
+        );
         this.isEnvHDRI = true;
         hdrJpgEquirectangularMap.dispose();
         pmremGenerator.dispose();
@@ -4863,7 +5044,8 @@ var Composer = class {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
           this.scene.background = envMap;
-          this.scene.backgroundIntensity = rendererValues.bgIntensity;
+          this.scene.backgroundIntensity = envValues.hdrIntensity;
+          this.scene.backgroundBlurriness = envValues.hdrBlurriness;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -4987,7 +5169,7 @@ import {
   Box3,
   Color as Color8,
   DoubleSide,
-  Euler as Euler3,
+  Euler as Euler4,
   Group as Group5,
   Line3 as Line32,
   Matrix4 as Matrix46,
@@ -4995,7 +5177,7 @@ import {
   MeshBasicMaterial as MeshBasicMaterial3,
   Quaternion as Quaternion6,
   Ray as Ray2,
-  Vector3 as Vector315
+  Vector3 as Vector314
 } from "three";
 import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
@@ -5003,15 +5185,15 @@ import { MeshBVH, MeshBVHHelper } from "three-mesh-bvh";
 var CollisionsManager = class {
   constructor(scene) {
     this.debug = false;
-    this.tempVector = new Vector315();
-    this.tempVector2 = new Vector315();
-    this.tempVector3 = new Vector315();
+    this.tempVector = new Vector314();
+    this.tempVector2 = new Vector314();
+    this.tempVector3 = new Vector314();
     this.tempQuaternion = new Quaternion6();
     this.tempRay = new Ray2();
     this.tempMatrix = new Matrix46();
     this.tempMatrix2 = new Matrix46();
     this.tempBox = new Box3();
-    this.tempEuler = new Euler3();
+    this.tempEuler = new Euler4();
     this.tempSegment = new Line32();
     this.tempSegment2 = new Line32();
     this.collisionMeshState = /* @__PURE__ */ new Map();
@@ -5021,7 +5203,7 @@ var CollisionsManager = class {
   raycastFirst(ray) {
     let minimumDistance = null;
     let minimumHit = null;
-    let minimumNormal = new Vector315();
+    let minimumNormal = new Vector314();
     for (const [, collisionMeshState] of this.collisionMeshState) {
       this.tempRay.copy(ray).applyMatrix4(this.tempMatrix.copy(collisionMeshState.matrix).invert());
       const hit = collisionMeshState.meshBVH.raycastFirst(this.tempRay, DoubleSide);
@@ -5162,7 +5344,7 @@ var CollisionsManager = class {
         const realDistance = intersectionSegment.distance();
         if (realDistance < capsuleRadius) {
           if (!collisionPosition) {
-            collisionPosition = new Vector315().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
+            collisionPosition = new Vector314().copy(closestPointOnSegment).applyMatrix4(meshState.matrix);
           }
           const ratio = realDistance / modelReferenceDistance;
           const realDepth = capsuleRadius - realDistance;