Cesium快速入门8:相机的方向与位置

同学们好!上节我们把坐标系"翻译官"学会后,今天专攻"摄影师"------相机。

记住一句话:地球没动,是我们在移动摄像机。想让镜头去哪儿、怎么看,全靠下面几个参数。


一、为啥要手动控制相机?

  • 双击地球 → 默认飞,但不一定飞到你想看的地方。

  • 做项目 → 常常要求"一键直达天安门""斜 45° 俯瞰工地"。

  • 做漫游 → 后续还要让相机平滑飞行,今天先学"瞬间到达"。


二、三条核心命令,先混个脸熟

命令 作用 特点
viewer.camera.setView() 瞬间移动 无动画,参数给齐立刻到位
destination 镜头中心点 Cartesian3 或 Rectangle 均可
orientation 镜头姿势 heading / pitch / roll,单位全是弧度

三、先瞬移------"destination"怎么写

复制代码
// 目的地:天安门上空 2000 米
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.3914, 39.904, 2000),
});

一行代码,场景立刻"闪现"到北京。


四、再摆 Pose------"orientation"三兄弟

把相机想象成一架飞机:

  • heading = 偏航角:机头左右转,绕 Z 轴(地心→北极那根轴)。

  • pitch = 俯仰角:机头上下动,绕 X 轴(当地东向)。

  • roll = 翻滚角:机身左右歪,绕 Y 轴(当地北向)。

图示记忆:

(右手坐标系,Cesium 官方同标准)


五、完整示例:站天安门正上方,低头 90° 俯瞰

复制代码
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.3914, 39.904, 2000),
  orientation: {
    heading: Cesium.Math.toRadians(0),   // 机头朝正北
    pitch: Cesium.Math.toRadians(-90),   // 垂直向下看
    roll: 0,                              // 机身不歪
  },
});

运行后,你就得到一张"正射"俯视图。

把heading中的角度改成90试试

复制代码
 orientation: {
      heading: Cesium.Math.toRadians(90), // 朝向 y轴正方向,左右的转动
      pitch: Cesium.Math.toRadians(-90), // 俯仰角 底部看天空  顶部看地面 x轴转动
      roll: 0, // 翻滚角 z轴转动
    },

视角转弯了


六、参数游乐场------随手改,立刻看

  1. 想斜看?把 pitch 改成 --30°

    pitch: Cesium.Math.toRadians(-30)

镜头变成"航拍 30° 斜视"。

  1. 想环视?把 heading 从 0→45→90→180 依次输入,

    就像站在原地慢慢转头。

  2. 想拍"荷兰角"?给 roll 来 30°

    复制代码
    orientation: {
       heading: Cesium.Math.toRadians(0), // 朝向 y轴正方向,左右的转动
       pitch: Cesium.Math.toRadians(0), // 俯仰角 底部看天空  顶部看地面 x轴转动
       roll: Cesium.Math.toRadians(30), // 翻滚角 z轴转动
     },

整个画面瞬间"歪头杀"。


七、常见坑,提前提醒

  • 三个角单位必须是"弧度",忘写 toRadians 会转到你怀疑人生。

  • heading 0° = 正北方向,正值向东转,负值向西转。

  • pitch 0° = 水平正视,负值向下(俯瞰),正值向上(仰望)。

  • roll 一般保持 0,除非特殊艺术效果或无人机姿态模拟。


八、小结口诀

"destination 定站位,orientation 定姿势;

heading 左右看,pitch 上下看,roll 歪头看。"


下节预告

今天只是"闪现",下节课让相机"坐飞机"------

平滑飞抵目标、环绕飞行、锁定物体跟拍,统统安排。

先把 setView 玩熟,我们下节课见!

相关推荐
ToTacview2 天前
WebGL 没有几何着色器,那 Cesium 的粗线是怎么画出来的?
cesium
前端老爷更车2 天前
从 `renderer.render()` 到地面上的阴影:Three.js 阴影渲染全流程源码解析
webgl
用户61595868000224 天前
Cesium 入门系列(四):区域高亮显示的两种实现方案
cesium
用户61595868000224 天前
Cesium 入门(三):BaseLayerPicker 底图切换与国产地图接入
cesium
用户61595868000224 天前
Cesium 入门(二):Geocoder 搜索框参数详解与天地图搜索接入
cesium
Highcharts.js4 天前
Highcharts 渲染方式解析:SVG 默认渲染与 Boost 模块的 WebGL 加速,以及它与其他可视化库的不同
svg·webgl·可视化·canvas·highcharts·渲染方式
灵境(虚幻知音)5 天前
Cesium动态轨迹性能瓶颈深度拆解:翼带与尾迹的底层优化实践
性能优化·cesium·3d引擎·afsim·翼带·尾迹·自定义着色器
UWA7 天前
GPM 2.0 WebGL 监测能力扩容|覆盖 Unity/Cocos/LayaAir 多引擎微信 & 抖音小游戏
unity·微信·性能优化·小游戏·webgl
fxshy7 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
像我这样帅的人丶你还7 天前
🚀苹果的液态玻璃咋做?🚀
前端·webgl·three.js