【三维概念】【Cesium】 Camera控制-视角-roll,pitch,heading的含义

本文介绍了cesium编程中对camera进行操作的三种方式,即setView、flyto和lookAt,还说明了三种方式共同参数heading、pitch、roll的含义,如Roll是围绕X轴旋转等,此外提到加载室内模型后可用WASDQR行走功能待后续讲解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

转载:

cesium编程入门(十二)camera控制 | cesium中文网

cesium提供了三种方式,可以对camera进行操作,这三种方式,有三个共同的参数,heading,pitch,roll,那么,这三个参数分别是什么呢?
cesium原文如下:

Heading is the rotation about the negative z axis. Pitch is the rotation about the negative y axis. Roll is the rotation about the positive x axis

Roll 是围绕X轴旋转, 【我】【cesium】弧度制,正常看(0.0) ,倒立看(180度的弧度)【把人的眼睛当成摄像机看桌上的苹果。Roll=0就是你正常时候看着苹果,roll=180的时候,就是你倒立着看苹果】

Pitch 是围绕Y轴旋转,【我】【cesium】弧度制,水平看(0.0),抬头看(90度的弧度),低头看(-90度的弧度)

Heading 是围绕Z轴旋转,下图中yaw 。【pitch 就简单了,眼睛水平向前看,pitch =90 垂直看向天空。pitch=-90垂直看地面】

【我】【cesium】弧度制, 北(0.0),东(90度的弧度),南(180度的弧度),西(-90度的弧度)【Heading: 就是设置朝东南西北四个方向看】

shili

cesium提供三种方式的三种方式分别为,setView,flyto,lookAt,使用方法如下:

第一种setView

有两种计算视角方式:

  • Cartesian3方式:
.camera.setView({
  destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置

  orientation: {
    heading : Cesium.Math.toRadians(20.0), // 方向
    pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
    roll : 
  }
});
  • rectangle 方式:
.camera.setView({

destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),//west, south, east, north

orientation: {

heading : Cesium.Math.toRadians(20.0), // 方向

pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度

roll : 

} });

第二种方式,flyto

view.camera.flyTo({
  destination :Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
  orientation: {
    heading :Cesium.Math.toRadians(), 
    pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
    roll :
  },
  duration:, // 设置飞行持续时间,默认会根据距离来计算
  complete:function () {
  // 到达位置后执行的回调函数
  },
  cancle:function () {
  // 如果取消飞行则会调用此函数
  },
  pitchAdjustHeight:, // 如果摄像机飞越高于该值,则调整俯仰俯仰的俯仰角度,并将地球保持在视口中。
  maximumHeight:, // 相机最大飞行高度
  flyOverLongitude:, // 如果到达目的地有2种方式,设置具体值后会强制选择方向飞过这个经度(这个,很好用)
});

第三种方式lookAt

 center = Cesium.Cartesian3.fromDegrees(114.44455, 22.0444);//camera视野的中心点坐标
 heading = Cesium.Math.toRadians();
 pitch = Cesium.Math.toRadians(-20.0);
 range = 5000.0;
view.camera.lookAt(center,  Cesium.HeadingPitchRange(heading, pitch, range));

如果有些人加载了室内模型,可能还要用WASDQR像在游戏中一样的行走,cesium也能实现此功能,且听下回分解。

