Atmosphere

<!--
  示例：大气散射与光照随时间变化
  说明：调 skyAtmosphere 的亮度、饱和度、色相与光照强度，配合 clock 时间看昼夜分界线移动
  核心逻辑：skyAtmosphere.uniforms 四个参数 + globe.enableLighting + 太阳位置由 clock 决定
  依赖：CesiumJS 1.121 · jsDelivr CDN，无影像与地形请求
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>大气散射与昼夜光晕</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Widgets/widgets.css">
<style>
  html,body{height:100%;margin:0}
  body{background:#0e1116;color:#e6e8ec;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  #c{height:100%}
  .hud{position:absolute;left:12px;top:12px;z-index:5;background:rgba(23,28,35,.9);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;max-width:270px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:7px}
  input[type=range]{width:100%}
  .cesium-viewer-bottom .cesium-widget-credits,.cesium-viewer-animationContainer,
  .cesium-viewer-timelineContainer{display:none!important}
</style>
</head>
<body>
<div id="c"></div>
<div class="hud">
  <div><b>大气与光照</b></div>
  <div class="row">亮度偏移 <span id="bVal">0.00</span></div>
  <div class="row"><input id="b" type="range" min="-1" max="1" step="0.05" value="0"></div>
  <div class="row">饱和度偏移 <span id="sVal">0.00</span></div>
  <div class="row"><input id="s" type="range" min="-1" max="1" step="0.05" value="0"></div>
  <div class="row">色相偏移 <span id="hVal">0.00</span></div>
  <div class="row"><input id="h" type="range" min="-1" max="1" step="0.05" value="0"></div>
  <div class="row">太阳强度 <span id="lVal">10.0</span></div>
  <div class="row"><input id="l" type="range" min="1" max="30" step="0.5" value="10"></div>
  <div class="row">世界时 <span id="tVal">8</span> 点</div>
  <div class="row"><input id="t" type="range" min="0" max="23" step="1" value="8"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var viewer = new Cesium.Viewer('c', {
    baseLayer: false,
    baseLayerPicker: false, geocoder: false, homeButton: false,
    sceneModePicker: false, navigationHelpButton: false,
    animation: false, timeline: false, fullscreenButton: false,
    infoBox: false, selectionIndicator: false
  });

  var scene = viewer.scene;
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#20303f');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#05080d');
  scene.skyBox.show = false;
  scene.moon.show = false;
  scene.skyAtmosphere.show = true;
  scene.globe.enableLighting = true;
  scene.globe.showGroundAtmosphere = true;

  var atmosphere = scene.skyAtmosphere;

  viewer.clock.shouldAnimate = false;
  viewer.clock.currentTime = Cesium.JulianDate.fromIso8601('2026-10-28T08:00:00Z');

  function bind(id, valId, apply, digits) {
    var input = document.getElementById(id);
    var label = document.getElementById(valId);
    input.addEventListener('input', function () {
      var v = parseFloat(this.value);
      apply(v);
      label.textContent = v.toFixed(digits);
    });
  }

  bind('b', 'bVal', function (v) { atmosphere.brightnessShift = v; }, 2);
  bind('s', 'sVal', function (v) { atmosphere.saturationShift = v; }, 2);
  bind('h', 'hVal', function (v) { atmosphere.hueShift = v; }, 2);
  bind('l', 'lVal', function (v) { atmosphere.atmosphereLightIntensity = v; }, 1);

  document.getElementById('t').addEventListener('input', function () {
    var hour = parseInt(this.value, 10);
    document.getElementById('tVal').textContent = hour;
    var iso = '2026-10-28T' + (hour < 10 ? '0' + hour : hour) + ':00:00Z';
    viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(iso);
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(100, 22, 15800000),
    orientation: {
      heading: 0,
      pitch: Cesium.Math.toRadians(-62),
      roll: 0
    },
    duration: 0
  });
})();
</script>
</body>
</html>