@mml-io/3d-web-client-core 0.0.0-experimental-ff88de3-20240530 → 0.0.0-experimental-27180bc-20240609

package/build/index.d.ts

@@ -15,3 +15,4 @@ export { CollisionsManager } from "./collisions/CollisionsManager";
 export { Sun } from "./sun/Sun";
 export { GroundPlane } from "./ground-plane/GroundPlane";
 export { LoadingScreen } from "./loading-screen/LoadingScreen";
+export { EnvironmentConfiguration } from "./rendering/composer";

package/build/index.js

@@ -1810,7 +1810,7 @@ var LocalController = class {
         i
       );
     }
-    if (this.config.character.position.y < 0) {
+    if (this.config.character.position.y < -100) {
       this.resetPosition();
     }
     this.updateNetworkState();
@@ -2615,10 +2615,11 @@ var sunOptions = {
   sunIntensity: { min: 0, max: 10, step: 0.1 }
 };
 var envValues = {
-  hdrAzimuthalAngle: 0,
-  hdrPolarAngle: 0,
-  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 }
@@ -2630,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 }
   },
@@ -2646,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,
@@ -2661,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",
@@ -2674,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)
@@ -2718,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 "hdrAzimuthalAngle": {
+        case "envMapIntensity":
+          scene.environmentIntensity = e.value;
+          break;
+      }
+    });
+    this.skybox.on("change", (e) => {
+      const target = e.target.key;
+      if (!target)
+        return;
+      switch (target) {
+        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();
@@ -2754,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();
@@ -2774,8 +2804,6 @@ var EnvironmentFolder = class {
           setFog();
           break;
         }
-        default:
-          break;
       }
     });
   }
