@mml-io/3d-web-client-core 0.5.0 → 0.6.1

package/build/index.js

@@ -48,13 +48,13 @@ var CameraManager = class {
   constructor(collisionsManager) {
     this.collisionsManager = collisionsManager;
     __publicField(this, "camera");
-    __publicField(this, "initialDistance", 2.5);
+    __publicField(this, "initialDistance", 3.3);
     __publicField(this, "minDistance", 0.1);
-    __publicField(this, "maxDistance", 6);
-    __publicField(this, "initialFOV", 80);
+    __publicField(this, "maxDistance", 8);
+    __publicField(this, "initialFOV", 60);
     __publicField(this, "fov", this.initialFOV);
-    __publicField(this, "minFOV", 63);
-    __publicField(this, "maxFOV", 85);
+    __publicField(this, "minFOV", 50);
+    __publicField(this, "maxFOV", 70);
     __publicField(this, "targetFOV", this.initialFOV);
     __publicField(this, "minPolarAngle", Math.PI * 0.25);
     __publicField(this, "maxPolarAngle", Math.PI * 0.95);
@@ -856,7 +856,6 @@ var defaultLabelHeight = 0.125;
 var defaultLabelCastShadows = true;
 var CharacterTooltip = class {
   constructor(parentModel) {
-    __publicField(this, "texture");
     __publicField(this, "geometry");
     __publicField(this, "material");
     __publicField(this, "mesh");
@@ -877,7 +876,7 @@ var CharacterTooltip = class {
     });
     this.setText = this.setText.bind(this);
     this.material = new MeshBasicMaterial2({
-      map: this.texture,
+      map: null,
       transparent: true,
       opacity: 0
     });
@@ -1013,13 +1012,13 @@ var LocalController = class {
     __publicField(this, "thirdPersonCamera", null);
     __publicField(this, "speed", 0);
     __publicField(this, "targetSpeed", 0);
-    __publicField(this, "networkState", {
-      id: 0,
+    __publicField(this, "networkState");
+    this.networkState = {
+      id: this.id,
       position: { x: 0, y: 0, z: 0 },
-      rotation: { quaternionY: 0, quaternionW: 0 },
+      rotation: { quaternionY: 0, quaternionW: 1 },
       state: 0 /* idle */
-    });
-    setInterval(() => this.update.bind(this), 3e3);
+    };
   }
   update() {
     if (!this.model?.mesh || !this.model?.animationMixer)
@@ -1200,20 +1199,27 @@ var LocalController = class {
     }
   }
   updateNetworkState() {
-    if (!this.model?.mesh)
-      return;
-    const characterQuaternion = this.model.mesh.getWorldQuaternion(new Quaternion());
-    const positionUpdate = new Vector33(
-      this.model.mesh.position.x,
-      this.model.mesh.position.y,
-      this.model.mesh.position.z
-    );
-    this.networkState = {
-      id: this.id,
-      position: positionUpdate,
-      rotation: { quaternionY: characterQuaternion?.y, quaternionW: characterQuaternion?.w },
-      state: this.model.currentAnimation
-    };
+    if (!this.model?.mesh) {
+      this.networkState = {
+        id: this.id,
+        position: new Vector33(),
+        rotation: { quaternionY: 0, quaternionW: 1 },
+        state: 0 /* idle */
+      };
+    } else {
+      const characterQuaternion = this.model.mesh.getWorldQuaternion(new Quaternion());
+      const positionUpdate = new Vector33(
+        this.model.mesh.position.x,
+        this.model.mesh.position.y,
+        this.model.mesh.position.z
+      );
+      this.networkState = {
+        id: this.id,
+        position: positionUpdate,
+        rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
+        state: this.model.currentAnimation
+      };
+    }
   }
   resetPosition() {
     if (!this.model?.mesh)
@@ -1296,15 +1302,16 @@ var RemoteController = class {
     __publicField(this, "animationMixer", new AnimationMixer2(new Object3D4()));
     __publicField(this, "animations", /* @__PURE__ */ new Map());
     __publicField(this, "currentAnimation", 0 /* idle */);
-    __publicField(this, "networkState", {
-      id: 0,
-      position: { x: 0, y: 0, z: 0 },
-      rotation: { quaternionY: 0, quaternionW: 0 },
-      state: this.currentAnimation
-    });
+    __publicField(this, "networkState");
     this.characterModel = this.character.model.mesh;
     this.characterModel.updateMatrixWorld();
     this.animationMixer = new AnimationMixer2(this.characterModel);
+    this.networkState = {
+      id: this.id,
+      position: { x: 0, y: 0, z: 0 },
+      rotation: { quaternionY: 0, quaternionW: 1 },
+      state: this.currentAnimation
+    };
   }
   update(clientUpdate, time, deltaTime) {
     if (!this.character)
@@ -1389,7 +1396,6 @@ var CharacterManager = class {
     __publicField(this, "cameraOffset", 0);
     __publicField(this, "group");
     this.group = new Group();
-    setInterval(() => this.update.bind(this), 3e3);
   }
   /* TODO: 
     1) Separate this method into spawnLocalCharacter and spawnRemoteCharacter
@@ -1422,7 +1428,7 @@ var CharacterManager = class {
                 y: spawnPosition.y,
                 z: spawnPosition.z
               },
-              rotation: { quaternionY: 0, quaternionW: 0 },
+              rotation: { quaternionY: 0, quaternionW: 1 },
               state: 0 /* idle */
             });
           }
@@ -1691,7 +1697,9 @@ import {
   NormalPass
 } from "postprocessing";
 import {
-  Color as Color5,
+  AmbientLight,
+  Color as Color6,
+  Fog,
   HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager as LoadingManager2,
@@ -1701,6 +1709,109 @@ import {
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
+// src/sun/Sun.ts
+import { CameraHelper, Color as Color4, DirectionalLight, Group as Group3, OrthographicCamera, Vector3 as Vector37 } from "three";
+
+// src/tweakpane/sunSettings.ts
+var sunValues = {
+  sunPosition: {
+    sunAzimuthalAngle: 39,
+    sunPolarAngle: 50
+  },
+  sunIntensity: 0.5,
+  sunColor: { r: 1, g: 1, b: 1 }
+};
+var sunOptions = {
+  sunPosition: {
+    sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
+    sunPolarAngle: { min: -90, max: 90, step: 1 }
+  },
+  sunIntensity: { min: 0, max: 1, step: 0.05 }
+};
+
+// src/sun/Sun.ts
+var Sun = class extends Group3 {
+  constructor() {
+    super();
+    __publicField(this, "debug", false);
+    __publicField(this, "sunOffset", new Vector37(
+      39 * (Math.PI / 180),
+      50 * (Math.PI / 180),
+      100
+    ));
+    __publicField(this, "shadowResolution", 8192);
+    __publicField(this, "shadowCamFrustum", 50);
+    __publicField(this, "camHelper", null);
+    __publicField(this, "shadowCamera");
+    __publicField(this, "directionalLight");
+    __publicField(this, "target", null);
+    this.shadowCamera = new OrthographicCamera(
+      -this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      this.shadowCamFrustum,
+      -this.shadowCamFrustum,
+      0.1,
+      200
+    );
+    if (this.debug === true) {
+      this.camHelper = new CameraHelper(this.shadowCamera);
+    }
+    this.directionalLight = new DirectionalLight(16777215, 0.5);
+    this.directionalLight.shadow.normalBias = 0.05;
+    this.directionalLight.shadow.radius = 1.5;
+    this.directionalLight.shadow.camera = this.shadowCamera;
+    this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
+    this.directionalLight.castShadow = true;
+    this.updateCharacterPosition(new Vector37(0, 0, 0));
+    this.add(this.directionalLight);
+    if (this.debug === true && this.camHelper instanceof CameraHelper) {
+      this.add(this.camHelper);
+    }
+  }
+  updateCharacterPosition(position) {
+    if (!position)
+      return;
+    this.target = position;
+    this.setSunPosition(this.sunOffset.x, this.sunOffset.y);
+  }
+  setAzimuthalAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.x = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setPolarAngle(angle) {
+    if (this.sunOffset)
+      this.sunOffset.y = angle;
+    if (this.target)
+      this.updateCharacterPosition(this.target);
+  }
+  setIntensity(intensity) {
+    this.directionalLight.intensity = intensity;
+  }
+  setColor() {
+    this.directionalLight.color = new Color4().setRGB(
+      sunValues.sunColor.r,
+      sunValues.sunColor.g,
+      sunValues.sunColor.b
+    );
+  }
+  setSunPosition(azimuthalAngle, polarAngle) {
+    if (!this.target)
+      return;
+    const distance = this.sunOffset.z;
+    const sphericalPosition = new Vector37(
+      distance * Math.sin(polarAngle) * Math.cos(azimuthalAngle),
+      distance * Math.cos(polarAngle),
+      distance * Math.sin(polarAngle) * Math.sin(azimuthalAngle)
+    );
+    const newSunPosition = this.target.clone().add(sphericalPosition);
+    this.directionalLight.position.set(newSunPosition.x, newSunPosition.y, newSunPosition.z);
+    this.directionalLight.target.position.copy(this.target.clone());
+    this.directionalLight.target.updateMatrixWorld();
+  }
+};
+
 // src/tweakpane/composerSettings.ts
 import { BlendFunction } from "postprocessing";
 var composerValues = {
@@ -1739,17 +1850,17 @@ var composerValues = {
     adaptationRate: 2
   },
   brightness: -0.03,
-  contrast: 1.3,
+  contrast: 1.21,
   saturation: 0.91,
   grain: 0.061,
-  bloom: 0.45
+  bloom: 0.25
 };
 var composerOptions = {
   renderer: {
     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, step: 0.01 },
+    bgIntensity: { min: 0, max: 1.3, step: 0.01 },
     bgBlurriness: { min: 0, max: 0.1, step: 1e-3 }
   },
   ssao: {
@@ -1848,17 +1959,81 @@ var statsData = {
   FPS: "0"
 };
 
+// src/tweakpane/envSettings.ts
+var envValues = {
+  ambientLight: {
+    ambientLightIntensity: 0,
+    ambientLightColor: { r: 1, g: 1, b: 1 }
+  },
+  fog: {
+    fogNear: 30,
+    fogFar: 210,
+    fogColor: { r: 0.42, g: 0.48, b: 0.59 }
+  }
+};
+var envOptions = {
+  ambientLight: {
+    ambientLightIntensity: { min: 0, max: 1, step: 0.01 }
+  },
+  fog: {
+    fogNear: { min: 0, max: 80, step: 1 },
+    fogFar: { min: 81, max: 300, step: 1 }
+  }
+};
+
 // src/tweakpane/TweakPane.ts
 import {
   BlendFunction as BlendFunction2
 } from "postprocessing";
-import { Color as Color4 } from "three";
+import { Color as Color5 } from "three";
 import { Pane } from "tweakpane";
 var TweakPane = class {
   constructor(renderer, scene, composer) {
     __publicField(this, "renderer");
     __publicField(this, "scene");
     __publicField(this, "composer");
+    __publicField(this, "guiStyle", `
+:root {
+  --tp-base-background-color: hsla(0, 0%, 10%, 0.8);
+  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
+  --tp-button-background-color: hsla(0, 0%, 80%, 1);
+  --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
+  --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
+  --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
+  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
+  --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
+  --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
+  --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
+  --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
+  --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
+  --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
+  --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
+  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
+  --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
+  --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+}
+
+.tp-brkv {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tp-dfwv {
+  width: 333px !important;
+  display: none;
+}
+
+.tp-lblv_l {
+  font-size: 10px;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+`);
     __publicField(this, "gui", new Pane());
     __publicField(this, "render");
     __publicField(this, "stats");
@@ -1868,6 +2043,10 @@ var TweakPane = class {
     __publicField(this, "post");
     __publicField(this, "export");
     __publicField(this, "characterMaterial");
+    __publicField(this, "environment");
+    __publicField(this, "sun");
+    __publicField(this, "sunButton");
+    __publicField(this, "ambient");
     __publicField(this, "saveVisibilityInLocalStorage", true);
     __publicField(this, "guiVisible", false);
     if (this.saveVisibilityInLocalStorage) {
@@ -1883,6 +2062,10 @@ var TweakPane = class {
     this.renderer = renderer;
     this.scene = scene;
     this.composer = composer;
+    const styleElement = document.createElement("style");
+    styleElement.type = "text/css";
+    styleElement.appendChild(document.createTextNode(this.guiStyle));
+    document.head.appendChild(styleElement);
     this.render = this.gui.addFolder({ title: "rendering", expanded: true });
     this.stats = this.render.addFolder({ title: "stats", expanded: true });
     this.renderOptions = this.render.addFolder({ title: "renderOptions", expanded: false });
@@ -1890,96 +2073,105 @@ var TweakPane = class {
     this.ssao = this.render.addFolder({ title: "ambientOcclusion", expanded: false });
     this.post = this.render.addFolder({ title: "post", expanded: false });
     this.toneMapping.hidden = composerValues.renderer.toneMapping === 5 ? false : true;
-    this.characterMaterial = this.gui.addFolder({ title: "characterMaterial", expanded: false });
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "transmission",
-      characterOptions.material.transmission
-    );
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "metalness",
-      characterOptions.material.metalness
-    );
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "roughness",
-      characterOptions.material.roughness
-    );
-    this.characterMaterial.addInput(characterValues.material, "ior", characterOptions.material.ior);
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "thickness",
-      characterOptions.material.thickness
-    );
-    this.characterMaterial.addInput(characterValues.material, "specularColor", {
-      color: { type: "float" }
-    });
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "specularIntensity",
-      characterOptions.material.specularIntensity
-    );
-    this.characterMaterial.addInput(characterValues.material, "emissive", {
-      color: { type: "float" }
-    });
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "emissiveIntensity",
-      characterOptions.material.emissiveIntensity
-    );
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "envMapIntensity",
-      characterOptions.material.envMapIntensity
-    );
-    this.characterMaterial.addInput(characterValues.material, "sheenColor", {
-      color: { type: "float" }
-    });
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "sheen",
-      characterOptions.material.sheen
-    );
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "clearcoat",
-      characterOptions.material.clearcoat
-    );
-    this.characterMaterial.addInput(
-      characterValues.material,
-      "clearcoatRoughness",
-      characterOptions.material.clearcoatRoughness
-    );
-    this.characterMaterial.on("change", (e) => {
-      if (!e.presetKey) {
-        return;
-      }
-      if (e.presetKey === "specularColor") {
-        characterValues.material.specularColor = {
-          r: e.value.r,
-          g: e.value.g,
-          b: e.value.b
-        };
-        return;
-      }
-      if (e.presetKey === "emissive") {
-        characterValues.material.emissive = {
-          r: e.value.r,
-          g: e.value.g,
-          b: e.value.b
-        };
-        return;
-      }
-      if (e.presetKey === "sheenColor") {
-        characterValues.material.sheenColor = {
-          r: e.value.r,
-          g: e.value.g,
-          b: e.value.b
-        };
-        return;
-      }
-    });
+    {
+      this.characterMaterial = this.gui.addFolder({ title: "characterMaterial", expanded: false });
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "transmission",
+        characterOptions.material.transmission
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "metalness",
+        characterOptions.material.metalness
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "roughness",
+        characterOptions.material.roughness
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "ior",
+        characterOptions.material.ior
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "thickness",
+        characterOptions.material.thickness
+      );
+      this.characterMaterial.addInput(characterValues.material, "specularColor", {
+        color: { type: "float" }
+      });
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "specularIntensity",
+        characterOptions.material.specularIntensity
+      );
+      this.characterMaterial.addInput(characterValues.material, "emissive", {
+        color: { type: "float" }
+      });
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "emissiveIntensity",
+        characterOptions.material.emissiveIntensity
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "envMapIntensity",
+        characterOptions.material.envMapIntensity
+      );
+      this.characterMaterial.addInput(characterValues.material, "sheenColor", {
+        color: { type: "float" }
+      });
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "sheen",
+        characterOptions.material.sheen
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "clearcoat",
+        characterOptions.material.clearcoat
+      );
+      this.characterMaterial.addInput(
+        characterValues.material,
+        "clearcoatRoughness",
+        characterOptions.material.clearcoatRoughness
+      );
+      this.characterMaterial.on("change", (e) => {
+        if (!e.presetKey) {
+          return;
+        }
+        if (e.presetKey === "specularColor") {
+          characterValues.material.specularColor = {
+            r: e.value.r,
+            g: e.value.g,
+            b: e.value.b
+          };
+          return;
+        }
+        if (e.presetKey === "emissive") {
+          characterValues.material.emissive = {
+            r: e.value.r,
+            g: e.value.g,
+            b: e.value.b
+          };
+          return;
+        }
+        if (e.presetKey === "sheenColor") {
+          characterValues.material.sheenColor = {
+            r: e.value.r,
+            g: e.value.g,
+            b: e.value.b
+          };
+          return;
+        }
+      });
+    }
+    this.environment = this.gui.addFolder({ title: "environment", expanded: false });
+    this.sun = this.environment.addFolder({ title: "sun", expanded: true });
+    this.ambient = this.environment.addFolder({ title: "ambient", expanded: true });
     this.export = this.gui.addFolder({ title: "import/export", expanded: false });
     window.addEventListener("keydown", this.processKey.bind(this));
     this.setupGUIListeners.bind(this)();
