Keyboard Camera

<!--
  示例：用键盘推动相机在空中移动
  要点：keydown/keyup 记录按键，preRender 里按帧间隔调用 moveForward 与 moveRight
  依赖：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,.92);
       border:1px solid #2a313b;border-radius:6px;padding:9px 12px;font-size:12px;
       color:#a2a9b6;width:262px}
  .hud b{color:#e6e8ec;font-weight:600}
  .hud .row{margin-top:6px}
  .keys{display:grid;grid-template-columns:repeat(3,44px);gap:5px;margin-top:8px}
  .keys div{border:1px solid #343b46;border-radius:4px;text-align:center;
       padding:4px 0;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#cfd6e2}
  .keys div.on{background:#1d3a5c;border-color:#3d6f9e;color:#cfe4ff}
  .mono{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#8fb7e0}
  .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">W/S 前后 · A/D 左右 · Q/E 升降</div>
  <div class="keys">
    <div></div><div data-k="w">W</div><div></div>
    <div data-k="a">A</div><div data-k="s">S</div><div data-k="d">D</div>
    <div data-k="q">Q</div><div></div><div data-k="e">E</div>
  </div>
  <div class="row">按住 Shift 加速</div>
  <div class="row mono" id="info">高 — 米 · 速度 120 米/秒</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('#1c2733');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#0e1116');
  scene.skyBox.show = false;
  scene.sun.show = false;
  scene.moon.show = false;
  if (scene.skyAtmosphere) scene.skyAtmosphere.show = false;

  /* 地面上铺一层网格方块，飞行时有参照 */
  for (var gx = 0; gx < 8; gx++) {
    for (var gy = 0; gy < 6; gy++) {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          116.352 + gx * 0.010, 39.874 + gy * 0.010, 40
        ),
        box: {
          dimensions: new Cesium.Cartesian3(120, 120, 80),
          material: Cesium.Color.fromCssColorString(
            (gx + gy) % 2 === 0 ? '#26384c' : '#1e2c3c'
          )
        }
      });
    }
  }

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.389, 39.906, 200),
    cylinder: {
      length: 400, topRadius: 0, bottomRadius: 70,
      material: Cesium.Color.fromCssColorString('#4d9bff').withAlpha(0.8)
    }
  });

  var keys = {};
  var KEYMAP = { w: 'w', s: 's', a: 'a', d: 'd', q: 'q', e: 'e',
                 arrowup: 'w', arrowdown: 's', arrowleft: 'a', arrowright: 'd' };

  var chips = Array.prototype.slice.call(document.querySelectorAll('.keys div[data-k]'));

  function mark(k, on) {
    chips.forEach(function (c) {
      if (c.getAttribute('data-k') === k) c.className = on ? 'on' : '';
    });
  }

  document.addEventListener('keydown', function (ev) {
    var k = KEYMAP[ev.key.toLowerCase()];
    if (!k) return;
    ev.preventDefault();
    keys[k] = true;
    keys.shift = ev.shiftKey;
    mark(k, true);
  });

  document.addEventListener('keyup', function (ev) {
    var k = KEYMAP[ev.key.toLowerCase()];
    if (!k) return;
    keys[k] = false;
    keys.shift = ev.shiftKey;
    mark(k, false);
  });

  /* 窗口失焦时清空按键，避免相机一直飞 */
  window.addEventListener('blur', function () {
    keys = {};
    chips.forEach(function (c) { c.className = ''; });
  });

  var last = performance.now();
  var infoEl = document.getElementById('info');
  var frameCount = 0;

  scene.preRender.addEventListener(function () {
    var now = performance.now();
    var dt = Math.min((now - last) / 1000, 0.08);
    last = now;

    var speed = keys.shift ? 900 : 120;
    var step = speed * dt;

    var camera = viewer.camera;
    if (keys.w) camera.moveForward(step);
    if (keys.s) camera.moveBackward(step);
    if (keys.a) camera.moveLeft(step);
    if (keys.d) camera.moveRight(step);
    if (keys.q) camera.moveUp(-step);
    if (keys.e) camera.moveUp(step);

    if (++frameCount % 12 === 0) {
      var carto = Cesium.Cartographic.fromCartesian(camera.positionWC);
      infoEl.textContent = '高 ' + Math.round(carto.height) + ' 米 · 速度 ' + speed + ' 米/秒';
    }
  });

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.360, 39.880, 1400),
    orientation: {
      heading: Cesium.Math.toRadians(24),
      pitch: Cesium.Math.toRadians(-8),
      roll: 0
    }
  });
})();
</script>
</body>
</html>