@@ -3404,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;
@@ -3421,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,
@@ -3434,8 +3463,8 @@ var TweakPane = class {
     this.environment.setupChangeEvent(
       this.scene,
       setHDR,
-      setHDRAzimuthalAngle,
-      setHDRPolarAngle,
+      setSkyboxAzimuthalAngle,
+      setSkyboxPolarAngle,
       setAmbientLight,
       setFog,
       sun
@@ -3524,37 +3553,37 @@ var TweakPane = class {
 // src/rendering/composer.ts
 import { HDRJPGLoader } from "@monogrid/gainmap-js";
 import {
+  BlendFunction as BlendFunction2,
+  BloomEffect,
+  EdgeDetectionMode,
   EffectComposer as EffectComposer2,
-  RenderPass,
   EffectPass as EffectPass2,
   FXAAEffect,
+  NormalPass as NormalPass2,
+  PredicationMode,
+  RenderPass,
   ShaderPass,
-  BloomEffect,
-  SSAOEffect as SSAOEffect2,
-  BlendFunction as BlendFunction2,
-  TextureEffect,
-  ToneMappingEffect,
   SMAAEffect,
   SMAAPreset,
-  EdgeDetectionMode,
-  PredicationMode,
-  NormalPass as NormalPass2
+  SSAOEffect as SSAOEffect2,
+  TextureEffect,
+  ToneMappingEffect
 } from "postprocessing";
 import {
   AmbientLight,
   Color as Color7,
+  EquirectangularReflectionMapping,
+  Euler as Euler3,
   Fog as Fog2,
   HalfFloatType as HalfFloatType2,
   LinearSRGBColorSpace,
   LoadingManager,
+  MathUtils,
   PMREMGenerator,
-  SRGBColorSpace,
   Scene as Scene4,
+  SRGBColorSpace,
   Vector2 as Vector27,
-  WebGLRenderer as WebGLRenderer4,
-  EquirectangularReflectionMapping,
-  MathUtils,
-  Euler as Euler3
+  WebGLRenderer as WebGLRenderer4
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
@@ -5097,7 +5126,12 @@ var N8SSAOPass = class extends Pass {
 
 // src/rendering/composer.ts
 var Composer = class {
-  constructor(scene, camera, spawnSun = false) {
+  constructor({
+    scene,
+    camera,
+    spawnSun = false,
+    environmentConfiguration
+  }) {
     this.width = 1;
     this.height = 1;
     this.resolution = new Vector27(this.width, this.height);
@@ -5106,6 +5140,7 @@ var Composer = class {
     this.gaussGrainEffect = GaussGrainEffect;
     this.ambientLight = null;
     this.sun = null;
+    var _a;
     this.scene = scene;
     this.postPostScene = new Scene4();
     this.camera = camera;
@@ -5121,9 +5156,9 @@ 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.environmentConfiguration = environmentConfiguration;
+    this.updateSkyboxAndEnvValues();
+    this.updateAmbientLightValues();
     this.setFog();
     this.effectComposer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType2
@@ -5156,6 +5191,9 @@ var Composer = class {
     this.ppssaoPass = new EffectPass2(this.camera, this.ppssaoEffect, this.normalTextureEffect);
     this.ppssaoPass.enabled = ppssaoValues.enabled;
     this.fxaaEffect = new FXAAEffect();
+    if ((_a = environmentConfiguration == null ? void 0 : environmentConfiguration.postProcessing) == null ? void 0 : _a.bloomIntensity) {
+      extrasValues.bloom = environmentConfiguration.postProcessing.bloomIntensity;
+    }
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom
     });
@@ -5215,6 +5253,7 @@ var Composer = class {
       this.sun = new Sun();
       this.scene.add(this.sun);
     }
+    this.updateSunValues();
     this.resizeListener = () => {
       this.fitContainer();
     };
@@ -5236,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)
     );
@@ -5292,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
     );
   }
@@ -5316,12 +5359,19 @@ var Composer = class {
       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.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;
@@ -5332,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,
@@ -5342,9 +5393,16 @@ var Composer = class {
         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.hdrIntensity;
-          this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+          this.scene.backgroundIntensity = envValues.skyboxIntensity;
+          this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
           this.isEnvHDRI = true;
           texture.dispose();
           pmremGenerator.dispose();
@@ -5411,6 +5469,51 @@ var Composer = class {
     );
     this.scene.add(this.ambientLight);
   }
+  updateSunValues() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.sun) == null ? void 0 : _b.intensity) === "number") {
+      sunValues.sunIntensity = this.environmentConfiguration.sun.intensity;
+      (_c = this.sun) == null ? void 0 : _c.setIntensity(this.environmentConfiguration.sun.intensity);
+    }
+    if (typeof ((_e = (_d = this.environmentConfiguration) == null ? void 0 : _d.sun) == null ? void 0 : _e.azimuthalAngle) === "number") {
+      sunValues.sunPosition.sunAzimuthalAngle = this.environmentConfiguration.sun.azimuthalAngle;
+      (_f = this.sun) == null ? void 0 : _f.setAzimuthalAngle(this.environmentConfiguration.sun.azimuthalAngle);
+    }
+    if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.sun) == null ? void 0 : _h.polarAngle) === "number") {
+      sunValues.sunPosition.sunPolarAngle = this.environmentConfiguration.sun.polarAngle;
+      (_i = this.sun) == null ? void 0 : _i.setPolarAngle(this.environmentConfiguration.sun.polarAngle);
+    }
+  }
+  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.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.skyboxIntensity;
+    if (typeof ((_h = (_g = this.environmentConfiguration) == null ? void 0 : _g.skybox) == null ? void 0 : _h.blurriness) === "number") {
+      envValues.skyboxBlurriness = (_i = this.environmentConfiguration) == null ? void 0 : _i.skybox.blurriness;
+    }
+    this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
+    if (typeof ((_k = (_j = this.environmentConfiguration) == null ? void 0 : _j.skybox) == null ? void 0 : _k.azimuthalAngle) === "number") {
+      envValues.skyboxAzimuthalAngle = (_l = this.environmentConfiguration) == null ? void 0 : _l.skybox.azimuthalAngle;
+      this.updateSkyboxRotation();
+    }
+    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() {
+    var _a, _b;
+    if (typeof ((_b = (_a = this.environmentConfiguration) == null ? void 0 : _a.ambientLight) == null ? void 0 : _b.intensity) === "number") {
+      envValues.ambientLight.ambientLightIntensity = this.environmentConfiguration.ambientLight.intensity;
+      this.setAmbientLight();
+    }
+  }
 };
 
 // src/time/TimeManager.ts