Cesium Widget

<!--
  示例：用 CesiumWidget 只保留三维场景
  说明：不创建 Viewer，没有动画、时间轴与图层选择器，内容全部手动加到 scene 上
  核心逻辑：new Cesium.CesiumWidget → baseLayer: false → scene.primitives 自己加
  依赖：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:250px}
  .hud b{color:#e6e8ec;font-weight:600}
  .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>CesiumWidget</b></div>
  <div>没有内置控件，场景内容全部手写</div>
  <div id="size">拖动窗口大小会触发 resize()</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/cesium@1.121.0/Build/Cesium/Cesium.js"></script>
<script>
(function () {
  'use strict';

  var widget = new Cesium.CesiumWidget('c', {
    baseLayer: false,
    skyBox: false,
    skyAtmosphere: false
  });

  var scene = widget.scene;
  scene.imageryLayers.removeAll();
  scene.globe.baseColor = Cesium.Color.fromCssColorString('#1c2733');
  scene.backgroundColor = Cesium.Color.fromCssColorString('#0e1116');
  scene.globe.enableLighting = true;

  /* 手动构造一个图元：立方体 */
  var instances = [];
  var palette = ['#4d9bff', '#39c0a0', '#f2a03d', '#e45c7a'];

  for (var i = 0; i < 4; i++) {
    var lon = 116.3913 + (i - 1.5) * 0.0012;
    instances.push(new Cesium.GeometryInstance({
      geometry: new Cesium.BoxGeometry({
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        minimumCorner: new Cesium.Cartesian3(-60, -60, 0),
        maximumCorner: new Cesium.Cartesian3(60, 60, 160 + i * 90)
      }),
      modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(lon, 39.9074, 0)
      ),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.fromCssColorString(palette[i])
        )
      }
    }));
  }

  scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.PerInstanceColorAppearance({ flat: false, translucent: false }),
    asynchronous: false
  }));

  widget.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.3913, 39.8980, 1200),
    orientation: {
      heading: Cesium.Math.toRadians(18),
      pitch: Cesium.Math.toRadians(-26),
      roll: 0
    },
    duration: 0
  });

  /* CesiumWidget 不会自己跟容器尺寸，这里补一个监听 */
  window.addEventListener('resize', function () {
    widget.resize();
    document.getElementById('size').textContent =
      '当前画布 ' + widget.canvas.width + ' × ' + widget.canvas.height;
  });
})();
</script>
</body>
</html>