@mml-io/3d-web-client-core 0.0.0-experimental-8634a66-20240605 → 0.0.0-experimental-27180bc-20240609

package/build/index.js

@@ -2615,11 +2615,11 @@ var sunOptions = {
   sunIntensity: { min: 0, max: 10, step: 0.1 }
 };
 var envValues = {
-  hdrAzimuthalAngle: 0,
-  hdrPolarAngle: 0,
-  hdrEnvIntensity: 0.07,
-  hdrIntensity: 0.8,
-  hdrBlurriness: 0,
+  skyboxAzimuthalAngle: 0,
+  skyboxPolarAngle: 0,
+  envMapIntensity: 0.07,
+  skyboxIntensity: 0.8,
+  skyboxBlurriness: 0,
   ambientLight: {
     ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 }
@@ -2631,10 +2631,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 },
+  skyboxAzimuthalAngle: { min: 0, max: 360, step: 1 },
+  skyboxPolarAngle: { min: 0, max: 360, step: 1 },
+  skyboxIntensity: { min: 0, max: 1.3, step: 0.01 },
+  skyboxBlurriness: { min: 0, max: 0.1, step: 1e-3 },
   ambientLight: {
     ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
   },
@@ -2647,6 +2647,9 @@ var EnvironmentFolder = class {
   constructor(parentFolder, expand = false) {
     this.folder = parentFolder.addFolder({ title: "environment", expanded: expand });
     this.sun = this.folder.addFolder({ title: "sun", expanded: true });
+    this.envMap = this.folder.addFolder({ title: "envMap", expanded: true });
+    this.fog = this.folder.addFolder({ title: "fog", expanded: true });
+    this.skybox = this.folder.addFolder({ title: "skybox", expanded: true });
     this.ambient = this.folder.addFolder({ title: "ambient", expanded: true });
     this.sun.addBinding(
       sunValues.sunPosition,
@@ -2662,11 +2665,12 @@ var EnvironmentFolder = class {
     this.sun.addBinding(sunValues, "sunColor", {
       color: { type: "float" }
     });
-    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.hdrButton = this.skybox.addButton({ title: "Set HDRI" });
+    this.skybox.addBinding(envValues, "skyboxIntensity", envOptions.skyboxIntensity);
+    this.skybox.addBinding(envValues, "skyboxBlurriness", envOptions.skyboxBlurriness);
+    this.skybox.addBinding(envValues, "skyboxAzimuthalAngle", envOptions.skyboxAzimuthalAngle);
+    this.skybox.addBinding(envValues, "skyboxPolarAngle", envOptions.skyboxPolarAngle);
+    this.envMap.addBinding(envValues, "envMapIntensity", envOptions.skyboxIntensity);
     this.ambient.addBinding(
       envValues.ambientLight,
       "ambientLightIntensity",
@@ -2675,13 +2679,13 @@ var EnvironmentFolder = class {
     this.ambient.addBinding(envValues.ambientLight, "ambientLightColor", {
       color: { type: "float" }
     });
-    this.ambient.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
-    this.ambient.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
-    this.ambient.addBinding(envValues.fog, "fogColor", {
+    this.fog.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
+    this.fog.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
+    this.fog.addBinding(envValues.fog, "fogColor", {
       color: { type: "float" }
     });
   }
-  setupChangeEvent(scene, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog, sun) {
+  setupChangeEvent(scene, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog, sun) {
     this.sun.on("change", (e) => {
       const target = e.target.key;
       if (!target)
@@ -2719,27 +2723,45 @@ var EnvironmentFolder = class {
     this.hdrButton.on("click", () => {
       setHDR();
     });
-    this.ambient.on("change", (e) => {
+    this.envMap.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        case "envMapIntensity":
+          scene.environmentIntensity = e.value;
+          break;
+      }
+    });
+    this.skybox.on("change", (e) => {
       const target = e.target.key;
       if (!target)
         return;
       switch (target) {
-        case "hdrAzimuthalAngle": {
+        case "skyboxAzimuthalAngle": {
           const value = e.value;
-          setHDRAzimuthalAngle(value);
+          setSkyboxAzimuthalAngle(value);
           break;
         }
-        case "hdrPolarAngle": {
+        case "skyboxPolarAngle": {
           const value = e.value;
-          setHDRPolarAngle(value);
+          envValues.skyboxPolarAngle = value;
+          setSkyboxPolarAngle(value);
           break;
         }
-        case "hdrIntensity":
+        case "skyboxIntensity":
           scene.backgroundIntensity = e.value;
           break;
-        case "hdrBlurriness":
+        case "skyboxBlurriness":
           scene.backgroundBlurriness = e.value;
           break;
+      }
+    });
+    this.ambient.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
         case "ambientLightIntensity": {
           envValues.ambientLight.ambientLightIntensity = e.value;
           setAmbientLight();
@@ -2755,6 +2777,13 @@ var EnvironmentFolder = class {
           setAmbientLight();
           break;
         }
+      }
+    });
+    this.fog.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
         case "fogNear": {
           envValues.fog.fogNear = e.value;
           setFog();
@@ -2775,8 +2804,6 @@ var EnvironmentFolder = class {
           setFog();
           break;
         }
-        default:
-          break;
       }
     });
   }
@@ -3405,9 +3432,10 @@ 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 });
-    window.addEventListener("keydown", this.processKey.bind(this));
-    this.setupRenderPane = this.setupRenderPane.bind(this);
-    this.setupGUIListeners.bind(this)();
+    window.addEventListener("keydown", (e) => {
+      this.processKey(e);
+    });
+    this.setupGUIListeners();
   }
   setupGUIListeners() {
     const gui = this.gui;
@@ -3422,7 +3450,7 @@ var TweakPane = class {
     if (e.key === "p")
       this.toggleGUI();
   }
-  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setHDRAzimuthalAngle, setHDRPolarAngle, setAmbientLight, setFog) {
+  setupRenderPane(composer, normalPass, ppssaoEffect, ppssaoPass, n8aopass, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setSkyboxAzimuthalAngle, setSkyboxPolarAngle, setAmbientLight, setFog) {
     this.rendererFolder.setupChangeEvent(
       this.renderer,
       this.toneMappingFolder.folder,
@@ -3435,8 +3463,8 @@ var TweakPane = class {
     this.environment.setupChangeEvent(
       this.scene,
       setHDR,
-      setHDRAzimuthalAngle,
-      setHDRPolarAngle,
+      setSkyboxAzimuthalAngle,
+      setSkyboxPolarAngle,
       setAmbientLight,
       setFog,
       sun
@@ -5129,7 +5157,7 @@ var Composer = class {
     this.renderer.toneMapping = rendererValues.toneMapping;
     this.renderer.toneMappingExposure = rendererValues.exposure;
     this.environmentConfiguration = environmentConfiguration;
-    this.updateHDRValues();
+    this.updateSkyboxAndEnvValues();
     this.updateAmbientLightValues();
     this.setFog();
     this.effectComposer = new EffectComposer2(this.renderer, {
@@ -5247,8 +5275,14 @@ var Composer = class {
       this.spawnSun,
       this.sun,
       this.setHDRIFromFile.bind(this),
-      this.setHDRAzimuthalAngle.bind(this),
-      this.setHDRPolarAngle.bind(this),
+      (azimuthalAngle) => {
+        envValues.skyboxAzimuthalAngle = azimuthalAngle;
+        this.updateSkyboxRotation();
+      },
+      (polarAngle) => {
+        envValues.skyboxPolarAngle = polarAngle;
+        this.updateSkyboxRotation();
+      },
       this.setAmbientLight.bind(this),
       this.setFog.bind(this)
     );
@@ -5303,17 +5337,15 @@ var Composer = class {
     this.renderer.clearDepth();
     this.renderer.render(this.postPostScene, this.camera);
   }
-  setHDRAzimuthalAngle(azimuthalAngle) {
+  updateSkyboxRotation() {
     this.scene.backgroundRotation = new Euler3(
-      MathUtils.degToRad(envValues.hdrPolarAngle),
-      MathUtils.degToRad(azimuthalAngle),
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
       0
     );
-  }
-  setHDRPolarAngle(polarAngle) {
-    this.scene.backgroundRotation = new Euler3(
-      MathUtils.degToRad(polarAngle),
-      MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+    this.scene.environmentRotation = new Euler3(
+      MathUtils.degToRad(envValues.skyboxPolarAngle),
+      MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
       0
     );
   }
@@ -5328,18 +5360,18 @@ var Composer = class {
         envMap.colorSpace = LinearSRGBColorSpace;
         envMap.needsUpdate = true;
         this.scene.environment = envMap;
-        this.scene.environmentIntensity = envValues.hdrEnvIntensity;
+        this.scene.environmentIntensity = envValues.envMapIntensity;
         this.scene.environmentRotation = new Euler3(
-          MathUtils.degToRad(envValues.hdrPolarAngle),
-          MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+          MathUtils.degToRad(envValues.skyboxPolarAngle),
+          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
           0
         );
         this.scene.background = envMap;
-        this.scene.backgroundIntensity = envValues.hdrIntensity;
-        this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+        this.scene.backgroundIntensity = envValues.skyboxIntensity;
+        this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
         this.scene.backgroundRotation = new Euler3(
-          MathUtils.degToRad(envValues.hdrPolarAngle),
-          MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+          MathUtils.degToRad(envValues.skyboxPolarAngle),
+          MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
           0
         );
         this.isEnvHDRI = true;
@@ -5350,8 +5382,9 @@ var Composer = class {
     });
   }
   useHDRI(url, fromFile = false) {
-    if (this.isEnvHDRI && fromFile === false || !this.renderer)
+    if (this.isEnvHDRI && fromFile === false || !this.renderer) {
       return;
+    }
     const pmremGenerator = new PMREMGenerator(this.renderer);
     new RGBELoader(new LoadingManager()).load(
       url,
@@ -5361,15 +5394,15 @@ var Composer = class {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
           this.scene.environment = envMap;
-          this.scene.environmentIntensity = envValues.hdrEnvIntensity;
+          this.scene.environmentIntensity = envValues.envMapIntensity;
           this.scene.environmentRotation = new Euler3(
-            MathUtils.degToRad(envValues.hdrPolarAngle),
-            MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+            MathUtils.degToRad(envValues.skyboxPolarAngle),
+            MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
             0
           );
           this.scene.background = envMap;
-          this.scene.backgroundIntensity = envValues.hdrIntensity;
-          this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+          this.scene.backgroundIntensity = envValues.skyboxIntensity;
+          this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -5451,27 +5484,27 @@ var Composer = class {
       (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle);
     }
   }
-  updateHDRValues() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.skybox) == null ? void 0 : _b.intensity) === "number") {
-      envValues.hdrIntensity = (_c = this.environmentConfiguration) == null ? void 0 : _c.skybox.intensity;
+  updateSkyboxAndEnvValues() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.envMap) == null ? void 0 : _b.intensity) === "number") {
+      envValues.envMapIntensity = (_c = this.environmentConfiguration) == null ? void 0 : _c.envMap.intensity;
     }
-    this.scene.backgroundIntensity = envValues.hdrIntensity;
-    if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.envMap) == null ? void 0 : _e.intensity) === "number") {
-      envValues.hdrEnvIntensity = (_f = this.environmentConfiguration) == null ? void 0 : _f.envMap.intensity;
+    this.scene.environmentIntensity = envValues.envMapIntensity;
+    if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.skybox) == null ? void 0 : _e.intensity) === "number") {
+      envValues.skyboxIntensity = (_f = this.environmentConfiguration) == null ? void 0 : _f.skybox.intensity;
     }
-    this.scene.backgroundIntensity = envValues.hdrEnvIntensity;
+    this.scene.backgroundIntensity = envValues.skyboxIntensity;
     if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.skybox) == null ? void 0 : _h.blurriness) === "number") {
-      envValues.hdrBlurriness = (_i = this.environmentConfiguration) == null ? void 0 : _i.skybox.blurriness;
+      envValues.skyboxBlurriness = (_i = this.environmentConfiguration) == null ? void 0 : _i.skybox.blurriness;
     }
-    this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+    this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
     if (typeof ((_k = (_j = this.environmentConfiguration) == null ? void 0 : _j.skybox) == null ? void 0 : _k.azimuthalAngle) === "number") {
-      envValues.hdrAzimuthalAngle = (_l = this.environmentConfiguration) == null ? void 0 : _l.skybox.azimuthalAngle;
-      this.setHDRAzimuthalAngle((_m = this.environmentConfiguration) == null ? void 0 : _m.skybox.azimuthalAngle);
+      envValues.skyboxAzimuthalAngle = (_l = this.environmentConfiguration) == null ? void 0 : _l.skybox.azimuthalAngle;
+      this.updateSkyboxRotation();
     }
-    if (typeof ((_o = (_n = this.environmentConfiguration) == null ? void 0 : _n.skybox) == null ? void 0 : _o.polarAngle) === "number") {
-      envValues.hdrPolarAngle = (_p = this.environmentConfiguration) == null ? void 0 : _p.skybox.polarAngle;
-      this.setHDRPolarAngle((_q = this.environmentConfiguration) == null ? void 0 : _q.skybox.polarAngle);
+    if (typeof ((_n = (_m = this.environmentConfiguration) == null ? void 0 : _m.skybox) == null ? void 0 : _n.polarAngle) === "number") {
+      envValues.skyboxPolarAngle = (_o = this.environmentConfiguration) == null ? void 0 : _o.skybox.polarAngle;
+      this.updateSkyboxRotation();
     }
   }
   updateAmbientLightValues() {