feat: 3d mode - sun presets

index.html

@@ -5964,6 +5964,17 @@
             </select>
           </div>
 
+          <div data-tip="Quick preset lighting for different times of day" style="margin-top: 0.4em">
+            <label>Time of day:</label>
+            <select id="options3dTimeOfDay" style="width: 10em; margin-bottom: 0.3em">
+              <option value="custom">Custom</option>
+              <option value="dawn">Dawn</option>
+              <option value="noon" selected>Noon</option>
+              <option value="evening">Evening</option>
+              <option value="night">Night</option>
+            </select>
+          </div>
+
           <div data-tip="Set sun position (x, y) and color" style="margin-top: 0.4em">
             <label>Sun position and color:</label>
             <div style="display: flex; gap: 0.2em">

modules/ui/3d.js

@@ -186,6 +186,48 @@ window.ThreeD = (function () {
     render();
   };
 
+  // Time of day presets
+  const timeOfDayPresets = {
+    dawn: {
+      sun: {x: -500, y: 400, z: 800},
+      sunColor: "#ff9a56",
+      lightness: 0.4,
+      skyColor: "#ffccaa",
+      waterColor: "#2d4d6b"
+    },
+    noon: {
+      sun: {x: 100, y: 800, z: 1000},
+      sunColor: "#cccccc",
+      lightness: 0.6,
+      skyColor: "#9ecef5",
+      waterColor: "#466eab"
+    },
+    evening: {
+      sun: {x: 500, y: 400, z: 800},
+      sunColor: "#ff6b35",
+      lightness: 0.5,
+      skyColor: "#ff8c42",
+      waterColor: "#1e3a52"
+    },
+    night: {
+      sun: {x: 0, y: -500, z: 1000},
+      sunColor: "#4a5568",
+      lightness: 0.2,
+      skyColor: "#1a1a2e",
+      waterColor: "#0f1419"
+    }
+  };
+
+  const setTimeOfDay = function (presetName) {
+    const preset = timeOfDayPresets[presetName];
+    if (!preset) return;
+
+    setSun(preset.sun.x, preset.sun.y, preset.sun.z);
+    setSunColor(preset.sunColor);
+    setLightness(preset.lightness);
+    if (options.extendedWater) setColors(preset.skyColor, preset.waterColor);
+  };
+
   const setResolution = function (resolution) {
     options.resolution = resolution;
     update();
@@ -778,6 +820,8 @@ window.ThreeD = (function () {
     toggleSky,
     setResolution,
     setColors,
+    setTimeOfDay,
+    timeOfDayPresets,
     saveScreenshot,
     saveOBJ
   };

modules/ui/options.js

@@ -1054,6 +1054,7 @@ function toggle3dOptions() {
   byId("options3dMeshWireframeMode").addEventListener("change", toggleWireframe3d);
   byId("options3dSunColor").addEventListener("input", changeSunColor);
   byId("options3dSubdivide").addEventListener("change", toggle3dSubdivision);
+  byId("options3dTimeOfDay").addEventListener("change", changeTimeOfDay);
 
   function updateValues() {
     const globe = byId("canvas3d").dataset.type === "viewGlobe";
@@ -1075,6 +1076,41 @@ function toggle3dOptions() {
     options3dGlobeResolution.value = ThreeD.options.resolution;
     options3dSunColor.value = ThreeD.options.sunColor;
     options3dSubdivide.value = ThreeD.options.subdivide;
+    updateTimeOfDayPreset();
+  }
+
+  function updateTimeOfDayPreset() {
+    const presetSelect = byId("options3dTimeOfDay");
+    if (!presetSelect) return;
+
+    const currentSunX = ThreeD.options.sun.x;
+    const currentSunY = ThreeD.options.sun.y;
+    const currentSunZ = ThreeD.options.sun.z;
+    const currentSunColor = ThreeD.options.sunColor;
+    const currentLightness = ThreeD.options.lightness;
+
+    let matchingPreset = "custom";
+    for (const [name, preset] of Object.entries(ThreeD.timeOfDayPresets)) {
+      if (
+        preset.sun.x === currentSunX &&
+        preset.sun.y === currentSunY &&
+        preset.sun.z === currentSunZ &&
+        preset.sunColor === currentSunColor &&
+        Math.abs(preset.lightness - currentLightness) < 0.05
+      ) {
+        matchingPreset = name;
+        break;
+      }
+    }
+
+    presetSelect.value = matchingPreset;
+  }
+
+  function changeTimeOfDay() {
+    const presetName = this.value;
+    if (presetName === "custom") return;
+    ThreeD.setTimeOfDay(presetName);
+    updateValues();
   }
 
   function changeHeightScale() {
@@ -1090,16 +1126,31 @@ function toggle3dOptions() {
   function changeLightness() {
     options3dLightnessRange.value = options3dLightnessNumber.value = this.value;
     ThreeD.setLightness(this.value / 100);
+    // Mark as custom when user manually changes lightness
+    const presetSelect = byId("options3dTimeOfDay");
+    if (presetSelect && presetSelect.value !== "custom") {
+      presetSelect.value = "custom";
+    }
   }
 
   function changeSunColor() {
     ThreeD.setSunColor(options3dSunColor.value);
+    // Mark as custom when user manually changes sun color
+    const presetSelect = byId("options3dTimeOfDay");
+    if (presetSelect && presetSelect.value !== "custom") {
+      presetSelect.value = "custom";
+    }
   }
 
   function changeSunPosition() {
     const x = +options3dSunX.value;
     const y = +options3dSunY.value;
     ThreeD.setSun(x, y);
+    // Mark as custom when user manually changes sun position
+    const presetSelect = byId("options3dTimeOfDay");
+    if (presetSelect && presetSelect.value !== "custom") {
+      presetSelect.value = "custom";
+    }
   }
 
   function changeRotation() {