简介面向GIS与三维可视化开发者的Cesium无人机航拍视频投影跟随工程实现了航拍视频实时投影到三维地球并跟随无人机模型移动旋转支持设置投影角度、俯仰角等参数。工程通过定时器更新经纬度模拟无人机飞行便于快速验证投影效果。压缩包共375个文件大小6.26MB其中包含141个png图片、107个js脚本、29个json配置、27个css样式等涵盖Cesium核心库、示例页面与模型资源。已有932人学习下载。下载后需手动替换视频地址、Cesium token与无人机模型适合需要基于Cesium做视频投影、态势展示或无人机模拟的开发者参考与二次开发。 直接说结论Cesium里做无人机航拍视频的“投影跟随”本质上是干两件事——把视频帧当成纹理贴到三维地球表面再把相机视角锁到无人机的实时位置上。这两件事单拆开都不难难的是合在一起还能保持稳定、不闪烁、不飘。我前阵子刚把这套流程完整跑通从拉流、纹理绑定、姿态同步到相机跟随都踩了一遍这里把实现思路和关键代码整理出来给准备入坑的朋友一个参考。这套方案适用的场景很广无人机实时巡查、农业植保飞行监控、赛事活动航拍直播、电力巡检可视化管理……只要是需要把“空中视角”和“地面三维空间”对应起来的项目基本都能套用这套思路。全文会先讲清楚原理再给出可用代码和数据参数最后是常见问题照着做基本能落地。1. 项目整体设计与核心思路拆解1.1 视频投影跟随到底在解决什么问题先说人话。无人机在天上飞摄像头往下拍你在指挥大厅的大屏上看实时画面。传统做法是开一个视频窗口旁边放一个二维地图上面飘一个小飞机图标。但这样有个硬伤视频画面里的一草一木和地图上的位置对不上观感是割裂的。视频投影跟随要做的是把视频画面“贴”到真实的三维地形上无人机飞到哪视频画面就跟到哪像一扇始终对准地面的窗户。指挥员不需要脑补直接看三维场景就知道视频里这栋楼在地图上是哪一栋那个冒烟的位置具体在什么坐标。用在地震救援、火情侦察这类场景里信息传达效率完全是两个级别。这个问题之所以难不是Cesium画不了矩形而是涉及三个层面的叠加视频流怎么变成实时纹理、投影区域怎么跟随无人机的经纬度和姿态动态变化、相机怎么平滑跟随不眩晕。三个问题任何一个处理不好最终效果都会很廉价。1.2 为什么选择Cesium而不是其他方案市面上能做三维地球的引擎不少但Cesium有两个天然优势非常适合这个需求。第一Cesium对地理坐标系的支持是原生级别的。无人机给的是Gauss-Krüger或者经纬度坐标Cesium直接就能在场景里定位不需要自己做矩阵换算。第二Cesium的Material机制允许你传入一个HTMLVideoElement作为纹理来源这意味着视频流的接入成本极低不用自己去操作WebGL纹理单元。我当时也考虑过Three.js方案但Three.js本身不是GIS引擎要把经纬度、地形高程、影像瓦片、视锥剔除这些都自己搭一遍工作量会多出数倍。最合理的架构是Cesium负责地理场景必要时再引入Three.js做模型渲染两者通过共享WebGL上下文协作。网上搜“cesium three.js 共享 gl 上下文”能找到不少案例后面扩展部分我再细说。1.3 两条主流实现路线及选型取舍实现视频投影我实测下来有两条路线。路线一叫“地面贴图法”思路最简单用RectangleGeometry或者PolygonGeometry画一个矩形或多边形然后给这个几何体赋予视频纹理材质。无人机的经纬度和姿态变了就更新几何体的坐标和旋转。优点是开发速度快半小时能跑通demo缺点是涉及地形起伏时画面是“飘”在空中的一个平面多边形不会贴合山坡和楼房看起来像悬浮的投影幕布。路线二叫“投影纹理映射法”原理更接近真实投影仪把无人机相机看作一个投影光源将视频帧按照相机的内外参数投影到三维场景的任意物体表面。地形有起伏画面就跟着起伏楼房会被视频“蒙”上画面。缺点是实现难度大要写自定义GLSL着色器改Cesium的渲染管线。如果项目是平原地区的巡查路线一完全够用如果是山区、城市这类地形起伏明显的场景硬着头皮也要上路线二。下面我主要讲路线一因为它是绝大多数需求的起点而且路线二的核心思想会在第2章穿插说明。2. 核心细节解析与实操要点2.1 视频纹理VideoTexture背后的机制先说Cesium怎么处理视频纹理这一点很多教程都没讲透。Cesium的Material.fromType(Image, { image: videoElement })接收一个HTMLVideoElement内部会创建VideoTexture。VideoTexture和普通图片纹理最大的区别是视频每一帧都在变所以不能被静态UV采样缓存复用必须在每一帧渲染时重新上传纹理数据。Cesium对VideoTexture做了一层封装它会在Cesium自身的render循环中检测视频是否出现了新帧通过requestVideoFrameCallback或者手动判断currentTime有新帧才执行纹理上传。这带来一个重要的实战经验视频的分辨率直接决定GPU压力。如果你接的无人机推流是4K甚至8KCesium会在每一帧新的视频帧到达时把整张图像传到GPU显存里路面实时刷新帧率会断崖式下跌。我实测过Cesium里视频纹理按原始分辨率上传1080p在普通工作站上还能扛4K就会开始卡。我建议在上游把视频流先转成分辨率为1280x720或者更低的流再接入Cesium肉眼在三维场景里根本看不出差别但帧率稳定性会好很多。2.2 投影区域尺寸的工程计算方法视频纹理不是随便贴个矩形就行矩形的长宽比例必须和无人机的视场角FOV匹配否则画面看起来像被拉伸过。这里需要做一个简单的三角计算。无人机飞行高度为H云台相机垂直视场角为FOV_V水平视场角为FOV_H那么在地面假设是平地的投影宽度W和高度D分别为W 2 * H * tan(FOV_H / 2) D 2 * H * tan(FOV_V / 2)举个例子飞行高度120米相机水平视场角60度垂直视场角40度。那么tan(30°)0.577tan(20°)0.364算出来W 2 * 120 * 0.577 ≈ 138米D 2 * 120 * 0.364 ≈ 87米。这个时候你画的RectangleGeometry的长宽比例就应该接近138:87约1.59:1。注意如果云台有俯仰角而不是完全正射朝下投影会变成梯形而不是矩形这时候用PolygonGeometry把四个角点的经纬度分别算出来投影会更加真实。计算方法是先算中心点在地面的投影点再根据俯仰角把近端和远端的尺寸差算出来。2.3 相机跟随的“快”与“稳”相机跟随是整个需求里最影响观感的部分。很多初次做的人以为相机跟随就是每帧把viewer.camera的位置和朝向直接设成无人机的位置和朝向实测下来画面会剧烈抖动看两分钟就晕了。这里有两个坑。第一个坑是遥测数据频率和渲染帧率不一致。无人机的遥测数据一般是5到10Hz上报一次而浏览器渲染是60Hz直接把低频率的离散位置赋给相机相机动起来就是一卡一卡的感觉。解决办法是插值用Cesium的Clock或自定义的tween逻辑在两帧遥测之间做线性插值。我用的方案是维护一个无人机历史轨迹数组相机位置取当前渲染时刻对应的插值点。第二个坑是相机朝向变化。无人机转弯时偏航角heading会快速变化如果相机跟着瞬时转角走画面旋转剧烈且眩晕。务实做法是给heading、pitch、roll都做低通滤波或者用Cesium的Camera.flyTo配合orientation让它以平滑曲线飞过去追上了就保持锁定。3. 实操过程与核心环节实现3.1 初始化Cesium场景与地形加载项目第一步是创建Viewer。有几个关键配置在视频投影场景里必须打开。首先关闭大气雾和默认的太阳光晕否则视频画面上会蒙一层蓝色雾气影响真实感。其次打开地形深度检测确保视频纹理能正确跟随地形表面。如果你只有平面无地形数据视频投影会像贴在玻璃板上一样假。const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: await Cesium.createWorldTerrainAsync(), scene3DOnly: true, shadows: true, msaa: 4, orderIndependentTransparency: true, baseLayer: Cesium.ImageryLayer.fromProviderAsync( Cesium.ArcGisMapServerImageryProvider.fromUrl( https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer ) ) }); viewer.scene.globe.depthTestAgainstTerrain true;地形这一块我说句实话联调时用Cesium官方在线地形最省事但到了内网环境或者需要高精度地形的时候就得切本地离线地形。热词里有人问“哪里有切好的离线地形文件1.terrain格式”官方工具Cesium ion可以导出标准terrain格式的瓦片也可以用Cesium Terrain Builder自己拿DEM切。本地部署时把terrainProvider换成CesiumTerrainProvider指向自己的静态服务就行。3.2 视频流接入与纹理绑定这是核心中的核心。无人机视频流一般有三种来源RTMP、RTSP、HLS。浏览器不能直接解RTSP所以常见的生产环境做法是后端用ffmpeg把RTSP转成WebRTC或HLS再喂给前端。这里强调一个坑视频流地址必须允许跨域且video元素需要设置crossOrigin anonymous。否则Cesium在创建VideoTexture的时候会因为跨域问题直接抛错或者纹理变黑。调试时打开浏览器的Network面板看看视频请求有没有CORS相关的红色报错这是最快定位方法。纹理绑定代码const videoElement document.createElement(video); videoElement.crossOrigin anonymous; videoElement.autoplay true; videoElement.muted true; // 浏览器自动播放策略要求 videoElement.src https://your-server/live/stream.m3u8; videoElement.play(); const videoMaterial new Cesium.Material({ fabric: { type: Image, uniforms: { image: videoElement, repeat: new Cesium.Cartesian2(1, 1) } } });我用的是HLS流所以引了hls.js去拉流把videoElement的src赋值给hls,再手动启动播放。如果你直接用video.src指向m3u8在某些浏览器上可能会失败所以这一步建议写成这样import Hls from hls.js; if (Hls.isSupported() videoElement.canPlayType(application/vnd.apple.mpegurl)) { const hls new Hls({ enableWorker: true, lowLatencyMode: true }); hls.loadSource(https://your-server/live/stream.m3u8); hls.attachMedia(videoElement); hls.on(Hls.Events.MANIFEST_PARSED, () videoElement.play()); }3.3 无人机位置姿态驱动与投影更新这一步是功能主体。我定义了一个updateProjection函数每次收到无人机遥测数据就调用它。遥测数据至少需要经纬度、高度、航向角heading、俯仰角pitch、翻滚角roll。先根据高度和视场角计算四个角点再构造PolygonGeometry最后把geometry实例赋予Primitive。每次数据更新时销毁旧的Primitive创建新的Primitive。这里我用了GroundPrimitive让几何体自动贴地。function updateProjection(telemetry) { const { lon, lat, height, heading, pitch, roll, fovH, fovV } telemetry; const center Cesium.Cartesian3.fromDegrees(lon, lat, height); const ground Cesium.Cartesian3.fromDegrees(lon, lat, 0); // 计算投影矩形的半宽半高 const width 2 * height * Math.tan(Cesium.Math.toRadians(fovH / 2)); const depth 2 * height * Math.tan(Cesium.Math.toRadians(fovV / 2)); // 构建四个角点简化为正射投影未加pitch/roll修正 const hPos Cesium.Math.toRadians(heading); const offsetAxisX new Cesium.Cartesian3(Math.sin(hPos), Math.cos(hPos), 0); const offsetAxisY new Cesium.Cartesian3(-Math.cos(hPos), Math.sin(hPos), 0); const p1 Cesium.Cartesian3.add(ground, Cesium.Cartesian3.multiplyByScalar(offsetAxisX, width / 2, new Cesium.Cartesian3()), new Cesium.Cartesian3()); const p2 Cesium.Cartesian3.add(ground, Cesium.Cartesian3.multiplyByScalar(offsetAxisX, -width / 2, new Cesium.Cartesian3()), new Cesium.Cartesian3()); // ... 同理算出p3、p4 if (projectionPrimitive) { viewer.scene.primitives.remove(projectionPrimitive); } projectionPrimitive new Cesium.GroundPrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([ lon, lat, 0, // ... 四个角的经纬度数组 ])), vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT }) }), appearance: new Cesium.MaterialAppearance({ material: videoMaterial }) }); viewer.scene.primitives.add(projectionPrimitive); }这个写法是正射投影才用的简化版本没有处理pitch和roll。要处理云台俯仰可以把四个角点用旋转矩阵绕X轴旋转pitch角再绕Z轴旋转heading角最后加上中心点坐标。Cesium的Matrix3.fromRotationZ和Matrix3.fromRotationX组合起来就可以这一步值得花点时间调画面倾斜效果真实感提升非常明显。3.4 相机跟随与视图同步相机跟随我分两档。第一档是“锁定跟随”即相机位置始终在无人机后方固定距离处朝向无人机中心。第二档是“自由视角”即用户可以用鼠标旋转视角但画面中心仍然保持跟随无人机。第二档对指挥员更友好因为可以边看投影边环视周边地形。核心代码以第一档为例function followDrone(telemetry) { const dronePos Cesium.Cartesian3.fromDegrees( telemetry.lon, telemetry.lat, telemetry.height ); const heading Cesium.Math.toRadians(telemetry.heading); const pitch Cesium.Math.toRadians(45); // 相机从后方45度俯视 const offset new Cesium.Cartesian3( Math.sin(heading) * Math.cos(pitch) * 150, Math.cos(heading) * Math.cos(pitch) * 150, Math.sin(pitch) * 150 ); const cameraPos Cesium.Cartesian3.add(dronePos, offset, new Cesium.Cartesian3()); viewer.camera.lookAt(cameraPos, dronePos); }关键点在最后一行Cesium.Camera没有直接的lookAt方法正确做法是使用viewer.camera.lookAtTransform或者自己算direction、up然后调用setView。我实际用的是lookAtTransform加一个随时间更新的Matrix4这样相机始终指向目标不会因为绕动而翻车。给一个可用的简化实现viewer.camera.lookAtTransform( Cesium.Matrix4.fromTranslation(dronePos), new Cesium.HeadingPitchRange( Cesium.Math.toRadians(telemetry.heading 180), Cesium.Math.toRadians(45), 150 ) );HeadingPitchRange三个参数分别是偏航角、俯仰角、距离。注意偏航角要加180度因为相机默认从机头后方看不加的话你会看到飞机的背面朝向自己。4. 常见问题与排查技巧实录4.1 画面闪烁与纹理撕裂视频纹理闪烁的罪魁祸首通常是深度冲突。视频投影面贴在地形表面和地形表面完全重合GPU在计算深度时不知道谁在前谁在后每一帧可能随机让一个表面通过深度测试看起来就是闪来闪去。解决手段有两个一是给视频投影面加一个PolygonOffset让它轻微偏向相机二是把投影面抬高极小距离通常是0.1到0.5米肉眼看不出来但深度冲突消失。Cesium的PolylineCollection和Primitive都支持polygonOffset在MaterialAppearance里设置这个属性需要一点技巧我选择懒人方案——抬高0.3米实测效果稳定。如果纹理本身有锯齿或撕裂检查VideoTexture的repeat设置和视频帧尺寸是否是2的幂。不是2的幂也没关系Cesium内部会reshape但如果你为了性能手动改了纹理参数就要确保格式是RGBA。4.2 视频与地形错位还有一种情况是视频画面明显偏移无人机在A点上方画面却投影在A点东南方向好几百米。这个基本可以确定是坐标基准不一致。最常见的原因是无人机使用RTK定位输出的是CGCS2000坐标而Cesium默认是WGS84。两者的椭球参数有细微差异在几百公里的范围内影响可以忽略不计但在几十米高度做精确投影时几百米的偏移就可能出现。解决办法是在后端把CGCS2000坐标统一转成WGS84经纬度再下发前端前端不做二次转换。另一个原因是高程基准不一致。无人机的高度通常是海拔高椭球高或正高Cesium的地形高度也是椭球高。如果数据源一个是85国家高程基准一个是WGS84椭球高差异可能有几十米到上百米投影出来的画面就会“陷”到地里或者“飘”在天上。做这类项目一定要确认高度字段的基准最好统一用WGS84椭球高省去一堆麻烦。4.3 性能与内存问题长时间挂着视频投影内存和显存会缓慢上升最后浏览器崩掉。我遇到过三个原因。第一个是Primitive频繁创建销毁。每帧遥测都remove旧的add新的导致GPU资源泄漏。优化思路是复用Primitive只更新Geometry的坐标而不是整个销毁重建。Cesium的GeometryInstance允许你update但GroundPrimitive的更新比较麻烦我改成了每更新10帧才重建一次画面会有一点延迟但内存稳定很多。第二个是视频纹理没有释放。当视频流断开或者切换推流地址时旧的videoElement没有被销毁纹理资源还挂在GPU上。务必在切换前调用viewer.scene.primitives.remove(projectionPrimitive)并把videoElement的src置空再调用load()清空缓冲区。第三个是Cesium的requestRenderMode。如果你启用了按需渲染requestRenderMode为true视频画面可能不更新因为Cesium只会在场景变化时渲染不会感知视频纹理的新帧。要用视频纹理务必关掉requestRenderMode或者手动在视频帧更新时调用viewer.scene.requestRender()。4.4 与Three.js协作时的注意事项热词里出现“cesium three.js 共享gl上下文”这个组合在处理无人机三维模型比如带旋翼的飞机模型时非常有用。Cesium本身也能加载glTF模型但对于复杂的动态模型实时骨骼动画、粒子尾迹Three.js的开发效率更高。共享上下文的核心思路是Cesium在初始化时提供webgl上下文Three.js复用同一个canvas和gl上下文实现三渲染。但坑在于两者都会清屏、都会设置depth test状态你需要在每一帧渲染前手动保存和恢复Cesium的GL状态。网上有现成的CesiumThree.js库封装了这套逻辑直接拿来做二次开发比自己从零写稳妥。还有一点Three.js场景需要随着Cesium相机移动而同步更新。你需要在Cesium的preRender事件中读取Cesium相机的MVPMatrix转换成Three.js的camera矩阵再触发Three.js的render。否则模型位置和Cesium场景对不上。5. 延伸玩法与进阶建议5.1 叠加动态光照、雷达扫描与多视图对比视频投影跑通之后往上叠加其他Cesium能力非常顺手。比如用Cesium的动态光照机制模拟无人机探照灯效果让视频投影面的亮度随着太阳高度变化用Entity的Polyline或雷达扫描材质在投影区域周围画一个扫描圈用多个Viewer并排做多视图对比左边是视频投影视角右边是全局视角。这些功能单独实现都不难但组合在一起会产生真正的“指挥中心感”。我甚至在测试里叠加了离线瓦片和高斯泼溅模型把实拍视频和三维重建模型放在同一场景同一区域对比对应急指挥研判的帮助非常大。5.2 结合仿真录屏与离线地图如果你的项目需要做飞行回放或者汇报演示Cesium的仿真录屏功能值得研究。Cesium官方提供了一个录屏工具可以把场景导出成WebM视频。把视频投影和仿真录屏结合就能生成一段带真实视频纹理的三维飞行回放说句实话这种汇报材料的说服力远超PPT。离线地图方面正式环境建议用Cesium的离线瓦片方案用工具把在线影像瓦片预切到本地再用UrlTemplateImageryProvider加载。视频投影本身不依赖在线服务但地形和影像底图如果是外网项目在内网跑不起来。务必备一份离线地形加离线影像的预案。5.3 模型姿态同步与特效库调研无人机三维模型如果要做模型节点级别的姿态同步建议优先考虑Cesium的Model节点操作API。加载glTF模型后可以通过model.getNodeByName获取指定节点然后设置四元数旋转。特效库这一块网上搜索会找到一些第三方Cesium特效库比如火焰、雨水、爆炸等粒子效果采购前先确认它们是不是原生Cesium插件还是基于Three.js封装两者与视频投影的融合难度完全不同。我的经验是先跑通核心功能再考虑特效否则容易陷在花哨效果上忽略了主链路。写在最后的个人体会视频投影跟随这个需求技术上没有多高深但特别考验工程细节。坐标基准、纹理格式、渲染模式、深度冲突任何一环疏忽都会变成线上事故。做这类项目我强烈建议先写一个最小demo跑通端到端链路视频拉流-纹理绑定-位置更新再逐步加地形、相机跟随和三维模型。先保证链路通再追求效果精这个顺序不要反了。最后再分享一个小技巧调试时给投影面加一个线框轮廓用Cesium的Polyline画矩形边界。视频纹理是否对齐、位置是否漂移一眼就能看出来。等实际运行时再把这个轮廓隐藏视觉上会干净很多。这个小习惯帮我排查了不少坐标偏移的问题。本文还有配套的精品资源点击获取 
长河君 · 2026/9/1 18:59:37 · 阅读 1.2k Cesium无人机视频投影跟随：原理、实现与代码实战
简介面向GIS与三维可视化开发者的Cesium无人机航拍视频投影跟随工程实现了航拍视频实时投影到三维地球并跟随无人机模型移动旋转支持设置投影角度、俯仰角等参数。工程通过定时器更新经纬度模拟无人机飞行便于快速验证投影效果。压缩包共375个文件大小6.26MB其中包含141个png图片、107个js脚本、29个json配置、27个css样式等涵盖Cesium核心库、示例页面与模型资源。已有932人学习下载。下载后需手动替换视频地址、Cesium token与无人机模型适合需要基于Cesium做视频投影、态势展示或无人机模拟的开发者参考与二次开发。 直接说结论Cesium里做无人机航拍视频的“投影跟随”本质上是干两件事——把视频帧当成纹理贴到三维地球表面再把相机视角锁到无人机的实时位置上。这两件事单拆开都不难难的是合在一起还能保持稳定、不闪烁、不飘。我前阵子刚把这套流程完整跑通从拉流、纹理绑定、姿态同步到相机跟随都踩了一遍这里把实现思路和关键代码整理出来给准备入坑的朋友一个参考。这套方案适用的场景很广无人机实时巡查、农业植保飞行监控、赛事活动航拍直播、电力巡检可视化管理……只要是需要把“空中视角”和“地面三维空间”对应起来的项目基本都能套用这套思路。全文会先讲清楚原理再给出可用代码和数据参数最后是常见问题照着做基本能落地。1. 项目整体设计与核心思路拆解1.1 视频投影跟随到底在解决什么问题先说人话。无人机在天上飞摄像头往下拍你在指挥大厅的大屏上看实时画面。传统做法是开一个视频窗口旁边放一个二维地图上面飘一个小飞机图标。但这样有个硬伤视频画面里的一草一木和地图上的位置对不上观感是割裂的。视频投影跟随要做的是把视频画面“贴”到真实的三维地形上无人机飞到哪视频画面就跟到哪像一扇始终对准地面的窗户。指挥员不需要脑补直接看三维场景就知道视频里这栋楼在地图上是哪一栋那个冒烟的位置具体在什么坐标。用在地震救援、火情侦察这类场景里信息传达效率完全是两个级别。这个问题之所以难不是Cesium画不了矩形而是涉及三个层面的叠加视频流怎么变成实时纹理、投影区域怎么跟随无人机的经纬度和姿态动态变化、相机怎么平滑跟随不眩晕。三个问题任何一个处理不好最终效果都会很廉价。1.2 为什么选择Cesium而不是其他方案市面上能做三维地球的引擎不少但Cesium有两个天然优势非常适合这个需求。第一Cesium对地理坐标系的支持是原生级别的。无人机给的是Gauss-Krüger或者经纬度坐标Cesium直接就能在场景里定位不需要自己做矩阵换算。第二Cesium的Material机制允许你传入一个HTMLVideoElement作为纹理来源这意味着视频流的接入成本极低不用自己去操作WebGL纹理单元。我当时也考虑过Three.js方案但Three.js本身不是GIS引擎要把经纬度、地形高程、影像瓦片、视锥剔除这些都自己搭一遍工作量会多出数倍。最合理的架构是Cesium负责地理场景必要时再引入Three.js做模型渲染两者通过共享WebGL上下文协作。网上搜“cesium three.js 共享 gl 上下文”能找到不少案例后面扩展部分我再细说。1.3 两条主流实现路线及选型取舍实现视频投影我实测下来有两条路线。路线一叫“地面贴图法”思路最简单用RectangleGeometry或者PolygonGeometry画一个矩形或多边形然后给这个几何体赋予视频纹理材质。无人机的经纬度和姿态变了就更新几何体的坐标和旋转。优点是开发速度快半小时能跑通demo缺点是涉及地形起伏时画面是“飘”在空中的一个平面多边形不会贴合山坡和楼房看起来像悬浮的投影幕布。路线二叫“投影纹理映射法”原理更接近真实投影仪把无人机相机看作一个投影光源将视频帧按照相机的内外参数投影到三维场景的任意物体表面。地形有起伏画面就跟着起伏楼房会被视频“蒙”上画面。缺点是实现难度大要写自定义GLSL着色器改Cesium的渲染管线。如果项目是平原地区的巡查路线一完全够用如果是山区、城市这类地形起伏明显的场景硬着头皮也要上路线二。下面我主要讲路线一因为它是绝大多数需求的起点而且路线二的核心思想会在第2章穿插说明。2. 核心细节解析与实操要点2.1 视频纹理VideoTexture背后的机制先说Cesium怎么处理视频纹理这一点很多教程都没讲透。Cesium的Material.fromType(Image, { image: videoElement })接收一个HTMLVideoElement内部会创建VideoTexture。VideoTexture和普通图片纹理最大的区别是视频每一帧都在变所以不能被静态UV采样缓存复用必须在每一帧渲染时重新上传纹理数据。Cesium对VideoTexture做了一层封装它会在Cesium自身的render循环中检测视频是否出现了新帧通过requestVideoFrameCallback或者手动判断currentTime有新帧才执行纹理上传。这带来一个重要的实战经验视频的分辨率直接决定GPU压力。如果你接的无人机推流是4K甚至8KCesium会在每一帧新的视频帧到达时把整张图像传到GPU显存里路面实时刷新帧率会断崖式下跌。我实测过Cesium里视频纹理按原始分辨率上传1080p在普通工作站上还能扛4K就会开始卡。我建议在上游把视频流先转成分辨率为1280x720或者更低的流再接入Cesium肉眼在三维场景里根本看不出差别但帧率稳定性会好很多。2.2 投影区域尺寸的工程计算方法视频纹理不是随便贴个矩形就行矩形的长宽比例必须和无人机的视场角FOV匹配否则画面看起来像被拉伸过。这里需要做一个简单的三角计算。无人机飞行高度为H云台相机垂直视场角为FOV_V水平视场角为FOV_H那么在地面假设是平地的投影宽度W和高度D分别为W 2 * H * tan(FOV_H / 2) D 2 * H * tan(FOV_V / 2)举个例子飞行高度120米相机水平视场角60度垂直视场角40度。那么tan(30°)0.577tan(20°)0.364算出来W 2 * 120 * 0.577 ≈ 138米D 2 * 120 * 0.364 ≈ 87米。这个时候你画的RectangleGeometry的长宽比例就应该接近138:87约1.59:1。注意如果云台有俯仰角而不是完全正射朝下投影会变成梯形而不是矩形这时候用PolygonGeometry把四个角点的经纬度分别算出来投影会更加真实。计算方法是先算中心点在地面的投影点再根据俯仰角把近端和远端的尺寸差算出来。2.3 相机跟随的“快”与“稳”相机跟随是整个需求里最影响观感的部分。很多初次做的人以为相机跟随就是每帧把viewer.camera的位置和朝向直接设成无人机的位置和朝向实测下来画面会剧烈抖动看两分钟就晕了。这里有两个坑。第一个坑是遥测数据频率和渲染帧率不一致。无人机的遥测数据一般是5到10Hz上报一次而浏览器渲染是60Hz直接把低频率的离散位置赋给相机相机动起来就是一卡一卡的感觉。解决办法是插值用Cesium的Clock或自定义的tween逻辑在两帧遥测之间做线性插值。我用的方案是维护一个无人机历史轨迹数组相机位置取当前渲染时刻对应的插值点。第二个坑是相机朝向变化。无人机转弯时偏航角heading会快速变化如果相机跟着瞬时转角走画面旋转剧烈且眩晕。务实做法是给heading、pitch、roll都做低通滤波或者用Cesium的Camera.flyTo配合orientation让它以平滑曲线飞过去追上了就保持锁定。3. 实操过程与核心环节实现3.1 初始化Cesium场景与地形加载项目第一步是创建Viewer。有几个关键配置在视频投影场景里必须打开。首先关闭大气雾和默认的太阳光晕否则视频画面上会蒙一层蓝色雾气影响真实感。其次打开地形深度检测确保视频纹理能正确跟随地形表面。如果你只有平面无地形数据视频投影会像贴在玻璃板上一样假。const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: await Cesium.createWorldTerrainAsync(), scene3DOnly: true, shadows: true, msaa: 4, orderIndependentTransparency: true, baseLayer: Cesium.ImageryLayer.fromProviderAsync( Cesium.ArcGisMapServerImageryProvider.fromUrl( https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer ) ) }); viewer.scene.globe.depthTestAgainstTerrain true;地形这一块我说句实话联调时用Cesium官方在线地形最省事但到了内网环境或者需要高精度地形的时候就得切本地离线地形。热词里有人问“哪里有切好的离线地形文件1.terrain格式”官方工具Cesium ion可以导出标准terrain格式的瓦片也可以用Cesium Terrain Builder自己拿DEM切。本地部署时把terrainProvider换成CesiumTerrainProvider指向自己的静态服务就行。3.2 视频流接入与纹理绑定这是核心中的核心。无人机视频流一般有三种来源RTMP、RTSP、HLS。浏览器不能直接解RTSP所以常见的生产环境做法是后端用ffmpeg把RTSP转成WebRTC或HLS再喂给前端。这里强调一个坑视频流地址必须允许跨域且video元素需要设置crossOrigin anonymous。否则Cesium在创建VideoTexture的时候会因为跨域问题直接抛错或者纹理变黑。调试时打开浏览器的Network面板看看视频请求有没有CORS相关的红色报错这是最快定位方法。纹理绑定代码const videoElement document.createElement(video); videoElement.crossOrigin anonymous; videoElement.autoplay true; videoElement.muted true; // 浏览器自动播放策略要求 videoElement.src https://your-server/live/stream.m3u8; videoElement.play(); const videoMaterial new Cesium.Material({ fabric: { type: Image, uniforms: { image: videoElement, repeat: new Cesium.Cartesian2(1, 1) } } });我用的是HLS流所以引了hls.js去拉流把videoElement的src赋值给hls,再手动启动播放。如果你直接用video.src指向m3u8在某些浏览器上可能会失败所以这一步建议写成这样import Hls from hls.js; if (Hls.isSupported() videoElement.canPlayType(application/vnd.apple.mpegurl)) { const hls new Hls({ enableWorker: true, lowLatencyMode: true }); hls.loadSource(https://your-server/live/stream.m3u8); hls.attachMedia(videoElement); hls.on(Hls.Events.MANIFEST_PARSED, () videoElement.play()); }3.3 无人机位置姿态驱动与投影更新这一步是功能主体。我定义了一个updateProjection函数每次收到无人机遥测数据就调用它。遥测数据至少需要经纬度、高度、航向角heading、俯仰角pitch、翻滚角roll。先根据高度和视场角计算四个角点再构造PolygonGeometry最后把geometry实例赋予Primitive。每次数据更新时销毁旧的Primitive创建新的Primitive。这里我用了GroundPrimitive让几何体自动贴地。function updateProjection(telemetry) { const { lon, lat, height, heading, pitch, roll, fovH, fovV } telemetry; const center Cesium.Cartesian3.fromDegrees(lon, lat, height); const ground Cesium.Cartesian3.fromDegrees(lon, lat, 0); // 计算投影矩形的半宽半高 const width 2 * height * Math.tan(Cesium.Math.toRadians(fovH / 2)); const depth 2 * height * Math.tan(Cesium.Math.toRadians(fovV / 2)); // 构建四个角点简化为正射投影未加pitch/roll修正 const hPos Cesium.Math.toRadians(heading); const offsetAxisX new Cesium.Cartesian3(Math.sin(hPos), Math.cos(hPos), 0); const offsetAxisY new Cesium.Cartesian3(-Math.cos(hPos), Math.sin(hPos), 0); const p1 Cesium.Cartesian3.add(ground, Cesium.Cartesian3.multiplyByScalar(offsetAxisX, width / 2, new Cesium.Cartesian3()), new Cesium.Cartesian3()); const p2 Cesium.Cartesian3.add(ground, Cesium.Cartesian3.multiplyByScalar(offsetAxisX, -width / 2, new Cesium.Cartesian3()), new Cesium.Cartesian3()); // ... 同理算出p3、p4 if (projectionPrimitive) { viewer.scene.primitives.remove(projectionPrimitive); } projectionPrimitive new Cesium.GroundPrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([ lon, lat, 0, // ... 四个角的经纬度数组 ])), vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT }) }), appearance: new Cesium.MaterialAppearance({ material: videoMaterial }) }); viewer.scene.primitives.add(projectionPrimitive); }这个写法是正射投影才用的简化版本没有处理pitch和roll。要处理云台俯仰可以把四个角点用旋转矩阵绕X轴旋转pitch角再绕Z轴旋转heading角最后加上中心点坐标。Cesium的Matrix3.fromRotationZ和Matrix3.fromRotationX组合起来就可以这一步值得花点时间调画面倾斜效果真实感提升非常明显。3.4 相机跟随与视图同步相机跟随我分两档。第一档是“锁定跟随”即相机位置始终在无人机后方固定距离处朝向无人机中心。第二档是“自由视角”即用户可以用鼠标旋转视角但画面中心仍然保持跟随无人机。第二档对指挥员更友好因为可以边看投影边环视周边地形。核心代码以第一档为例function followDrone(telemetry) { const dronePos Cesium.Cartesian3.fromDegrees( telemetry.lon, telemetry.lat, telemetry.height ); const heading Cesium.Math.toRadians(telemetry.heading); const pitch Cesium.Math.toRadians(45); // 相机从后方45度俯视 const offset new Cesium.Cartesian3( Math.sin(heading) * Math.cos(pitch) * 150, Math.cos(heading) * Math.cos(pitch) * 150, Math.sin(pitch) * 150 ); const cameraPos Cesium.Cartesian3.add(dronePos, offset, new Cesium.Cartesian3()); viewer.camera.lookAt(cameraPos, dronePos); }关键点在最后一行Cesium.Camera没有直接的lookAt方法正确做法是使用viewer.camera.lookAtTransform或者自己算direction、up然后调用setView。我实际用的是lookAtTransform加一个随时间更新的Matrix4这样相机始终指向目标不会因为绕动而翻车。给一个可用的简化实现viewer.camera.lookAtTransform( Cesium.Matrix4.fromTranslation(dronePos), new Cesium.HeadingPitchRange( Cesium.Math.toRadians(telemetry.heading 180), Cesium.Math.toRadians(45), 150 ) );HeadingPitchRange三个参数分别是偏航角、俯仰角、距离。注意偏航角要加180度因为相机默认从机头后方看不加的话你会看到飞机的背面朝向自己。4. 常见问题与排查技巧实录4.1 画面闪烁与纹理撕裂视频纹理闪烁的罪魁祸首通常是深度冲突。视频投影面贴在地形表面和地形表面完全重合GPU在计算深度时不知道谁在前谁在后每一帧可能随机让一个表面通过深度测试看起来就是闪来闪去。解决手段有两个一是给视频投影面加一个PolygonOffset让它轻微偏向相机二是把投影面抬高极小距离通常是0.1到0.5米肉眼看不出来但深度冲突消失。Cesium的PolylineCollection和Primitive都支持polygonOffset在MaterialAppearance里设置这个属性需要一点技巧我选择懒人方案——抬高0.3米实测效果稳定。如果纹理本身有锯齿或撕裂检查VideoTexture的repeat设置和视频帧尺寸是否是2的幂。不是2的幂也没关系Cesium内部会reshape但如果你为了性能手动改了纹理参数就要确保格式是RGBA。4.2 视频与地形错位还有一种情况是视频画面明显偏移无人机在A点上方画面却投影在A点东南方向好几百米。这个基本可以确定是坐标基准不一致。最常见的原因是无人机使用RTK定位输出的是CGCS2000坐标而Cesium默认是WGS84。两者的椭球参数有细微差异在几百公里的范围内影响可以忽略不计但在几十米高度做精确投影时几百米的偏移就可能出现。解决办法是在后端把CGCS2000坐标统一转成WGS84经纬度再下发前端前端不做二次转换。另一个原因是高程基准不一致。无人机的高度通常是海拔高椭球高或正高Cesium的地形高度也是椭球高。如果数据源一个是85国家高程基准一个是WGS84椭球高差异可能有几十米到上百米投影出来的画面就会“陷”到地里或者“飘”在天上。做这类项目一定要确认高度字段的基准最好统一用WGS84椭球高省去一堆麻烦。4.3 性能与内存问题长时间挂着视频投影内存和显存会缓慢上升最后浏览器崩掉。我遇到过三个原因。第一个是Primitive频繁创建销毁。每帧遥测都remove旧的add新的导致GPU资源泄漏。优化思路是复用Primitive只更新Geometry的坐标而不是整个销毁重建。Cesium的GeometryInstance允许你update但GroundPrimitive的更新比较麻烦我改成了每更新10帧才重建一次画面会有一点延迟但内存稳定很多。第二个是视频纹理没有释放。当视频流断开或者切换推流地址时旧的videoElement没有被销毁纹理资源还挂在GPU上。务必在切换前调用viewer.scene.primitives.remove(projectionPrimitive)并把videoElement的src置空再调用load()清空缓冲区。第三个是Cesium的requestRenderMode。如果你启用了按需渲染requestRenderMode为true视频画面可能不更新因为Cesium只会在场景变化时渲染不会感知视频纹理的新帧。要用视频纹理务必关掉requestRenderMode或者手动在视频帧更新时调用viewer.scene.requestRender()。4.4 与Three.js协作时的注意事项热词里出现“cesium three.js 共享gl上下文”这个组合在处理无人机三维模型比如带旋翼的飞机模型时非常有用。Cesium本身也能加载glTF模型但对于复杂的动态模型实时骨骼动画、粒子尾迹Three.js的开发效率更高。共享上下文的核心思路是Cesium在初始化时提供webgl上下文Three.js复用同一个canvas和gl上下文实现三渲染。但坑在于两者都会清屏、都会设置depth test状态你需要在每一帧渲染前手动保存和恢复Cesium的GL状态。网上有现成的CesiumThree.js库封装了这套逻辑直接拿来做二次开发比自己从零写稳妥。还有一点Three.js场景需要随着Cesium相机移动而同步更新。你需要在Cesium的preRender事件中读取Cesium相机的MVPMatrix转换成Three.js的camera矩阵再触发Three.js的render。否则模型位置和Cesium场景对不上。5. 延伸玩法与进阶建议5.1 叠加动态光照、雷达扫描与多视图对比视频投影跑通之后往上叠加其他Cesium能力非常顺手。比如用Cesium的动态光照机制模拟无人机探照灯效果让视频投影面的亮度随着太阳高度变化用Entity的Polyline或雷达扫描材质在投影区域周围画一个扫描圈用多个Viewer并排做多视图对比左边是视频投影视角右边是全局视角。这些功能单独实现都不难但组合在一起会产生真正的“指挥中心感”。我甚至在测试里叠加了离线瓦片和高斯泼溅模型把实拍视频和三维重建模型放在同一场景同一区域对比对应急指挥研判的帮助非常大。5.2 结合仿真录屏与离线地图如果你的项目需要做飞行回放或者汇报演示Cesium的仿真录屏功能值得研究。Cesium官方提供了一个录屏工具可以把场景导出成WebM视频。把视频投影和仿真录屏结合就能生成一段带真实视频纹理的三维飞行回放说句实话这种汇报材料的说服力远超PPT。离线地图方面正式环境建议用Cesium的离线瓦片方案用工具把在线影像瓦片预切到本地再用UrlTemplateImageryProvider加载。视频投影本身不依赖在线服务但地形和影像底图如果是外网项目在内网跑不起来。务必备一份离线地形加离线影像的预案。5.3 模型姿态同步与特效库调研无人机三维模型如果要做模型节点级别的姿态同步建议优先考虑Cesium的Model节点操作API。加载glTF模型后可以通过model.getNodeByName获取指定节点然后设置四元数旋转。特效库这一块网上搜索会找到一些第三方Cesium特效库比如火焰、雨水、爆炸等粒子效果采购前先确认它们是不是原生Cesium插件还是基于Three.js封装两者与视频投影的融合难度完全不同。我的经验是先跑通核心功能再考虑特效否则容易陷在花哨效果上忽略了主链路。写在最后的个人体会视频投影跟随这个需求技术上没有多高深但特别考验工程细节。坐标基准、纹理格式、渲染模式、深度冲突任何一环疏忽都会变成线上事故。做这类项目我强烈建议先写一个最小demo跑通端到端链路视频拉流-纹理绑定-位置更新再逐步加地形、相机跟随和三维模型。先保证链路通再追求效果精这个顺序不要反了。最后再分享一个小技巧调试时给投影面加一个线框轮廓用Cesium的Polyline画矩形边界。视频纹理是否对齐、位置是否漂移一眼就能看出来。等实际运行时再把这个轮廓隐藏视觉上会干净很多。这个小习惯帮我排查了不少坐标偏移的问题。本文还有配套的精品资源点击获取