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 玩熟,我们下节课见!

相关推荐
ct9782 天前
WebGL动画实现方式与定时器缺陷
webgl
ct9782 天前
WebGL三维可视化:正射投影与透视投影深度解析
webgl
地狱为王3 天前
Cesium for Unity叠加行政区划线
unity·gis·cesium
GIS遥遥3 天前
特等奖【高校GIS论坛创新创业大赛】|基于动态网格的低空飞行安全监测与自主避障关键技术研发
智慧城市·gis开发·gis制图·webgis开发·地图可视化
esmap3 天前
技术深度解析:ESMap引擎VS主流数字孪生竞品
人工智能·物联网·3d·编辑器·智慧城市·webgl
白嫖叫上我3 天前
Cesium切换视角中心点不变
cesium
GISer_Jing4 天前
WebGL跨端兼容实战:移动端适配全攻略
前端·aigc·webgl
GIS瞧葩菜6 天前
entity几何体旋转圈编辑(绕 Z 轴旋转)完整流程拆解
cesium
Aurora@Hui7 天前
WebGL & Three.js
webgl
ct9788 天前
Cesium高级特效与着色器开发全指南
前端·gis·cesium·着色器