欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > Cesium.js(6):Cesium相机系统

Cesium.js(6):Cesium相机系统

2025/4/15 12:28:39 来源:https://blog.csdn.net/u013938578/article/details/147170757  浏览:    关键词:Cesium.js(6):Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机,可以控制视图的位置、方向和角度。

帮助文档:Camera - Cesium Documentation

1 setView

setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置,并通过 orientation 对象来设置相机的航向、俯仰和翻滚角。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.setView({destination:position,orientation:{heading:Cesium.Math.toRadians(0),pitch:Cesium.Math.toRadians(-90),roll:0}})</script>
</body>
</html>

destination:接受两种类型,一个是Cartesian3,我们这里用鼠标点击获取到经纬度之后,转换成笛卡尔坐标系传递。另一个类型是Rectangle,这个我们在下边讲解。

orientation(欧拉角):调整相机视角方向的;它有3个参数:heading、pitch、roll

  • heading 值为 0 时,指向正北方,随着数值变大,顺时针旋转(模型左右摆动),航向角,代表飞机的航向。
  • pitch 值为 0 时,相机前后保持水平,改变数值(模型上下摆动),负值时俯视,负得越大,越向下俯视,正值时仰视,正得越大,越向上仰视,这就是为什么用-180°-180°的角度范围,而不是0°-360°,很方便记忆和理解,俯仰角,俯(向下)为负,仰(向上)为正。
  • roll 值为 0 时,相机左右保持水平,改变数值(模型左右摆动),roll和pitch的表现类似,只是将前后变成了左右,左为负,右为正,用-180°-180°也很方便记忆和理解。

duration:飞行时间,单位秒;

您可以修改控件上的值,然后看每个值被修改后,相机是如何变化的,您会得出以下结论。

效果如下:

2 flyTo

flyTo 方法会让相机以动画的方式飞到指定的位置,你可以设置飞行时间和其他动画参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.flyTo({destination:position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: 0},duration:5,})</script>
</body>
</html>

这里的参数和setView中的一致,这里就不讲解了。

效果如下:

启动后,会发现相机通过飞行的方式到底制定位置。

3 lookAt

lookAt 方法允许相机以某个位置为中心来确定位置和姿态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const center = Cesium.Cartesian3.fromDegrees(116.39,39.91);const heading = Cesium.Math.toRadians(50);const pitch = Cesium.Math.toRadians(-90);const range = 2500;viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading,pitch,range));</script>
</body>
</html>

效果如下:

4 viewBoundingSphere

它的视角切换效果也是和setView方法一样,没有飞行过渡效果,直接切换视口到指定目的地。优点是可以指定玩目标点后,可以从多个角度更好的观测。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,1500);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0));var entity = viewer.entities.add({position:position,orientation:orientation,model:{uri:"../../libs/models/Cesium_Air.glb",minimumPixelSize:100,maximumScale:10000,show:true}});viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0));</script>
</body>
</html>

效果如下:

无论如何移动相机的视角都是绑定在飞机模型上的,由此发现,当我们需要对一个物体进行多角度观测时,或者建筑物进行定点漫游时,我们就需要viewBoundingSphere方法。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词