大家好,我是日拱一卒的攻城师不浪,专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀,这是2024年输出的第29/100篇文章。
交流合作:brown_7778
前言
有的小伙伴经常跟我吐槽,说Cesium
的API过多,密密麻麻上百个类,看着让人头大。
其实大多数人第一次接触都会有这种感觉,有点让人望而却步。
今天我就来分享下在Cesium中常用到的5中相机Camera
定位的方式,并且每一种的用途都有所不同。
Camera
相机主要是为了控制视角移动、旋转、漫游等功能;
在飞行定位前,我们首先要知道往哪飞,所以需要知道点位的信息,无论是笛卡尔坐标还是经纬度坐标都可;
flyTo 过渡飞行(有动画)
const { camera } = window.__viewer;
camera.flyTo({
// 从以度为单位的经度和纬度值返回笛卡尔3位置。
destination: Cartesian3.fromDegrees(120.36, 36.09, 40000),
orientation: {
heading: Math.toRadians(0.0),
pitch: Math.toRadians(-90),
roll: 0.0,
},
duration: 3, // 飞行时间(s)
});
代码解析
-
destination:接受两种类型,一个是Cartesian3,我们这里用鼠标点击获取到经纬度之后,转换成笛卡尔坐标系传递。另一个类型是Rectangle,这个我们在下边讲解。
-
orientation(欧拉角):调整相机视角方向的;
-
duration:飞行时间,单位秒;
orientation欧拉角
这个参数相当于欧拉角的概念,我们重点说一下这个怎么理解,它有3个参数:heading、pitch、roll,我们用一架飞机和人头做示意图讲解
再结合笛卡尔坐标系示意图:
- heading(Yaw):以Z轴为中心旋转,单位弧度,控制机头的朝向位置,左右摆头;
- pitch:以Y轴为中心旋转,单位弧度,控制飞机的起降朝向,上下摆头;
- roll:以X轴为中心旋转,单位弧度,控制飞机的侧翻角度;
如何判断所传弧度的正负值?
-
heading:绕着
Z轴负方向
,顺时针旋转为正; -
pitch:绕着
Y轴负方向
,顺时针旋转为正; -
roll:绕着
X轴正方向
,顺时针旋转为正;
setView 瞬移(无动画)
相机直接瞬间移动到指定位置
const setView = () => {
camera.setView({
destination: Cartesian3.fromDegrees(120.36, 36.09, 40000),
orientation: {
heading: Math.toRadians(0.0),
pitch: Math.toRadians(-90),
roll: 0.0,
},
});
};
flyToBoundingSphere 指定边界
const flyBounding = () => {
const boundingSphere = new BoundingSphere(
Cartesian3.fromDegrees(120.36, 36.09, 0),
40000
);
camera.flyToBoundingSphere(boundingSphere, {
duration: 3,
});
};
- BoundingSphere:具有中心和半径的包围球,第一个参数是指定中心点,第二个参数是球体半径,单位m;
flyTo 飞行至指定模型
当我们在场景里渲染了一个3D模型,但是找不到的时候,可以使用__viewer.flyTo(tileset)
将相机自动定位到模型位置;
const tileset = new Cesium.Cesium3DTileset(tilesetJson);
__viewer.flyTo(tileset);
由于我们还未讲到3D Tile模型加载,所以具体细节放到对应章节讲解。
zoomTo 相机追踪
当你创建好entity实例之后,可以直接将视角定位到实例的可视区域;
const entity = __viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: "../images/Cesium_Logo_overlay.png",
sizeInMeters: true,
},
});
__viewer.zoomTo(entity);
结语
本文是作者的系列课程**《Cesium从入门到实战》**其中的一小节内容,基于从解决小伙伴们的烦恼的角度出发:
- Cesium的API过多,看着头大;
- 想系统的学习却又无从下手;
- 缺乏3D渲染相关的基础知识;
- 没有系统的教程,遇到问题没人问;
具体课程介绍:https://ww7rybwvygd.feishu.cn/docx/PG1TdAhK0oASyZxluGqciO7BnSg
如果想自学的也可以参考我的【开源项目】:https://github.com/tingyuxuan2302/cesium-vue3-vite
有需要进技术产品开发交流群(可视化&GIS)可以加我:brown_7778(备注来意),也欢迎
数字孪生可视化领域
的交流合作。
最后,如果觉得文章对你有帮助,也希望可以一键三连👏👏👏,支持我持续开源和分享~