<think>好的,我现在需要帮助用户在Vue-Cesium中实现三维巡检功能。首先,用户提到了参考的引用内容,虽然引用[1]和[2]中的管道动画和飞行漫游可能与巡检功能相关,但需要结合Vue-Cesium的具体实现方法。 用户可能希望模型沿着预定路径移动,并可能需要在巡检过程中调整视角或添加交互功能。首先,我需要考虑如何在Vue-Cesium中加载三维模型。Vue-Cesium是基于Cesium的Vue组件,所以应该使用Cesium的Entity或Primitive API来加载模型。 接下来是路径动画部分。Cesium提供了SampledPositionProperty来定义模型的位置随时间变化的路径。需要创建路径的点集合,并为每个点指定时间戳,然后让模型沿着这个路径移动。同时,可能需要使用Camera视角跟随功能,比如使用Cesium的viewer.trackedEntity或自定义相机路径,让视角跟随模型移动。 然后,用户可能需要控制动画的启动、暂停和停止,这可以通过Cesium的Clock控件来实现。调整时钟的速度可以控制动画的播放速度。此外,可能还需要添加路径的可视化,比如使用PolylineEntity显示路径线。 另外,引用中提到的ht.Default.startAnim()和Cesium的自动飞行漫游功能,可以参考其动画实现方式,但需转换为Cesium的API调用。例如,使用Cesium的CallbackProperty来动态更新模型的位置和方向。 最后,需要将这些步骤整合到Vue-Cesium的组件中,利用Vue的生命周期钩子来管理资源的初始化和销毁,避免内存泄漏。同时,考虑示例代码的结构,确保用户能够理解和修改。 在编写示例代码时,要确保正确引入Vue-Cesium组件,并在mounted钩子中初始化路径和模型。动画控制部分可以封装成方法,方便用户调用。此外,路径点的生成可能需要用户自行定义,或者提供动态生成的示例,比如圆形或贝塞尔曲线路径。 可能还需要处理模型的方向,使得模型在移动时根据路径方向调整朝向,这可以通过计算两点之间的向量并设置模型的headingpitchroll来实现。 测试时要注意模型的加载路径是否正确,动画是否平滑,以及视角跟随是否有效。如果用户需要更复杂的路径,可能需要引入第三方库如turf.js来计算曲线路径。 总结步骤:加载模型→创建路径→设置位置属性→配置相机视角控制动画→可视化路径。确保代码清晰,注释详细,方便用户根据实际需求调整。</think>在Vue-Cesium中实现三维模型巡检功能,可通过路径动画+视角跟随实现。以下是关键步骤和示例代码: ### 一、基础实现步骤 1. **加载三维模型** ```vue <template> <vc-viewer @ready="onViewerReady"> <vc-entity ref="modelEntity" :position="modelPosition" :model="modelConfig"></vc-entity> <vc-entity :polyline="pathLine" :position="pathPosition"></vc-entity> </vc-viewer> </template> <script> export default { data() { return { modelConfig: { uri: '/models/drone.glb', minimumPixelSize: 128, maximumScale: 100, silhouetteColor: 'cyan' }, pathLine: { positions: [], material: new Cesium.PolylineGlowMaterialProperty({ color: Cesium.Color.CORNFLOWERBLUE }), width: 5 } } } } </script> ``` 2. **创建巡检路径** ```javascript // 生成圆形路径(示例) generateCircularPath(center, radius, points) { const positions = []; for(let i=0; i<=points; i++){ const angle = Math.PI*2*i/points; positions.push( Cesium.Cartesian3.fromDegrees( center[0] + radius * Math.cos(angle), center[1] + radius * Math.sin(angle), 100 // 高度 ) ); } this.pathLine.positions = positions; } ``` 3. **路径动画实现** ```javascript // 在onViewerReady方法中 const positionProperty = new Cesium.SampledPositionProperty(); this.pathLine.positions.forEach((pos, i) => { const time = Cesium.JulianDate.addSeconds( viewer.clock.startTime, i * 2, // 每段间隔2秒 new Cesium.JulianDate() ); positionProperty.addSample(time, pos); }); this.$refs.modelEntity.entity.position = positionProperty; this.$refs.modelEntity.entity.orientation = new Cesium.VelocityOrientationProperty(positionProperty); // 设置时钟控制 viewer.clock.multiplier = 1; // 播放速度 viewer.trackedEntity = this.$refs.modelEntity.entity; // 视角跟随 ``` ### 二、高级功能扩展 1. **视角模式切换** ```javascript toggleViewMode() { if(this.isFirstPerson) { // 第一人称视角 viewer.trackedEntity = undefined; const camera = viewer.camera; camera.lookAt(this.modelPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 10) ); } else { // 第三人称跟随 viewer.trackedEntity = this.$refs.modelEntity.entity; } } ``` 2. **巡检过程控制 ```javascript // 动画控制方法 startInspection() { viewer.clock.shouldAnimate = true; }, pauseInspection() { viewer.clock.shouldAnimate = false; }, resetInspection() { viewer.clock.currentTime = Cesium.JulianDate.clone(viewer.clock.startTime); } ``` 3. **添加路径标记点** ```javascript addPathMarkers() { this.pathLine.positions.forEach((pos, index) => { const marker = this.$refs.viewer.entities.add({ position: pos, billboard: { image: '/icons/marker.png', verticalOrigin: Cesium.VerticalOrigin.BOTTOM }, label: { text: `检查点${index+1}`, font: '14px sans-serif' } }); }); } ``` ### 三、优化建议 1. 使用Web Worker计算复杂路径,避免主线程阻塞 2. 采用LOD技术优化模型加载[^2] 3. 结合Cesium的[3D Tiles](https://cesium.com/learn/cesiumjs/ref-doc/3DTiles.html)规范加载大规模场景 4. 使用`Cesium.sampleTerrain`方法实现地形贴合
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值