diff --git a/index.html b/index.html
index d2d184b4..05dc25ff 100644
--- a/index.html
+++ b/index.html
@@ -5964,6 +5964,17 @@
+
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index fb23da7b..f02d7641 100644
--- a/modules/ui/3d.js
+++ b/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
};
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 551a78e6..9f00eb74 100644
--- a/modules/ui/options.js
+++ b/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() {