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

相关推荐
贵州数擎科技有限公司10 小时前
曼德勃罗集的 Three.js 实现
webgl·three.js
Nian.Baikal12 小时前
Cesium 3D Tiles 加载与优化实战
前端·cesium
大松鼠君18 小时前
GLSL 动画动作万能规律表
webgl·three.js
小飞侠是个胖子20 小时前
底层博弈:在高阶 WebGL 开发中平衡视觉极限与渲染性能
webgl
贵州数擎科技有限公司2 天前
分形金字塔的 Ray Marching 实现
webgl·three.js
:mnong4 天前
PlayCanvas 开源 WebGL/WebGPU 3D 创作平台分析
3d·开源·webgl
青山Coding5 天前
Cesium应用(五):通视分析,解锁三维场景的”无遮挡“视野
前端·cesium
Strayer8 天前
在地图上实现管网拓扑批量移动、旋转与缩放(参考图片的实现方式)
gis·webgl·数据可视化
Strayer8 天前
WebGL 地图上做精准编辑?这套分层方案搞定管网拖拽 / 连接
gis·webgl
BJ-Giser8 天前
Cesium 体积光阴影率分析和阴影体渲染效果
前端·可视化·cesium