一句话概览:CesiumJS 是浏览器端的三维地球引擎,用 WebGL 渲染全球地形、影像、3D Tiles 与动态实体。本站示例统一关闭在线影像、改用代码生成的数据,因此不需要 Cesium ion Token;每个示例都是独立 HTML,打开即可运行。
教程13 篇
相机与视角控制
三维场景里「视角」不是缩放级别,而是相机的位置加朝向。位置用经纬高描述, 朝向用 heading、pitch、roll 三个…
02社区精选资源
这一页只做索引,不搬全文。收的是 Cesium 生态里能直接打开、直接用的入口: 官方仓库与沙盒示例、值得读的长文与工程范例…
03三维坐标、高度与局部坐标系
同样一个「北京」,在 Cesium 里可以写成经纬度、写成地心直角坐标, 也可以写成相对某个点的局部坐标。混用这三种表达,是…
04实体与图元
Cesium 有两套绘制接口:Entity 面向业务对象,一个实体就是一条业务记录; Primitive 面向 GPU,一批…
05影像底图与坐标偏移
给 Cesium 接上国内影像底图后,矢量数据常常整体偏出几百米。 这不是加载写得不对,是两套坐标系的问题。
06从零搭起第一个三维地球
新建 Cesium 项目最容易卡住的地方不是 API,而是 Token。这一篇从空文件开始, 做出一个不依赖任何外部服务、打…
07拾取与场景交互
三维场景里的「点到了什么」不是一次命中判断。同一个像素上可能叠着模型、实体、地形三层内容, 拾取 API 的选择取决于想拿到…
08图元与批量渲染
Entity 写起来顺手,但每个实体都是一次独立的绘制准备。 上万个构件时,要把它们合并成一次 GPU 调用,这就是 Pri…
09空间分析:测距、剖面与可视域
Cesium 不提供现成的分析工具箱,只提供几何与地形采样两类基础能力。 测距、剖面、通视判断都要自己组合这几块积木,组合方…
10地形与影像图层
影像决定球体表面「长什么样」,地形决定球体表面「有多高」。两套瓦片各自请求、 各自调度,只开其中一个也能正常显示,但两者的高…
113D Tiles 是什么,怎么用
倾斜摄影、BIM、点云这些数据动辄几个 GB,一次性加载不可能。 3D Tiles 把它们切成小块,按视角远近决定加载哪一级…
123D Tiles 样式与条件表达式
模型加载进来是灰的,并不代表数据没带颜色。3D Tiles 的每个瓦片要素都可以带属性, 样式用一段表达式按属性算出颜色与可…
13时间轴与动画
Cesium 的时钟不是一个装饰控件。场景里几乎每个属性都可以绑定时间, 轨迹、飞行、生长动画都由同一个 Clock 驱动,…
API 文档45 个
使用示例240 个
加载一个 3D 模型
把一个长方体模型放到北京上空的地表上,并让它绕竖轴缓慢自转。 模型文件由 JavaScript 现场生成,不下载任何…
查看示例模型关节摆动
把两段模型拼成一个会摆动的机械臂:底座固定,摆臂绕底座顶部的铰点往复转动。 关节角完全由代码计算,不依赖模型里烘焙好…
查看示例模型逐实例着色
同一个模型加载三份,分别用高亮、混合、替换三种着色模式,颜色与模型原色如何叠加一目了然。
查看示例模型缩放与朝向
同一份模型数据,只改三个参数就得到三种完全不同的呈现:原始尺寸、放大并转向、以及远看仍然可见的保底尺寸。
查看示例浏览模型节点
一个模型内部往往由很多节点组成。示例用带命名的三层楼板模型,按名字找回节点并逐层高亮, 这是做构件查询、楼层切换的基…
查看示例用贴图拼出城市街区
城市尺度的三维数据往往以 3D Tiles 1.1 或 CDB 数据集的形式提供,两者都依赖 ion。 示例改用一张…
查看示例倾斜摄影场景的替代实现
倾斜摄影数据是 3D Tiles 最常见的用法:一整片实景模型加上自由环绕的相机。 示例用伪随机的建筑群替代实景模型…
查看示例倾斜摄影的分类着色
同一片建筑,按分类字段换一套颜色,就变成了专题图。示例把分类值换成了行列序号,取色与图例的逻辑不变。
查看示例S2 网格与全球影像金字塔
S2 用层层细分的四边形组织全球影像。示例把三层不同密度的网格叠在东亚上空,直观看到层级越深格子越小。
查看示例三维原生矢量面
矢量数据也能有体积:给多边形加一个挤出高度,平面地块立刻变成有厚度的体块,边界依旧清楚。
查看示例整体调整模型高度
不同来源的数据高程基准常常对不上,统一抬升是第一步。示例让一排建筑整体上下浮动,看清偏移量的作用。
查看示例批表层级的父子关系
三维数据里的属性常常是树状的:楼栋属于园区,园区属于片区。示例把三级关系挂在实体上,点一下就能追到根。
查看示例BIM 建筑的逐层呈现
BIM 模型自带楼层结构,最常做的操作是只看某一层或逐层展开。示例用盒体搭出八层楼,按节奏逐层显示。
查看示例包围盒与坐标轴调试
包围体是 3D Tiles 调度的基础。算错一点,就会出现选不中、飞不到的现象。把包围盒画成线,问题立刻可见。
查看示例多方向裁剪平面
裁剪平面是最常用的剖切手段:三个方向各切一刀,模型内部结构就露出来了,切口描边让剖面更清楚。
查看示例双视口对比
对比是审模的常用手段。两个视口、一台相机,剖切前后放在一起看,差异一目了然。
查看示例模型轮廓描边
边缘高亮是最轻量的状态提示。描边宽度稍微动一动,选中与告警就有了呼吸感,而材质完全不用改。
查看示例要素拾取与属性查询
三维场景里的「点一下看信息」全靠拾取。示例把属性挂在实体上,点哪栋就显示哪栋的数据。
查看示例按属性给要素换样式
同一批建筑,换一套配色规则就变成另一种专题图。示例把规则写成函数,循环切换三套方案。
查看示例
内容格式:模型与点云
3D Tiles 的瓦片可以装不同格式的内容:模型、实例、点云。认清格式,才知道该用哪套渲染参数。
查看示例
点云的层级抽稀
泼溅数据的层级,本质是不同密度的点集。示例用一层点按视距抽稀,把 LOD 的切换过程摆在明面上。
查看示例泼溅渲染的体积感
泼溅渲染不画三角面,靠成千上万个半透明点堆出体积。示例换一个角度看这种渲染的质感。
查看示例
泼溅与点云的参数对比
同样的点数,点的大小与透明度一改,观感就从云雾变成砂砾。两个参数决定泼溅与点云的差别。
查看示例悬停高亮与检查面板
检查器的价值在于「指哪查哪」。悬停高亮加属性面板,二三十行代码就能搭出雏形。
查看示例拖动建筑改变位置
选中、拖动、落位,是三维编辑最基本的动作链。三个鼠标事件加一次投影就够了。
查看示例进入建筑内部
从外面看是一栋楼,走进去才是空间。室内视角的关键不在相机,而在模型内表面是否可见。
查看示例月降水量的柱状可视化
降水数据不一定要画成格子。十二根柱子按月份排开,高度与颜色双编码,一年趋势一眼看清。
查看示例规模与帧率测试
数据一多,先看帧率再看效果。示例在两百米尺度上铺六百栋建筑,把性能压力摆在明面上。
查看示例倾斜摄影的光照调整
实景模型的效果一半靠数据,一半靠光。换个光照方向,同一栋楼的层次感完全不同。
查看示例地表要素的三分类着色
分类是三维专题图的基础。地面铺灰、建筑涂蓝、树冠点绿,同一片城区立刻有了语义。
查看示例拾取调试:屏幕坐标与地表位置
拾取不准的时候,先看三行数:屏幕坐标、命中类型、地表经纬度。哪一环断了都能看出来。
查看示例点云:用点勾勒城市
没有面,照样能看出楼。地面铺网格点、建筑沿柱角打点,一片点云就立起来了。
查看示例点云分类着色
点云本身是灰的,分类之后才有意义。三种颜色对应三种地物,密集的点忽然可读了。
查看示例点云的尺寸衰减与明暗
点云没有法向,只能靠尺寸与亮度补出立体感。两个参数调对了,一团散点立刻有体积。
查看示例点云的三套配色方案
点云最怕糊成一团。换配色是最快的解法:渐变看高程,分档看类别,单色看几何。
查看示例河流的属性驱动样式
一条河的宽度、颜色、标注,都可以由属性驱动。视距一变,细节随之增减,这就是属性 LOD。
查看示例分割显示的模型
一栋楼,左半蓝右半橙,中间一道切缝来回扫。两次模型加载、两个裁剪平面,就能做出对照效果。
查看示例地形分级设色
地形分类最直观的做法是分级设色:低处深绿、高处灰白,再加一点方向阴影,起伏就出来了。
查看示例垂直夸张系数
小比例尺下地形太平,把 Z 放大几倍才看得出结构。一行缩放矩阵,就能控制夸张程度。
查看示例分层体量与楼层信息
方案阶段看的是体量关系。逐层分色加点击查信息,层高、退台与面积一眼就能对上。
查看示例建筑剖切框
审模时不需要整栋楼,只要关注的那一段。三个平面围一个框,框外自然消失。
查看示例环境光遮蔽
一堆立方体挤在一起时,缝隙处本该更暗。环境光遮蔽在屏幕空间里补上这层暗部,让体块关系更清楚。
查看示例时间轴动画
底部时间轴可以拖动、播放与暂停,航班从北京经济南、南京到上海, 高度按余弦曲线过渡,轨迹线随飞行逐步画出。
查看示例
半透明盒体与棱线
同样的三个盒体准备了两套外观:一套 alpha 0.38 且不剔除背面, 另一套完全不透明。按钮切换,直观看到差别。
查看示例代码生成高程地形
官方示例用 ArcGIS 的高程服务。这里的等价做法是自己写一个高程回调,每个瓦片按坐标算出高度数组交给 Cesiu…
查看示例
自定义瓦片影像提供者
官方的 ArcGIS MapServer 示例从远程服务取瓦片。这里用同一套接口,把每个瓦片换成 canvas 现画…
查看示例大气散射与昼夜光晕
大气是球体边缘那圈淡蓝的光。Cesium 用 skyAtmosphere 模拟瑞利与米氏散射,几个参数就能把清晨、正…
查看示例
水深分层着色
官方示例用带海底高程的地形数据。这里用同样的思路,把深度色带画在 canvas 上贴到球体,分层逻辑与真实水深图一致…
查看示例
公告板图标
公告板永远面向相机。图标不用下载,示例在 canvas 上画一个水滴形标记再转成 dataURL。
查看示例
仅注记的底图
Bing Maps 示例只显示注记层。这里用等价做法:瓦片全部透明,只在对应经纬度位置写地名,叠在纯色球体上。
查看示例
代码生成的全球影像
官方 Blue Marble 用的是卫星影像。这里用一组经纬度多边形近似大陆轮廓,在 canvas 上填色,得到一张…
查看示例
立方体建筑群
九个立方体摆成一片楼群,尺寸、颜色、棱线各不相同,用来观察 dimensions 与 position 高度之间的关…
查看示例回调属性
属性不一定来自采样数据,也可以是一个函数。CallbackProperty 在每帧渲染前调用函数,返回当前值。
查看示例相机跟随运动目标
一台无人机沿椭圆航线盘旋并上下浮动,相机挂在它身后 620 米、上方 380 米的位置, 可以随时切换回自由视角,也…
查看示例围绕目标转圈
相机锁在中心塔上,航向每帧加一点点,于是自动绕圈。 俯仰与距离两个滑杆随时改变观察角度,暂停按钮冻结当前视角。
查看示例setView 定点观察
三个预设位姿覆盖全球、城市、贴近地平线三种尺度,另有一个按钮用 lookAt 反推相机位置,面板实时显示高度与航向。
查看示例多点位相机巡航
五个机位轮流飞,每段四秒,飞完自动接下一段并循环。 面板显示当前是第几站,暂停后可以从当前站继续。
查看示例立体眼镜模式
Cesium 的 VR 按钮会在支持的设备上进入立体渲染。桌面浏览器没有头显时,按钮仍会出现,点击后进入全屏分屏预览…
查看示例限定球体显示范围
有些场景只关心一小片区域。globe.cartographicLimitRectangle 把球体裁成一块矩形,范围…
查看示例
内置检查器
排查性能与拾取问题时,内置检查器比打印日志直观得多:它把绘制调用、图元数量、瓦片状态都摊在面板上。
查看示例OSM 建筑白模
用 OSM 风格的建筑轮廓生成白模,按高度着色并支持点击查询。
查看示例轻量三维窗口
Viewer 带一整套控件与数据源管理,CesiumWidget 只有场景。嵌到已有界面时,后者更轻。
查看示例圆与椭圆
用 ellipse 的半长轴、半短轴与旋转角画出椭圆,并让其中一个退化为圆。
查看示例实体贴地
用 CLAMP_TO_GROUND 让标注忽略自身高度,始终贴在球面上。
查看示例模型贴地
给 Entity 的 model 设置 heightReference,让模型底部始终贴合地面。
查看示例采样模型表面高度
用 sampleHeight 读取渲染结果的高度,把标注贴到模型表面。
查看示例
影像分类到瓦片表面
用 classificationType 控制地面图元投递到哪类表面,理解分类渲染。
查看示例分类与地形、模型的关系
把三种分类目标放在同一位置,直观看到它们各自覆盖哪些表面。
查看示例裁剪盒剖切模型
一个带贴图的立方体被六个平面切掉一角,滑块改变盒半径, 按钮把「保留盒内」翻成「保留盒外」。
查看示例
裁剪平面剖切地球
一个平面把球体切成两半,滑杆控制切面到地心的距离, 可以按 X、Y、Z 三个世界坐标轴切换切割方向。
查看示例多边形裁剪区域
裁剪平面切的是半空间,裁剪多边形切的是柱体。给定一个经纬度多边形,范围外的地表直接被丢弃。
查看示例时钟倍速与区间
一个点在圆形轨道上运动,位置完全由 clock 推出来。 四个倍速按钮和一个循环下拉框,改的是同一份时间设置。
查看示例体积云参数
云不是贴图,是程序化体素。CloudCollection 里的每朵云都有位置、尺寸、亮度和切片参数,改参数就能从薄云…
查看示例程序化云层
用 canvas 生成云团贴图,批量布置到高空并让它们缓慢漂移。
查看示例实体聚合
上万个点铺在地球上,远景里全是重叠的小点。聚合把一定像素范围内的实体合成一个带数字的圆,放大后再自动拆开。
查看示例沿路径铺出走廊带
一条带三个弯的折线,两侧各扩出相同宽度形成路面。 滑杆改宽度、下拉框改拐角样式,中心虚线始终跟着走。
查看示例自定义数据源
数据源是 Cesium 管理一批实体的方式。自己写一个数据源,就能让外部数据像 CZML 一样被统一加载、卸载和更新…
查看示例自定义地理编码
官方示例把 Geocoder 接到远程地理编码服务。这里换成一张本地表,接口一致,但不需要网络。
查看示例逐对象黑白后处理
把 BlackAndWhiteStage 的 selected 指向光标下的对象,做局部去色。
查看示例自定义后处理:像素化
写第一个自定义 PostProcessStage,用取整的纹理坐标做出像素化效果。
查看示例3D Tiles 自定义着色器
给瓦片集挂 CustomShader,用节点局部坐标的高度改写材质颜色。
查看示例
模型自定义着色器
用 CustomShader 改写模型片元着色,实现按高度渐变的外观。
查看示例
着色器采样自定义纹理
给 CustomShader 传入采样器 uniform,用纹理控制模型外观。
查看示例圆柱、圆锥与圆台
三个回转体并排站着,区别只在上下两个半径:相等是圆柱, 上半径为 0 是圆锥,介于两者之间是圆台。
查看示例用 CZML 播放一条飞行动画
五个航点串成一条航线,物体沿路线移动并自动画出轨迹。数据全部内联在页面里,不依赖任何外部文件。
查看示例CZML 挂载 3D Tiles
用 CZML 的 tileset 字段挂载瓦片数据,把数据配置与代码分开。
查看示例CZML 属性随时间变化
同一个点,大小循环起伏,颜色在蓝、白、绿之间过渡, 全部由 CZML 里的采样数组描述,页面代码不参与逐帧计算。
查看示例
CZML 广告牌与标签
CZML 里 billboard 和 label 是两套独立图形,可以挂在同一个对象上,位置只写一次。
查看示例CZML 盒子
盒子的尺寸写在 box.dimensions 里,单位米;orientation 用四元数,方便把盒子摆成任意姿态。
查看示例CZML 圆与椭圆
圆其实是椭圆的一种:把 semiMinorAxis 写成和 semiMajorAxis 一样即可,两者的字段完全共用…
查看示例CZML 颜色表达
CZML 的颜色既能写成 0 到 255 的 rgba 数组,也能写成 0 到 1 的 rgbaf 数组,前者直观,…
查看示例CZML 圆锥与圆柱
cone 不是独立图形:把 cylinder 的 topRadius 写成 0,得到的就是圆锥;上下半径不等则是圆台…
查看示例CZML 走廊带
corridor 只需要一串中心线坐标和一个宽度,Cesium 会自动沿中心线铺出带宽。
查看示例CZML 自定义属性
CZML 允许在对象里塞任意字段。示例给每个城市写上人口与等级,点一下就弹出自定义属性。
查看示例CZML 加载模型
用 CZML 描述模型的地址与位置,交给 CzmlDataSource 生成实体。
查看示例CZML 驱动模型关节
用 CZML 的节点变换关键帧转动模型的一个节点,做出吊臂摆动。
查看示例CZML 内嵌模型数据
把模型编码成 data URL 塞进 CZML,做到单文件自包含。
查看示例CZML 平移与缩放节点
用 CZML 的节点变换分别驱动平移与缩放,让机械臂往复伸缩。
查看示例CZML 描述多种对象
作业区、巡线、测站、观察塔四个对象写在同一个数组里, 一次加载全部到位,按钮再按 id 把其中三个关掉,只留折线。
查看示例CZML 运动路径
path 会自动把对象走过的位置连成线,不需要自己维护点集。resolution 决定多久采一个点,leadTime…
查看示例CZML 点
最简单的 CZML 图形是点:一个位置加一组样式字段,不用写任何绘制代码。
查看示例CZML 点的时间动态
同一个属性可以有多段:用 interval 分段给不同颜色,用 cartographicDegrees 采样给不同位…
查看示例CZML 多边形
多边形的顶点写在 positions.cartographicDegrees 里,每三项一个点。加一个 holes…
查看示例CZML 多边形顶点引用
多边形的顶点不一定要写死:写成 v1#position 这样的引用,顶点就会跟着被引用的对象一起动。
查看示例CZML 多边形分时段
同一个多边形可以在不同时间段显示不同颜色,也可以只在某段时间存在,全部写在 CZML 里。
查看示例CZML 折线
折线是最常用的 CZML 图形,一条 positions 数组加宽度就能画出线。
查看示例CZML 折线体
polylineVolume 沿中心线挤出一个二维截面,截面用多边形顶点描述,可以是圆、矩形或任意形状。
查看示例CZML 位置写法
同一个位置可以写成三种形式,选哪种取决于数据来源:手工写用经纬度,算出来的用笛卡尔,复用的用引用。
查看示例CZML 矩形
矩形只给两个角点:coordinates 用西、南、东、北四个度数,Cesium 直接铺出一块面。
查看示例CZML 引用属性
除了位置,颜色、朝向这些属性也能引用。改一处,所有引用它的对象一起变。
查看示例CZML 球与椭球
ellipsoid 用三个半径描述球体:三者相等就是正球,不等就是椭球。radii 是半轴,不是直径。
查看示例CZML 墙体
墙体是一串地面坐标加上下两个高度,Cesium 会沿折线拉起一面有厚度的墙。
查看示例CZML 绘制顺序
同一高度上的多边形谁盖谁,默认按对象添加顺序。zIndex 显式指定层级,就能稳定控制压盖关系。
查看示例数据源层级顺序
用 CustomDataSource 分组管理实体,再用 raise 调整组间压盖顺序。
查看示例帧率与图元统计
右上角是 Cesium 自带的帧率显示,左侧面板列出顶层图元数、 实体数、后处理阶段数与相机高度,每二十帧刷新一次。
查看示例景深后处理
用 DepthOfFieldStage 设定焦平面,让前景清晰、远景虚化。
查看示例按距离显示
用 DistanceDisplayCondition 给标注设置可见距离区间,按缩放层级分流。
查看示例双击定位
双击地球上任意位置,相机带缓动飞过去并保持斜俯视角, 目标点留下一个带坐标的标记。飞行时长可以用滑杆调。
查看示例按住左键画多边形
按住鼠标在球面上划一圈,松开就得到一个封闭面。 可以连续画多个,颜色循环取用,顶点少于三个的会被丢弃。
查看示例在地面上绘制多边形
用鼠标点击拾取地面坐标,实时拼出多边形,右键清空重来。
查看示例动态墙面
一条三百多米长的墙面,高度按正弦波沿路径起伏并缓慢推进, 墙顶再叠一条同步变化的光带,用来表达信号强度、水位或热流。
查看示例夜光地球
用一张深色灯点底图做出夜景效果,理解亮度与 gamma 对暗部的处理。
查看示例高程分层着色
写一个高程分层的球体材质,让地形按高度呈现交替色带。
查看示例椭圆与扇形地面
左边是拉伸过的椭圆,右边是按圆心角实时重算的扇形。 两种面状图元共用一套经纬度坐标,方便对比写法差异。
查看示例拖动实体换位置
三个方块可以被鼠标拖着走,位置实时跟随地表交点, 拖动中的方块变成半透明黄,松开后回到自己的颜色。
查看示例导出 KML
用 exportKml 把实体导出成 KMZ 文件,并提供下载入口。
查看示例城市飞线动画
一个枢纽城市连向六个目的地,弧线沿大圆展开并抬高到几十万米, 白色光点循环跑完整条弧线,用来表达流向与连接关系。
查看示例自定义雾效后处理
读取深度纹理还原视距,按指数衰减把远处图元混向雾色。
查看示例FXAA 抗锯齿
一行开关打开屏幕空间抗锯齿,用一排细柱观察边缘的台阶变化。
查看示例GeoJSON 与 TopoJSON
分别加载 GeoJSON 与 TopoJSON,对比同一形状的两种数据表达。
查看示例GeoJSON 简单样式
利用 simplestyle 规范里的属性字段,让数据自己决定颜色与图标。
查看示例
几何与外观
绕过 Entity,用 GeometryInstance 与 Primitive 构建几何并逐实例着色。
查看示例高度参考
用 heightReference 控制实体高度基准,理解三种模式的差别。
查看示例不依赖 ion 的三维地球
一个干净的三维地球,不加载任何影像和地形服务,因此不需要 Cesium ion Token。
查看示例从地球内部看
把相机放到球面以下,观察地球内壁与地表轮廓的剪影。
查看示例地球等高线材质
给球体挂 ElevationContour 材质,在地形上生成可调的等高线。
查看示例高程配色与水面
用高程渐变为地形上色,并在低处叠加半透明水面。
查看示例半透明地球与地下色
球体正面透明度拉到 0.45 后,球心那颗发光球和另一侧的城市点都露了出来, 滑杆继续调低就几乎只剩轮廓。
查看示例glTF PBR 扩展
在 glTF 材质里声明清漆与高光扩展,对比标准材质与扩展材质的差别。
查看示例城市与地形叠加
用程序化高度场做地形,再把城市体块铺上去,观察地形与建筑的叠合。
查看示例实景三维城市
用带立面纹理的体块搭建城市,复现实景三维瓦片的观感。
查看示例实景城市中插入建筑
在既有城市体块中插入一栋新建筑,用材质与描边把它区分出来。
查看示例加载 GPX 轨迹
用 GpxDataSource 解析轨迹与航点,把户外运动数据直接放到地球上。
查看示例经纬网格
按固定步长生成经线与纬线,赤道和本初子午线用另一种颜色标出。 网格线全部由程序计算,不依赖任何瓦片服务。
查看示例贴地标牌与深度测试
六个山顶标牌锚定在地表,切换深度测试开关可以直接看到差别: 关掉之后,地球背面的标牌也会穿透球体显示出来。
查看示例朝向:航向、俯仰、横滚
用 HeadingPitchRoll 摆出三种姿态,理解三个角度各自的旋转轴。
查看示例
热力图点
二百六十个半透明光斑叠在地表上,中心红、外围蓝,边界靠透明度自然过渡。 贴图由 canvas 现画,不引入任何图片文…
查看示例高动态范围与色调映射
开启 HDR 渲染与 ACES 色调映射,观察强光下高光与暗部的层次。
查看示例HTML 浮层标注
把世界坐标换算成画布坐标,让普通网页元素跟着三维场景移动。
查看示例三维对象图层
用重复的组合几何摆出路灯与行道树,模拟三维对象图层的批量实例。
查看示例建筑场景图层
把建筑按楼层分组,模拟 I3S 建筑场景图层的子图层结构。
查看示例要素拾取与高亮
实现点选高亮:记住上一次选中的要素,切换时恢复原色。
查看示例集成网格图层
用连续的体块条带模拟集成网格图层,演示整层拾取与高亮。
查看示例基于图像的光照
用球谐系数做环境光照,让 PBR 材质的暗部与反射更自然。
查看示例
影像亮度对比度调色
底层是深色网格,上层是六个彩色块。四个滑杆分别改亮度、对比度、 饱和度和伽马,改动只作用于上层,底图保持原样。
查看示例canvas 当影像底图
一张 1024 × 768 的示意图,包含水系、路网、绿地与标注, 铺在 115.8°E 到 117.0°E 的矩形…
查看示例指定颜色转透明
用 colorToAlpha 把影像中的某一种颜色抠掉,露出下面的图层。
查看示例影像矩形挖洞
用 cutoutRectangle 在影像图层上开一个矩形洞,由下层图层填补。
查看示例叠加多个影像图层
用 imageryLayers 叠加三层影像,理解图层顺序与透明度的配合。
查看示例影像色彩调整
用 ImageryLayer 的色彩属性,把同一张底图调出四种风格。
查看示例影像卷帘对比
用 splitDirection 把两个影像图层分到分界线两侧,做卷帘对比。
查看示例影像纹理过滤
把图层的放大过滤改成最近邻,对比影像放大后的清晰与马赛克。
查看示例采样属性的插值
用 SampledPositionProperty 的三种插值算法,让同一条路径呈现不同弯度。
查看示例高密度街区体块
用密集的小体块与少量塔楼,搭出高密度街区的城市肌理。
查看示例键盘推动相机
W、A、S、D 前后左右,Q、E 升降,按住 Shift 提速到 900 米每秒。 地面上排了网格方块,飞行时有参照…
查看示例加载 KML
用 KmlDataSource 解析 KML,把地标、路径与多边形变成实体。
查看示例相机巡航
用 camera.flyTo 串起多个观察点,做出可按顺序播放的巡航路线。
查看示例标注文字样式
用同一组位置演示标注的字体、描边、背景与距离缩放。
查看示例影像图层顺序控制
三个图层分别是蓝色 4×4 网格、橙色 8×8 网格、瓦片行列号。 调整顺序、切换显隐、拉动整体透明度,都能立刻看到…
查看示例镜头光晕
用 LensFlareStage 模拟镜头对着太阳时的色散光斑与光环。
查看示例
改光照方向看昼夜
球体打开了光照,四个方块立在不同经纬度。 拖动方位角与高度角,明暗分界线会绕着球体移动。
查看示例局部坐标系
用 eastNorthUpToFixedFrame 建立局部坐标,把局部坐标里的点换算到世界坐标。
查看示例手动控制时间轴
关掉自动播放,手动推进 clock.currentTime,让实体沿采样轨迹移动。
查看示例用 canvas 画贴图
没有现成的图片也能有贴图:在页面里画一块棋盘加边框,转成 dataURL 直接当材质用,地面和盒体各贴一次。
查看示例条纹、网格与棋盘材质
用 Cesium 内置的三种材质属性,给同一组面换上不同图案。
查看示例条纹材质
一块两公里多的地面铺上双色条纹,滑杆控制条纹数量, 另一个滑杆把整块纹理绕面中心旋转。
查看示例着色器水波材质
一块贴地的多边形,表面颜色由片元着色器算出:两组正弦波叠加, 波峰处偏亮,波谷处偏深,时间取自内置帧计数。
查看示例量测距离
在地表上逐点单击,连成折线并算出总长度,每一段的中点标着自己的公里数。 右键或按钮清空重新量。
查看示例让模型自己转起来
模型文件里提前写入了旋转关键帧,加载后由 Cesium 的动画集合驱动, 滑杆能改转速,模型不需要每帧重设矩阵。
查看示例按距离显隐模型
同一个位置放两档模型:600 米以内显示小的,700 米之外显示大的, 中间留出空档。两个按钮把相机推到近处和远处。
查看示例模型航向俯仰横滚
一个机头朝东的长方体悬在 400 米高空,三个滑杆分别控制航向、俯仰、横滚, 地面上有一条向北的箭头做基准。
查看示例加载内联 glTF 模型
模型数据在运行时用脚本拼出来,转成 GLB 二进制后交给 Model.fromGltfAsync。缩放滑杆与颜色混合…
查看示例把 canvas 贴图塞进 GLB
画布画好红蓝分区加网格,转成 PNG 字节后写进 GLB 的二进制块, 模型加载出来自带贴图,不需要任何图片文件。
查看示例月亮与星空
打开天空盒与月亮,观察月亮在当前时刻的方位与亮度。
查看示例鼠标拾取经纬度
指针移动时实时显示坐标,单击在地表打点,超过六个时自动淘汰最早的一个。 用的是一次射线与椭球面求交,不依赖地形。
查看示例多重采样抗锯齿
用 msaaSamples 控制每个像素的采样数,观察细柱与斜屋顶边缘的变化。
查看示例双屏同步视角
在页面里并排放两个 Viewer,把一个视图的相机状态同步给另一个。
查看示例Natural Earth II 底图
用一张代码绘制的全球底图包裹球体,替代需要本地瓦片目录的 TMS 图层。
查看示例离线部署的路径设置
用 setBaseUrl 指定 Cesium 资源根目录,脱离默认的构建路径。
查看示例经纬网
用折线逐条绘制纬线与经线,理解经纬网在球面上的几何特征。
查看示例局部椭球
用内半径与角度范围切出球壳、半球与扇形开口,观察三个参数的配合。
查看示例爆散粒子
两处爆点每五秒各抛出一组火星,初速在 45 到 150 米每秒之间, 重力让它们划出弧线落地。
查看示例火焰粒子
平台上三个火点,粒子从球状发射器里向上喷出,越往上越亮越细。 发射率滑杆可从 40 调到 800,观察密度变化。
查看示例烟花粒子
用球形发射器与爆发模式做烟花,点击位置决定绽放点。
查看示例跟随运动的粒子拖尾
一个点沿椭圆轨道飞行,身后留下一条淡蓝色光尾。 粒子生命 2.2 秒,轨迹长度由速度和生命期共同决定。
查看示例粒子雨雪
两套粒子系统:雨是快速下落的细长条,雪是缓慢飘落的小圆点。 发射盒跟着相机走,所以无论拖到哪里,画面里都下雨。
查看示例逐对象轮廓后处理
用 SilhouetteStage 的 selected 属性,只给鼠标下的对象描边。
查看示例金属度与粗糙度
只改两个 PBR 参数,观察表面反光从塑料到金属的变化。
查看示例点选实体并高亮
画面上四个方块,点中一个就换成亮黄描边并读出经纬度。 点空白处取消选中,面板会说明当前状态。
查看示例平面实体
用 Plane 与 dimensions 创建两片立起来的平面,理解平面实体的朝向。
查看示例在地球上标注一个点
五个城市点加一条虚线,演示 Entity 的 point、label 和 polyline 三种图元。
查看示例多边形与拉伸体
用同一组边界点生成贴地面与拉伸体,理解 extrudedHeight 的作用。
查看示例多边形挖洞遮罩
一块深色遮罩盖住整片区域,中间挖了两个圆洞, 洞里的小柱子清晰可见。滑杆控制洞的半径,按钮可以整块去掉。
查看示例折线与宽度
对比像素宽度与米宽度两种折线,理解它们随距离变化的差别。
查看示例虚线折线
用 PolylineDashMaterialProperty 控制虚线节奏,并用颜色区分不同路径。
查看示例瓦片表面画线
先把路径上的点采到瓦片表面,再连成折线,得到真正贴附的线。
查看示例折线体生成管道
圆形截面沿一条抬升的弯道扫出圆管,方截面沿另一条直线扫出方管, 滑杆改截面半径,管径立刻变化。
查看示例
泛光让亮点发光
四个高亮球体加四个大像素点,打开泛光后周围出现光晕。 滑杆控制阈值和亮度,按钮切到只显示光晕的模式。
查看示例自定义后处理调色
一段二十行的片元着色器,把整帧画面在三种色调之间混合。 强度滑杆从 0 到 1,能看到调色从无到完全覆盖的过程。
查看示例程序化地形
用自定义高度场生成连绵山脊,理解 Cesium 地形提供者的接入点。
查看示例三维、二维与哥伦布视图
切换 SceneMode,观察同一份数据在三种投影模式下的表现。
查看示例
扫描雷达
以雷达站为圆心,一个 50 度的扇形绕圈扫过,量程圈分三档, 圈内三个目标点用暖色标出。扫描可以暂停在任意角度。
查看示例矩形面
用 Rectangle 定义矩形范围,配合旋转与材质做出三块叠加的色块。
查看示例按需渲染省电
一片不动的楼群,开启按需渲染后,鼠标停下来画面就不再重绘, 面板上的帧数也随之停住。关闭后帧数持续上涨。
查看示例渲染分辨率缩放
用 resolutionScale 调整渲染缓冲的分辨率,在画质与帧率之间取舍。
查看示例可旋转的二维地图
在二维模式下旋转相机,让平面地图整体转起来。
查看示例从瓦片采样高度
用 sampleHeight 在瓦片集表面取高度,把标记贴到任意曲面。
查看示例请求式渲染与帧率
开启 requestRenderMode,让静止场景停止重绘,并用帧率面板确认效果。
查看示例Sentinel-2 波段合成
用三个波段的灰度数据合成假彩色影像,理解波段与通道的对应关系。
查看示例日照投影
打开阴影渲染,让建筑在低太阳角下投出长影,并随时间移动。
查看示例批量显示与隐藏
把实体挂到父实体下,用父级的 show 一次性控制整组显隐。
查看示例模型卷帘对比
用 splitDirection 把两个瓦片集分到分界线两侧,做三维卷帘对比。
查看示例点击爆出的星芒
用后处理在点击位置绘制放射状星芒,并用进度值控制扩散与淡出。
查看示例把实体贴到起伏地形
高程由余弦函数算出,32 × 32 的高度图拼成一座山。 椭圆面、翻山的线、三个标记点都设了贴地,位置随地形起伏。
查看示例地形裁剪平面
给瓦片集挂裁剪平面集合,做剖面剖切并高亮切口边缘。
查看示例程序生成地形与夸张
没有地形服务也能有起伏:高度图由一个正弦函数在内存里算出来, 滑杆把真实高度放大到十二倍,山脊的立体感立刻出来。
查看示例按时间区间显隐实体
三个站点分别在第 0 至 40 分钟、30 至 70 分钟、60 至 90 分钟可用。 时钟以 60 倍速推进,面板…
查看示例儒略日与日期换算
输入框改一个时刻,面板同时给出 ISO 字符串、dayNumber、当天秒数、 加一小时后的时间以及与基准时刻的差值…
查看示例时间动态点云
用时钟驱动一批点的高度与颜色,模拟随时间变化的点云数据。
查看示例随时间转动的车轮
用节点变换属性驱动车轮旋转,让模型的轮子随行驶速度同步转动。
查看示例地下颜色
设置球体的地下颜色,让看穿地表的部分有明确的视觉标识。
查看示例视频贴到球面
用 canvas 生成视频流,把 video 元素直接交给实体材质贴到球体表面。
查看示例视角书签
四个预置视角,加上「保存当前视角」按钮随手记下的新视角。 面板顶部实时显示经纬度、视距和俯仰角。
查看示例体素拾取
给每个体素实例带 id,点击时按实例增删,实现体素级编辑。
查看示例体素方块
用批量几何实例拼出体素网格,颜色由三维场决定。
查看示例沿山脊拉起墙体
十四个顶点排成一条起伏的线,每个顶点给出不同的顶高, 于是墙体上沿形成山脊一样的轮廓。
查看示例纪念性建筑群
用中轴对称的体块布局与中央水景,搭出规划感很强的纪念性街区。
查看示例WMS 影像接入
配置 WebMapServiceImageryProvider 的图层、参数与坐标系,接入 WMS 服务。
查看示例带时间的 WMTS 图层
把时间参数交给 WMTS,让影像随时钟推进变化;示例用两帧离线影像模拟。
查看示例几何绘制顺序
用 entity.zIndex 控制重叠地面图元的压盖顺序,避免随机闪烁。
查看示例