@mml-io/3d-web-client-core 0.4.0 → 0.6.0

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);
@@ -168,7 +168,7 @@ var CameraManager = class {
 };
 
 // src/character/Character.ts
-import { Color as Color2, Vector3 as Vector34 } from "three";
+import { Color as Color3, Vector3 as Vector34 } from "three";
 
 // src/character/CharacterModel.ts
 import {
@@ -724,6 +724,246 @@ var CharacterModel = class {
   }
 };
 
+// src/character/CharacterTooltip.ts
+import {
+  Color as Color2,
+  FrontSide,
+  LinearFilter as LinearFilter2,
+  Mesh as Mesh2,
+  MeshBasicMaterial as MeshBasicMaterial2,
+  PlaneGeometry
+} from "three";
+
+// src/character/CanvasText.ts
+import * as THREE from "three";
+function getTextAlignOffset(textAlign, width) {
+  switch (textAlign) {
+    case "center":
+      return width / 2;
+    case "right":
+      return width;
+    default:
+      return 0;
+  }
+}
+function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding, alignment) {
+  const lines = fullText.split("\n");
+  let currentLine = 0;
+  for (const text of lines) {
+    fitWidth = fitWidth || 0;
+    if (fitWidth <= 0) {
+      context.fillText(text, x, y + lineHeight * currentLine);
+      currentLine++;
+      continue;
+    }
+    let words = text.split(" ");
+    let lastWordIndex = 1;
+    while (words.length > 0 && lastWordIndex <= words.length) {
+      const str = words.slice(0, lastWordIndex).join(" ");
+      const textWidth = context.measureText(str).width;
+      if (textWidth + padding * 2 > fitWidth) {
+        if (lastWordIndex === 1) {
+          lastWordIndex = 2;
+        }
+        context.fillText(
+          words.slice(0, lastWordIndex - 1).join(" "),
+          x + padding,
+          y + lineHeight * currentLine + padding
+        );
+        currentLine++;
+        words = words.splice(lastWordIndex - 1);
+        lastWordIndex = 1;
+      } else {
+        lastWordIndex++;
+      }
+    }
+    if (lastWordIndex > 0 && words.length > 0) {
+      const xOffset = alignment === "center" ? 0 : padding;
+      context.fillText(words.join(" "), x + xOffset, y + lineHeight * currentLine + padding);
+      currentLine++;
+    }
+  }
+}
+function CanvasText(message, options) {
+  const fontsize = options.fontSize;
+  const textColor = options.textColorRGB255A1;
+  const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
+  const padding = options.paddingPx || 0;
+  const font = options.font || "Arial";
+  const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
+  const canvas = document.createElement("canvas");
+  const ct = canvas.getContext("2d");
+  const textAlign = options.alignment ?? "left";
+  if (options.dimensions) {
+    canvas.width = options.dimensions.width;
+    canvas.height = options.dimensions.height;
+    ct.clearRect(0, 0, canvas.width, canvas.height);
+    ct.font = fontString;
+    ct.textAlign = textAlign;
+    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+    ct.lineWidth = 0;
+    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+    ct.font = fontString;
+    printAtWordWrap(
+      ct,
+      message,
+      getTextAlignOffset(textAlign, canvas.width),
+      fontsize,
+      fontsize,
+      canvas.width,
+      padding,
+      textAlign
+    );
+  } else {
+    ct.font = fontString;
+    const metrics = ct.measureText(message);
+    const textWidth = metrics.width;
+    const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
+    canvas.width = textWidth + padding * 2;
+    canvas.height = textHeight + padding;
+    ct.clearRect(0, 0, canvas.width, canvas.height);
+    ct.font = fontString;
+    ct.textAlign = textAlign;
+    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+    ct.lineWidth = 0;
+    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+    ct.font = fontString;
+    ct.fillText(message, padding + getTextAlignOffset(textAlign, textWidth), textHeight);
+  }
+  return canvas;
+}
+function THREECanvasTextTexture(text, options) {
+  const canvas = CanvasText(text, options);
+  const texture = new THREE.Texture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.format = THREE.RGBAFormat;
+  texture.needsUpdate = true;
+  return { texture, width: canvas.width, height: canvas.height };
+}
+
+// src/character/CharacterTooltip.ts
+var fontScale = 5;
+var defaultLabelColor = new Color2(0);
+var defaultFontColor = new Color2(16777215);
+var defaultLabelAlignment = "center" /* center */;
+var defaultLabelFontSize = 9;
+var defaultLabelPadding = 0;
+var defaultLabelWidth = 0.25;
+var defaultLabelHeight = 0.125;
+var defaultLabelCastShadows = true;
+var CharacterTooltip = class {
+  constructor(parentModel) {
+    __publicField(this, "geometry");
+    __publicField(this, "material");
+    __publicField(this, "mesh");
+    __publicField(this, "visibleOpacity", 0.85);
+    __publicField(this, "targetOpacity", 0);
+    __publicField(this, "fadingSpeed", 0.02);
+    __publicField(this, "secondsToFadeOut", 15);
+    __publicField(this, "props", {
+      content: "",
+      alignment: defaultLabelAlignment,
+      width: defaultLabelWidth,
+      height: defaultLabelHeight,
+      fontSize: defaultLabelFontSize,
+      padding: defaultLabelPadding,
+      color: defaultLabelColor,
+      fontColor: defaultFontColor,
+      castShadows: defaultLabelCastShadows
+    });
+    this.setText = this.setText.bind(this);
+    this.material = new MeshBasicMaterial2({
+      map: null,
+      transparent: true,
+      opacity: 0
+    });
+    this.material.side = FrontSide;
+    this.geometry = new PlaneGeometry(1, 1, 1, 1);
+    this.mesh = new Mesh2(this.geometry, this.material);
+    this.mesh.position.set(0, 1.6, 0);
+    this.mesh.visible = false;
+    parentModel.add(this.mesh);
+  }
+  redrawText(content) {
+    if (!this.material) {
+      return;
+    }
+    if (this.material.map) {
+      this.material.map.dispose();
+    }
+    const { texture, width, height } = THREECanvasTextTexture(content, {
+      bold: true,
+      fontSize: this.props.fontSize * fontScale,
+      paddingPx: this.props.padding,
+      textColorRGB255A1: {
+        r: this.props.fontColor.r * 255,
+        g: this.props.fontColor.g * 255,
+        b: this.props.fontColor.b * 255,
+        a: 1
+      },
+      backgroundColorRGB255A1: {
+        r: this.props.color.r * 255,
+        g: this.props.color.g * 255,
+        b: this.props.color.b * 255,
+        a: 1
+      },
+      dimensions: {
+        width: this.props.width * (100 * fontScale),
+        height: this.props.height * (100 * fontScale)
+      },
+      alignment: this.props.alignment
+    });
+    this.material.map = texture;
+    this.material.map.magFilter = LinearFilter2;
+    this.material.map.minFilter = LinearFilter2;
+    this.material.needsUpdate = true;
+    this.mesh.scale.x = width / (100 * fontScale);
+    this.mesh.scale.y = height / (100 * fontScale);
+    this.mesh.position.y = 1.6;
+  }
+  setText(text, temporary = false) {
+    this.redrawText(text);
+    this.mesh.visible = true;
+    this.targetOpacity = this.visibleOpacity;
+    if (temporary) {
+      setTimeout(() => {
+        this.hide();
+      }, this.secondsToFadeOut * 1e3);
+    }
+  }
+  hide() {
+    this.targetOpacity = 0;
+  }
+  update(camera) {
+    this.mesh.lookAt(camera.position);
+    const opacity = this.mesh.material.opacity;
+    if (opacity < this.targetOpacity) {
+      this.mesh.material.opacity = Math.min(
+        this.mesh.material.opacity + this.fadingSpeed,
+        this.targetOpacity
+      );
+    } else if (opacity > this.targetOpacity) {
+      this.mesh.material.opacity = Math.max(
+        this.mesh.material.opacity - this.fadingSpeed,
+        this.targetOpacity
+      );
+      if (opacity >= 1 && this.mesh.material.transparent === true) {
+        this.mesh.material.transparent = false;
+        this.mesh.material.needsUpdate = true;
+      } else if (opacity > 0 && opacity < 1 && this.mesh.material.transparent === false) {
+        this.mesh.material.transparent = true;
+        this.mesh.material.needsUpdate = true;
+      }
+      if (this.mesh.material.opacity <= 0) {
+        this.mesh.visible = false;
+      }
+    }
+  }
+};
+
 // src/character/LocalController.ts
 import { Box3, Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
 var LocalController = class {
@@ -743,7 +983,7 @@ var LocalController = class {
     __publicField(this, "maxRunSpeed", 8.5);
     __publicField(this, "gravity", -42);
     __publicField(this, "jumpForce", 16);
-    __publicField(this, "coyoteTimeThreshold", 290);
+    __publicField(this, "coyoteTimeThreshold", 70);
     __publicField(this, "coyoteTime", false);
     __publicField(this, "canJump", true);
     __publicField(this, "characterOnGround", false);
@@ -772,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)
@@ -863,6 +1103,11 @@ var LocalController = class {
       );
     }
   }