@@ -1997,201 +2189,308 @@ var TweakPane = class {
     this.gui.element.addEventListener("mouseup", () => setTweakpaneActive(false));
     this.gui.element.addEventListener("mouseleave", () => setTweakpaneActive(false));
   }
-  setupRenderPane(ssaoEffect, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect) {
-    this.stats.addMonitor(statsData, "triangles");
-    this.stats.addMonitor(statsData, "geometries");
-    this.stats.addMonitor(statsData, "textures");
-    this.stats.addMonitor(statsData, "shaders");
-    this.stats.addMonitor(statsData, "postPasses");
-    this.stats.addMonitor(statsData, "drawCalls");
-    this.stats.addMonitor(statsData, "rawDeltaTime");
-    this.stats.addMonitor(statsData, "deltaTime");
-    this.stats.addMonitor(statsData, "FPS");
-    this.renderOptions.addInput(
-      composerValues.renderer,
-      "shadowMap",
-      composerOptions.renderer.shadowMap
-    );
-    this.renderOptions.addMonitor(rendererBlades, "shadowMapType");
-    this.renderOptions.addInput(
-      composerValues.renderer,
-      "toneMapping",
-      composerOptions.renderer.toneMapping
-    );
-    this.renderOptions.addMonitor(rendererBlades, "toneMappingType");
-    this.renderOptions.addInput(
-      composerValues.renderer,
-      "exposure",
-      composerOptions.renderer.exposure
-    );
-    this.renderOptions.addInput(
-      composerValues.renderer,
-      "bgIntensity",
-      composerOptions.renderer.bgIntensity
-    );
-    this.renderOptions.addInput(
-      composerValues.renderer,
-      "bgBlurriness",
-      composerOptions.renderer.bgBlurriness
-    );
-    this.renderOptions.on("change", (e) => {
-      const target = e.target;
-      switch (target.label) {
-        case "shadowMap":
-          this.renderer.shadowMap.type = e.value;
-          setShadowMapType(e.value);
-          break;
-        case "toneMapping":
-          this.renderer.toneMapping = e.value;
-          this.toneMapping.hidden = e.value !== 5;
-          toneMappingPass.enabled = e.value === 5 ? true : false;
-          setToneMappingType(e.value);
-          break;
-        case "exposure":
-          this.renderer.toneMappingExposure = e.value;
-          break;
-        case "bgIntensity":
-          this.scene.backgroundIntensity = e.value;
-          break;
-        case "bgBlurriness":
-          this.scene.backgroundBlurriness = e.value;
-          break;
-        default:
-          break;
-      }
-    });
-    this.ssao.addInput({ showEffectOnly: false }, "showEffectOnly");
-    this.ssao.addInput(composerValues.ssao, "samples", composerOptions.ssao.samples);
-    this.ssao.addInput(composerValues.ssao, "rings", composerOptions.ssao.rings);
-    this.ssao.addInput(
-      composerValues.ssao,
-      "luminanceInfluence",
-      composerOptions.ssao.luminanceInfluence
-    );
-    this.ssao.addInput(composerValues.ssao, "radius", composerOptions.ssao.radius);
-    this.ssao.addInput(composerValues.ssao, "intensity", composerOptions.ssao.intensity);
-    this.ssao.addInput(composerValues.ssao, "bias", composerOptions.ssao.bias);
-    this.ssao.addInput(composerValues.ssao, "fade", composerOptions.ssao.fade);
-    this.ssao.addInput(
-      composerValues.ssao,
-      "resolutionScale",
-      composerOptions.ssao.resolutionScale
-    );
-    this.ssao.addInput(
-      composerValues.ssao,
-      "worldDistanceThreshold",
-      composerOptions.ssao.worldDistanceThreshold
-    );
-    this.ssao.addInput(
-      composerValues.ssao,
-      "worldDistanceFalloff",
-      composerOptions.ssao.worldDistanceFalloff
-    );
-    this.ssao.addInput(
-      composerValues.ssao,
-      "worldProximityThreshold",
-      composerOptions.ssao.worldProximityThreshold
-    );
-    this.ssao.addInput(
-      composerValues.ssao,
-      "worldProximityFalloff",
-      composerOptions.ssao.worldProximityFalloff
-    );
-    this.ssao.addInput(composerValues.ssao, "color", {
-      color: { alpha: false, type: "float" }
-    });
-    this.ssao.on("change", (e) => {
-      if (!e.presetKey) {
-        return;
-      }
-      const preset = e.presetKey;
-      if (preset === "showEffectOnly") {
-        ssaoEffect.blendMode.blendFunction = e.value === true ? BlendFunction2.NORMAL : BlendFunction2.MULTIPLY;
-        return;
-      }
-      if (preset === "resolutionScale") {
-        ssaoEffect.resolution.scale = e.value;
-        return;
-      }
-      if (ssaoMaterialParams.includes(e.presetKey)) {
-        ssaoEffect.ssaoMaterial[preset] = e.value;
-        return;
-      }
-      if (e.presetKey === "color") {
-        ssaoEffect.color = new Color4().setRGB(e.value.r, e.value.g, e.value.b);
-        return;
-      }
-      ssaoEffect[preset] = e.value;
-    });
-    this.toneMapping.addInput(composerValues.toneMapping, "mode", composerOptions.toneMapping.mode);
-    this.toneMapping.addMonitor(customToneMappingBlade, "customToneMappingType");
-    this.toneMapping.addInput(
-      composerValues.toneMapping,
-      "whitePoint",
-      composerOptions.toneMapping.whitePoint
-    );
-    this.toneMapping.addInput(
-      composerValues.toneMapping,
-      "middleGrey",
-      composerOptions.toneMapping.middleGrey
-    );
-    const minLuminance = this.toneMapping.addInput(
-      composerValues.toneMapping,
-      "minLuminance",
-      composerOptions.toneMapping.minLuminance
-    );
-    minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
-    const averageLuminance = this.toneMapping.addInput(
-      composerValues.toneMapping,
-      "averageLuminance",
-      composerOptions.toneMapping.averageLuminance
-    );
-    averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
-    this.toneMapping.addInput(
-      composerValues.toneMapping,
-      "adaptationRate",
-      composerOptions.toneMapping.adaptationRate
-    );
-    this.toneMapping.on("change", (e) => {
-      if (!e.presetKey) {
+  setupRenderPane(ssaoEffect, toneMappingEffect, toneMappingPass, brightnessContrastSaturation, bloomEffect, gaussGrainEffect, hasLighting, sun, setHDR, setAmbientLight, setFog) {
+    {
+      this.stats.addMonitor(statsData, "triangles");
+      this.stats.addMonitor(statsData, "geometries");
+      this.stats.addMonitor(statsData, "textures");
+      this.stats.addMonitor(statsData, "shaders");
+      this.stats.addMonitor(statsData, "postPasses");
+      this.stats.addMonitor(statsData, "drawCalls");
+      this.stats.addMonitor(statsData, "rawDeltaTime");
+      this.stats.addMonitor(statsData, "deltaTime");
+      this.stats.addMonitor(statsData, "FPS");
+    }
+    {
+      this.renderOptions.addInput(
+        composerValues.renderer,
+        "shadowMap",
+        composerOptions.renderer.shadowMap
+      );
+      this.renderOptions.addMonitor(rendererBlades, "shadowMapType");
+      this.renderOptions.addInput(
+        composerValues.renderer,
+        "toneMapping",
+        composerOptions.renderer.toneMapping
+      );
+      this.renderOptions.addMonitor(rendererBlades, "toneMappingType");
+      this.renderOptions.addInput(
+        composerValues.renderer,
+        "exposure",
+        composerOptions.renderer.exposure
+      );
+      this.renderOptions.addInput(
+        composerValues.renderer,
+        "bgIntensity",
+        composerOptions.renderer.bgIntensity
+      );
+      this.renderOptions.addInput(
+        composerValues.renderer,
+        "bgBlurriness",
+        composerOptions.renderer.bgBlurriness
+      );
+      this.renderOptions.on("change", (e) => {
+        const target = e.target;
+        switch (target.label) {
+          case "shadowMap":
+            this.renderer.shadowMap.type = e.value;
+            setShadowMapType(e.value);
+            break;
+          case "toneMapping":
+            this.renderer.toneMapping = e.value;
+            this.toneMapping.hidden = e.value !== 5;
+            toneMappingPass.enabled = e.value === 5 ? true : false;
+            setToneMappingType(e.value);
+            break;
+          case "exposure":
+            this.renderer.toneMappingExposure = e.value;
+            break;
+          case "bgIntensity":
+            this.scene.backgroundIntensity = e.value;
+            break;
+          case "bgBlurriness":
+            this.scene.backgroundBlurriness = e.value;
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    {
+      this.ssao.addInput({ showEffectOnly: false }, "showEffectOnly");
+      this.ssao.addInput(composerValues.ssao, "samples", composerOptions.ssao.samples);
+      this.ssao.addInput(composerValues.ssao, "rings", composerOptions.ssao.rings);
+      this.ssao.addInput(
+        composerValues.ssao,
+        "luminanceInfluence",
+        composerOptions.ssao.luminanceInfluence
+      );
+      this.ssao.addInput(composerValues.ssao, "radius", composerOptions.ssao.radius);
+      this.ssao.addInput(composerValues.ssao, "intensity", composerOptions.ssao.intensity);
+      this.ssao.addInput(composerValues.ssao, "bias", composerOptions.ssao.bias);
+      this.ssao.addInput(composerValues.ssao, "fade", composerOptions.ssao.fade);
+      this.ssao.addInput(
+        composerValues.ssao,
+        "resolutionScale",
+        composerOptions.ssao.resolutionScale
+      );
+      this.ssao.addInput(
+        composerValues.ssao,
+        "worldDistanceThreshold",
+        composerOptions.ssao.worldDistanceThreshold
+      );
+      this.ssao.addInput(
+        composerValues.ssao,
+        "worldDistanceFalloff",
+        composerOptions.ssao.worldDistanceFalloff
+      );
+      this.ssao.addInput(
+        composerValues.ssao,
+        "worldProximityThreshold",
+        composerOptions.ssao.worldProximityThreshold
+      );
+      this.ssao.addInput(
+        composerValues.ssao,
+        "worldProximityFalloff",
+        composerOptions.ssao.worldProximityFalloff
+      );
+      this.ssao.addInput(composerValues.ssao, "color", {
+        color: { alpha: false, type: "float" }
+      });
+      this.ssao.on("change", (e) => {
+        if (!e.presetKey) {
+          return;
+        }
+        const preset = e.presetKey;
+        if (preset === "showEffectOnly") {
+          ssaoEffect.blendMode.blendFunction = e.value === true ? BlendFunction2.NORMAL : BlendFunction2.MULTIPLY;
+          return;
+        }
+        if (preset === "resolutionScale") {
+          ssaoEffect.resolution.scale = e.value;
+          return;
+        }
+        if (ssaoMaterialParams.includes(e.presetKey)) {
+          ssaoEffect.ssaoMaterial[preset] = e.value;
+          return;
+        }
+        if (e.presetKey === "color") {
+          ssaoEffect.color = new Color5().setRGB(e.value.r, e.value.g, e.value.b);
+          return;
+        }
+        ssaoEffect[preset] = e.value;
+      });
+    }
+    {
+      this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "mode",
+        composerOptions.toneMapping.mode
+      );
+      this.toneMapping.addMonitor(customToneMappingBlade, "customToneMappingType");
+      this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "whitePoint",
+        composerOptions.toneMapping.whitePoint
+      );
+      this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "middleGrey",
+        composerOptions.toneMapping.middleGrey
+      );
+      const minLuminance = this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "minLuminance",
+        composerOptions.toneMapping.minLuminance
+      );
+      minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+      const averageLuminance = this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "averageLuminance",
+        composerOptions.toneMapping.averageLuminance
+      );
+      averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+      this.toneMapping.addInput(
+        composerValues.toneMapping,
+        "adaptationRate",
+        composerOptions.toneMapping.adaptationRate
+      );
+      this.toneMapping.on("change", (e) => {
+        if (!e.presetKey) {
+          return;
+        }
+        const preset = e.presetKey;
+        if (preset === "mode") {
+          minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+          averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
+          setCustomToneMappingType(e.value);
+        }
+        toneMappingEffect[preset] = e.value;
         return;
-      }
-      const preset = e.presetKey;
-      if (preset === "mode") {
-        minLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
-        averageLuminance.hidden = composerValues.toneMapping.mode === 2 ? true : false;
-        setCustomToneMappingType(e.value);
-      }
-      toneMappingEffect[preset] = e.value;
-      return;
-    });
-    this.post.addInput(composerValues, "brightness", composerOptions.brightness.amount);
-    this.post.addInput(composerValues, "contrast", composerOptions.contrast.amount);
-    this.post.addInput(composerValues, "saturation", composerOptions.saturation.amount);
-    this.post.addInput(composerValues, "bloom", composerOptions.bloom.amount);
-    this.post.addInput(composerValues, "grain", composerOptions.grain.amount);
-    this.post.on("change", (e) => {
-      const target = e.presetKey;
-      switch (target) {
-        case "brightness":
-          brightnessContrastSaturation.uniforms.brightness.value = e.value;
-          break;
-        case "contrast":
-          brightnessContrastSaturation.uniforms.contrast.value = e.value;
-          break;
-        case "saturation":
-          brightnessContrastSaturation.uniforms.saturation.value = e.value;
-          break;
-        case "bloom":
-          bloomEffect.intensity = e.value;
-          break;
-        case "grain":
-          gaussGrainEffect.uniforms.amount.value = e.value;
-          break;
-        default:
-          break;
-      }
-    });
+      });
+    }
+    {
+      this.post.addInput(composerValues, "brightness", composerOptions.brightness.amount);
+      this.post.addInput(composerValues, "contrast", composerOptions.contrast.amount);
+      this.post.addInput(composerValues, "saturation", composerOptions.saturation.amount);
+      this.post.addInput(composerValues, "bloom", composerOptions.bloom.amount);
+      this.post.addInput(composerValues, "grain", composerOptions.grain.amount);
+      this.post.on("change", (e) => {
+        const target = e.presetKey;
+        switch (target) {
+          case "brightness":
+            brightnessContrastSaturation.uniforms.brightness.value = e.value;
+            break;
+          case "contrast":
+            brightnessContrastSaturation.uniforms.contrast.value = e.value;
+            break;
+          case "saturation":
+            brightnessContrastSaturation.uniforms.saturation.value = e.value;
+            break;
+          case "bloom":
+            bloomEffect.intensity = e.value;
+            break;
+          case "grain":
+            gaussGrainEffect.uniforms.amount.value = e.value;
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    {
+      this.environment.hidden = hasLighting === false || sun === null;
+      this.sun.addInput(
+        sunValues.sunPosition,
+        "sunAzimuthalAngle",
+        sunOptions.sunPosition.sunAzimuthalAngle
+      );
+      this.sun.addInput(
+        sunValues.sunPosition,
+        "sunPolarAngle",
+        sunOptions.sunPosition.sunPolarAngle
+      );
+      this.sun.addInput(sunValues, "sunIntensity", sunOptions.sunIntensity);
+      this.sun.addInput(sunValues, "sunColor", {
+        color: { type: "float" }
+      });
+      this.sunButton = this.sun.addButton({ title: "Set HDRI" });
+      this.sunButton.on("click", () => {
+        setHDR();
+      });
+      this.sun.on("change", (e) => {
+        const target = e.presetKey;
+        switch (target) {
+          case "sunAzimuthalAngle":
+            sun?.setAzimuthalAngle(e.value * (Math.PI / 180));
+            break;
+          case "sunPolarAngle":
+            sun?.setPolarAngle(e.value * (Math.PI / 180));
+            break;
+          case "sunIntensity":
+            sun?.setIntensity(e.value);
+            break;
+          case "sunColor":
+            sunValues.sunColor = {
+              r: e.value.r,
+              g: e.value.g,
+              b: e.value.b
+            };
+            sun?.setColor();
+            break;
+          default:
+            break;
+        }
+      });
+      this.ambient.addInput(
+        envValues.ambientLight,
+        "ambientLightIntensity",
+        envOptions.ambientLight.ambientLightIntensity
+      );
+      this.ambient.addInput(envValues.ambientLight, "ambientLightColor", {
+        color: { type: "float" }
+      });
+      this.ambient.addInput(envValues.fog, "fogNear", envOptions.fog.fogNear);
+      this.ambient.addInput(envValues.fog, "fogFar", envOptions.fog.fogFar);
+      this.ambient.addInput(envValues.fog, "fogColor", {
+        color: { type: "float" }
+      });
+      this.ambient.on("change", (e) => {
+        const target = e.presetKey;
+        switch (target) {
+          case "ambientLightIntensity":
+            envValues.ambientLight.ambientLightIntensity = e.value;
+            setAmbientLight();
+            break;
+          case "ambientLightColor":
+            envValues.ambientLight.ambientLightColor = {
+              r: e.value.r,
+              g: e.value.g,
+              b: e.value.b
+            };
+            setAmbientLight();
+            break;
+          case "fogNear":
+            envValues.fog.fogNear = e.value;
+            setFog();
+            break;
+          case "fogFar":
+            envValues.fog.fogFar = e.value;
+            setFog();
+            break;
+          case "fogColor":
+            envValues.fog.fogColor = {
+              r: e.value.r,
+              g: e.value.g,
+              b: e.value.b
+            };
+            setFog();
+            break;
+          default:
+            break;
+        }
+      });
+    }
     const exportButton = this.export.addButton({ title: "export" });
     exportButton.on("click", () => {
       this.downloadSettingsAsJSON(this.gui.exportPreset());
@@ -2414,7 +2713,7 @@ var GaussGrainEffect = new ShaderMaterial2({
 
 // src/rendering/composer.ts
 var Composer = class {
-  constructor(scene, camera) {
+  constructor(scene, camera, spawnSun = false) {
     __publicField(this, "width", window.innerWidth);
     __publicField(this, "height", window.innerHeight);
     __publicField(this, "resolution", new Vector22(this.width, this.height));
@@ -2440,9 +2739,13 @@ var Composer = class {
     __publicField(this, "bcsPass");
     __publicField(this, "gaussGrainEffect", GaussGrainEffect);
     __publicField(this, "gaussGrainPass");
+    __publicField(this, "ambientLight", null);
+    __publicField(this, "sun", null);
+    __publicField(this, "spawnSun");
     __publicField(this, "tweakPane");
     this.scene = scene;
     this.camera = camera;
+    this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer3({
       powerPreference: "high-performance",
       antialias: false,
@@ -2455,6 +2758,8 @@ var Composer = class {
     this.renderer.shadowMap.type = composerValues.renderer.shadowMap;
     this.renderer.toneMapping = composerValues.renderer.toneMapping;
     this.renderer.toneMappingExposure = composerValues.renderer.exposure;
+    this.setAmbientLight();
+    this.setFog();
     document.body.appendChild(this.renderer.domElement);
     this.composer = new EffectComposer2(this.renderer, {
       frameBufferType: HalfFloatType
@@ -2482,7 +2787,7 @@ var Composer = class {
       bias: composerValues.ssao.bias,
       fade: composerValues.ssao.fade,
       resolutionScale: composerValues.ssao.resolutionScale,
-      color: new Color5().setRGB(composerValues.ssao.color.r, composerValues.ssao.color.g, composerValues.ssao.color.b),
+      color: new Color6().setRGB(composerValues.ssao.color.r, composerValues.ssao.color.g, composerValues.ssao.color.b),
       worldDistanceThreshold: composerValues.ssao.worldDistanceThreshold,
       worldDistanceFalloff: composerValues.ssao.worldDistanceFalloff,
       worldProximityThreshold: composerValues.ssao.worldProximityThreshold,
@@ -2522,13 +2827,22 @@ var Composer = class {
     this.composer.addPass(this.toneMappingPass);
     this.composer.addPass(this.bcsPass);
     this.composer.addPass(this.gaussGrainPass);
+    if (this.spawnSun === true) {
+      this.sun = new Sun();
+      this.scene.add(this.sun);
+    }
     this.tweakPane.setupRenderPane(
       this.ssaoEffect,
       this.toneMappingEffect,
       this.toneMappingPass,
       this.bcs,
       this.bloomEffect,
-      this.gaussGrainEffect
+      this.gaussGrainEffect,
+      this.spawnSun,
+      this.sun,
+      this.setHDRIFromFile.bind(this),
+      this.setAmbientLight.bind(this),
+      this.setFog.bind(this)
     );
     window.addEventListener("resize", () => this.updateProjection());
     this.updateProjection();
@@ -2562,8 +2876,8 @@ var Composer = class {
       this.tweakPane.updateStats(timeManager);
     }
   }
-  useHDRI(url) {
-    if (this.isEnvHDRI || !this.renderer)
+  useHDRI(url, fromFile = false) {
+    if (this.isEnvHDRI && fromFile === false || !this.renderer)
       return;
     const pmremGenerator = new PMREMGenerator(this.renderer);
     new RGBELoader(new LoadingManager2()).load(
@@ -2588,6 +2902,52 @@ var Composer = class {
       }
     );
   }
+  setHDRIFromFile() {
+    if (!this.renderer)
+      return;
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = ".hdr";
+    fileInput.addEventListener("change", () => {
+      const file = fileInput.files?.[0];
+      if (!file) {
+        console.log("no file");
+        return;
+      }
+      const fileURL = URL.createObjectURL(file);
+      if (fileURL) {
+        this.useHDRI(fileURL, true);
+        URL.revokeObjectURL(fileURL);
+        document.body.removeChild(fileInput);
+      }
+    });
+    document.body.appendChild(fileInput);
+    fileInput.click();
+  }
+  setFog() {
+    const fogColor = new Color6().setRGB(
+      envValues.fog.fogColor.r,
+      envValues.fog.fogColor.g,
+      envValues.fog.fogColor.b
+    );
+    this.scene.fog = new Fog(fogColor, envValues.fog.fogNear, envValues.fog.fogFar);
+  }
+  setAmbientLight() {
+    if (this.ambientLight) {
+      this.scene.remove(this.ambientLight);
+      this.ambientLight.dispose();
+    }
+    const ambientLightColor = new Color6().setRGB(
+      envValues.ambientLight.ambientLightColor.r,
+      envValues.ambientLight.ambientLightColor.g,
+      envValues.ambientLight.ambientLightColor.b
+    );
+    this.ambientLight = new AmbientLight(
+      ambientLightColor,
+      envValues.ambientLight.ambientLightIntensity
+    );
+    this.scene.add(this.ambientLight);
+  }
 };
 
 // src/time/TimeManager.ts
@@ -2642,13 +3002,13 @@ import {
   getRelativePositionAndRotationRelativeToObject
 } from "mml-web";
 import {
-  Color as Color6,
+  Color as Color7,
   DoubleSide,
   Euler,
   FrontSide as FrontSide2,
   Mesh as Mesh3,
   MeshStandardMaterial as MeshStandardMaterial2,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 import { MeshBVH, MeshBVHVisualizer } from "three-mesh-bvh";
@@ -2656,8 +3016,8 @@ var CollisionsManager = class {
   constructor(scene) {
     __publicField(this, "debug", false);
     __publicField(this, "scene");
-    __publicField(this, "tempVector", new Vector37());
-    __publicField(this, "tempVector2", new Vector37());
+    __publicField(this, "tempVector", new Vector38());
+    __publicField(this, "tempVector2", new Vector38());
     __publicField(this, "collisionMeshState", /* @__PURE__ */ new Map());
     __publicField(this, "collisionTrigger");
     this.scene = scene;
@@ -2680,7 +3040,7 @@ var CollisionsManager = class {
     group.traverse((child) => {
       if (child.type === "Mesh") {
         const mesh = child;
-        mesh.localToWorld(new Vector37());
+        mesh.localToWorld(new Vector38());
         mesh.updateMatrixWorld();
         const clonedGeometry = mesh.geometry.clone();
         clonedGeometry.applyMatrix4(mesh.matrixWorld);
@@ -2707,7 +3067,7 @@ var CollisionsManager = class {
     );
     mergedMesh.geometry.boundsTree = meshBVH;
     const visualizer = new MeshBVHVisualizer(mergedMesh, 3);
-    visualizer.edgeMaterial.color = new Color6(255);
+    visualizer.edgeMaterial.color = new Color7(255);
     visualizer.update();
     return { source: group, visualizer, meshBVH };
   }
@@ -2754,7 +3114,7 @@ var CollisionsManager = class {
         const distance = tri.closestPointToSegment(tempSegment, triPoint, capsulePoint);
         if (distance < radius) {
           const depth = radius - distance;
-          collisionPosition = new Vector37().copy(capsulePoint);
+          collisionPosition = new Vector38().copy(capsulePoint);
           const direction = capsulePoint.sub(triPoint).normalize();
           tempSegment.start.addScaledVector(direction, depth);
           tempSegment.end.addScaledVector(direction, depth);
@@ -2794,6 +3154,7 @@ export {
   Composer,
   KeyInputManager,
   MMLCompositionScene,
+  Sun,
   TimeManager
 };
 //# sourceMappingURL=index.js.map