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

相关推荐
二狗哈8 小时前
Cesium快速入门11:广告牌添加
3d·webgl·cesium·地图可视化
地狱为王12 小时前
Cesium for Unity 去除Cesium Logo
unity·游戏引擎·cesium
二狗哈13 小时前
Cesium快速入门10:添加物体与3D建筑
3d·webgl·cesium·地图可视化
二狗哈1 天前
Cesium快速入门9:相机动画与交互
webgl·cesium·地图可视化
GIS遥遥1 天前
如何用 Cesium 实现楼栋单体化?前端 WebGIS 实战教程
前端·javascript·cesium·三维gis开发
一个很帅的帅哥2 天前
three.js和WebGL
开发语言·javascript·webgl
傣味洋芋2 天前
cesium(四):Material及MaterialProperty 设置材质
材质·cesium
爱看书的小沐3 天前
【小沐学WebGIS】基于Cesium.JS绘制雷达波束/几何体/传感器Sensor(Cesium / vue / react )
javascript·vue.js·react.js·雷达·cesium·传感器·波束
二狗哈3 天前
Cesium快速入门4:天空盒
webgl·cesium·地图可视化