+  computeAngularDifference(rotationQuaternion) {
+    if (!this.model?.mesh)
+      return 0;
+    return 2 * Math.acos(Math.abs(this.model.mesh.quaternion.dot(rotationQuaternion)));
+  }
   updateRotation() {
     if (!this.thirdPersonCamera || !this.model?.mesh)
       return;
@@ -870,7 +1115,11 @@ var LocalController = class {
     this.updateAzimuthalAngle();
     const rotationQuaternion = new Quaternion();
     rotationQuaternion.setFromAxisAngle(this.vectorUp, this.azimuthalAngle + this.rotationOffset);
-    this.model.mesh.quaternion.rotateTowards(rotationQuaternion, 0.07);
+    const angularDifference = this.computeAngularDifference(rotationQuaternion);
+    const desiredTime = 0.07;
+    const angularSpeed = angularDifference / desiredTime;
+    const frameRotation = angularSpeed * this.timeManager.deltaTime;
+    this.model.mesh.quaternion.rotateTowards(rotationQuaternion, frameRotation);
   }
   addScaledVectorToCharacter(deltaTime) {
     if (!this.model?.mesh)
@@ -950,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)
@@ -988,13 +1244,17 @@ var Character = class {
     __publicField(this, "controller", null);
     __publicField(this, "name", null);
     __publicField(this, "model", null);
-    __publicField(this, "color", new Color2());
+    __publicField(this, "color", new Color3());
     __publicField(this, "position", new Vector34());
+    __publicField(this, "tooltip", null);
     this.load();
   }
   async load() {
     this.model = new CharacterModel(this.characterDescription);
     await this.model.init();
+    if (this.tooltip === null) {
+      this.tooltip = new CharacterTooltip(this.model.mesh);
+    }
     this.color = this.model.material.colorsCube216[this.id];
     if (this.isLocal) {
       this.controller = new LocalController(
@@ -1011,6 +1271,9 @@ var Character = class {
   update(time) {
     if (!this.model)
       return;
+    if (this.tooltip) {
+      this.tooltip.update(this.cameraManager.camera);
+    }
     this.model.mesh.getWorldPosition(this.position);
     if (typeof this.model.material.uniforms.time !== "undefined") {
       this.model.material.uniforms.time.value = time;
@@ -1026,7 +1289,7 @@ import { Group, Vector3 as Vector36 } from "three";
 // src/character/RemoteController.ts
 import {
   AnimationMixer as AnimationMixer2,
-  Object3D as Object3D3,
+  Object3D as Object3D4,
   Quaternion as Quaternion2,
   Vector3 as Vector35
 } from "three";
@@ -1036,18 +1299,19 @@ var RemoteController = class {
     this.id = id;
     __publicField(this, "modelLoader", ModelLoader_default);
     __publicField(this, "characterModel", null);
-    __publicField(this, "animationMixer", new AnimationMixer2(new Object3D3()));
+    __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)
@@ -1132,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
@@ -1165,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 */
             });
           }
@@ -1178,6 +1441,7 @@ var CharacterManager = class {
           this.group.add(character.model.mesh);
           if (isLocal) {
             this.character = character;
+            this.character.tooltip?.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
             const remoteController = new RemoteController(character, id);
@@ -1203,6 +1467,7 @@ var CharacterManager = class {
               spawnPosition.z
             );
             this.remoteCharacterControllers.set(id, remoteController);
+            character.tooltip?.setText(`${id}`);
           }
           resolve(character);
         },
@@ -1432,7 +1697,9 @@ import {
   NormalPass
 } from "postprocessing";
 import {
-  Color as Color4,
+  AmbientLight,
+  Color as Color6,
+  Fog,
   HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager as LoadingManager2,
@@ -1442,14 +1709,117 @@ 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 = {
   renderer: {
     shadowMap: 2,
-    toneMapping: 4,
+    toneMapping: 5,
     exposure: 1,
-    bgIntensity: 0.6,
+    bgIntensity: 0.5,
     bgBlurriness: 0
   },
   ssao: {
@@ -1480,17 +1850,17 @@ var composerValues = {
     adaptationRate: 2
   },
   brightness: -0.03,
-  contrast: 1.3,
-  saturation: 0.95,
-  grain: 0.055,
-  bloom: 0.4
+  contrast: 1.21,
+  saturation: 0.91,
+  grain: 0.061,
+  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: {
@@ -1529,7 +1899,7 @@ var composerOptions = {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
   bloom: {
-    amount: { min: 0, max: 4, step: 0.1 }
+    amount: { min: 0, max: 2, step: 0.05 }
   }
 };
 var shadowMapTypes = {
@@ -1589,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 Color3 } 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");
@@ -1609,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) {
@@ -1624,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 });
@@ -1631,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)();
@@ -1738,205 +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;
-          if (e.value !== 5 && e.value !== 0) {
-            this.toneMapping.hidden = true;
-          } else {
-            this.toneMapping.hidden = false;
-          }
-          toneMappingPass.enabled = e.value === 5 || e.value === 0 ? 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 Color3().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());
@@ -2159,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));
@@ -2185,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,
@@ -2200,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
@@ -2227,7 +2787,7 @@ var Composer = class {
       bias: composerValues.ssao.bias,
       fade: composerValues.ssao.fade,
       resolutionScale: composerValues.ssao.resolutionScale,
-      color: new Color4().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,
@@ -2267,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();
@@ -2307,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(
@@ -2333,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
@@ -2387,13 +3002,13 @@ import {
   getRelativePositionAndRotationRelativeToObject
 } from "mml-web";
 import {
-  Color as Color5,
+  Color as Color7,
   DoubleSide,
   Euler,
-  FrontSide,
-  Mesh as Mesh2,
+  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";
@@ -2401,20 +3016,20 @@ 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;
     this.collisionTrigger = MMLCollisionTrigger.init();
   }
   raycastFirstDistance(ray) {
-    let minimumDistance = Infinity;
+    let minimumDistance = null;
     for (const [, value] of this.collisionMeshState) {
-      const hit = value.meshBVH.raycast(ray, DoubleSide);
-      if (hit.length > 0) {
-        if (hit[0].distance < minimumDistance) {
-          minimumDistance = hit[0].distance;
+      const hit = value.meshBVH.raycastFirst(ray, DoubleSide);
+      if (hit) {
+        if (minimumDistance === null || hit.distance < minimumDistance) {
+          minimumDistance = hit.distance;
         }
       }
     }
@@ -2425,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);
@@ -2446,13 +3061,13 @@ var CollisionsManager = class {
     if (!this.debug) {
       return { source: group, visualizer: null, meshBVH };
     }
-    const mergedMesh = new Mesh2(
+    const mergedMesh = new Mesh3(
       newBufferGeometry,
-      new MeshStandardMaterial2({ color: 16711680, side: FrontSide, wireframe: true })
+      new MeshStandardMaterial2({ color: 16711680, side: FrontSide2, wireframe: true })
     );
     mergedMesh.geometry.boundsTree = meshBVH;
     const visualizer = new MeshBVHVisualizer(mergedMesh, 3);
-    visualizer.edgeMaterial.color = new Color5(255);
+    visualizer.edgeMaterial.color = new Color7(255);
     visualizer.update();
     return { source: group, visualizer, meshBVH };
   }
@@ -2499,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);
@@ -2539,6 +3154,7 @@ export {
   Composer,
   KeyInputManager,
   MMLCompositionScene,
+  Sun,
   TimeManager
 };
 //# sourceMappingURL=index.js.map