第一帧从哪里来

第一个示例的目标是看到一个可旋转的地球，并且能解释它为什么出现。页面容器提供显示区域，Cesium 创建 WebGL 上下文，Viewer 驱动更新和绘制，Globe 提供地球表面。下面的最小代码没有加载真实地形或底图；表面的光滑形状来自参考椭球（reference ellipsoid）：把圆球沿某些轴缩放得到的平滑曲面，用来近似地球，而不是逐座山峰的模型。

最小配置也有明确含义

下面代码假定已安装本站固定版本 cesium@1.145.0，并由构建工具配置 Cesium 的 Workers、Assets、Widgets 与 ThirdParty 静态资源。它是初始化核心片段，可用于已有的 Vite 应用；组件必须在容器挂载后执行。

import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

const viewer = new Cesium.Viewer('globe', {
  baseLayerPicker: false,
  baseLayer: false,
  terrainProvider: new Cesium.EllipsoidTerrainProvider(),
  geocoder: false,
  animation: false,
  timeline: false,
});
viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#153c59');
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(110, 25, 18000000), // 经度°、纬度°、椭球高m
});
// 页面永久离开时执行：viewer.destroy();

容器还需要确定的高度，例如 height: 480px。宽高为零的 canvas 即使没有代码错误，也无法给出可见画面。baseLayer: false 关闭默认底图；与它配套的 baseLayerPicker: false 关闭底图选择器。这样可以先观察引擎本身，避免把在线服务、token 和网络问题混进第一帧。

空白页按依赖顺序排查

先确认容器存在且非零，再查看控制台是否出现模块、WebGL 或资源加载错误。随后检查 Workers 与图片资源的 URL，最后才考虑相机是否对准对象。JavaScript 文件成功下载并不等于 Cesium 的运行资源全部可用，部署到子路径时尤其容易遗漏资源前缀。

不要为了“刷新地球”重复创建 Viewer。一个 Viewer 持有事件监听、canvas、GPU 资源与渲染循环；路由切换时应销毁旧实例。隐藏 DOM 只改变可见性，并不自动释放这些资源。

地球的数据层

分开控制影像、经纬网和地表高度。

在浏览器本地运行 · 无需账号 · 鼠标拖动旋转，滚轮缩放

底图：Natural Earth II（公共领域）；其余几何和地形为教学合成。数据说明

查看运行源码

此代码直接读取实际运行的实验模块。按 kind 分支定位当前实验，也可查看数据公式和 GLSL。

读取源码…

观察任务： 关闭“显示公开底图”，保持“启用合成地形”关闭，使实验接近上面的最小配置。用鼠标旋转和缩放地球，观察轮廓。没有影像的地球是否意味着没有位置参考？再把页面滚动离开实验，回来后检查交互是否恢复。

展开解释

椭球仍然定义地理坐标对应的三维位置。影像只是给地表增加颜色，位置参考并不依赖卫星图。页面中的实验还负责管理自身可见性与资源；这与应用创建 Viewer 后长期不管它，是两种不同的生命周期策略。

官方延伸：Viewer 初始化选项、1.145 Viewer 源码。

第一帧从哪里来 ​

最小配置也有明确含义 ​

空白页按依赖顺序排查 ​

地球的数据层

第一帧从哪里来

最小配置也有明确含义

空白页按依赖顺序排查