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

相关推荐
全栈项目管理程序猿3 分钟前
Cesium 实战 11 - 调整饱和度、对比度等参数,加载渲染美化影像底图
cesium
孪生前端2 小时前
如何用配置驱动一套 Three.js 数字孪生模板
webgl
雨中的小蜗牛3 天前
Cesium实现模型拆解-从底层拓展强行让它和Threejs一样拆解模型
cesium
全栈项目管理程序猿3 天前
Cesium 实战 11 - 调整色调、对比度等参数,加载渲染暗黑底图
cesium
用户83134859306984 天前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js
元气少女小圆丶5 天前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl
WebGIS开发7 天前
WebGIS开发进阶教程①:WebGL坐标系
gis·webgl·gis开发
虚焦像素_8 天前
MapLibre GL 实战:一套引擎搞定 2D 平面与 3D 球面
webgl
Li.map8 天前
CesiumJS 地图主题系统:用着色器打造实时滤镜
javascript·arcgis·cesium·着色器
全栈项目管理程序猿9 天前
Cesium-1.143 中文版 API
javascript·cesium