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

12 篇文章 1 订阅

 

转载:

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也能实现此功能,且听下回分解。

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现Cesium三维漫游飞行效果可以通过以下步骤实现: 1. 创建一个Cesium Viewer对象: ``` var viewer = new Cesium.Viewer('cesiumContainer'); ``` 2. 通过Camera控制视角和位置: ``` viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), orientation: { heading: Cesium.Math.toRadians(heading), pitch: Cesium.Math.toRadians(pitch), roll: Cesium.Math.toRadians(roll) } }); ``` 3. 为视角添加动画效果: ``` var duration = 5.0; // 动画时间,单位为秒 Cesium.CameraFlightPath.createAnimationCartographic(viewer.scene, { destination: Cesium.Cartographic.fromDegrees(longitude, latitude, height), orientation: { heading: Cesium.Math.toRadians(heading), pitch: Cesium.Math.toRadians(pitch), roll: Cesium.Math.toRadians(roll) }, duration: duration }); ``` 4. 添加键盘和鼠标事件: ``` // 飞行到指定位置 function flyTo(longitude, latitude, height, heading, pitch, roll) { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), orientation: { heading: Cesium.Math.toRadians(heading), pitch: Cesium.Math.toRadians(pitch), roll: Cesium.Math.toRadians(roll) } }); } // 监听键盘和鼠标事件 document.addEventListener('keydown', function(event) { switch (event.keyCode) { case 87: // W viewer.camera.moveForward(1000.0); break; case 83: // S viewer.camera.moveBackward(1000.0); break; case 65: // A viewer.camera.moveLeft(1000.0); break; case 68: // D viewer.camera.moveRight(1000.0); break; case 38: // Up arrow viewer.camera.lookUp(0.1); break; case 40: // Down arrow viewer.camera.lookDown(0.1); break; case 37: // Left arrow viewer.camera.lookLeft(0.1); break; case 39: // Right arrow viewer.camera.lookRight(0.1); break; default: return; } event.preventDefault(); }, false); ``` 通过以上步骤,即可实现Cesium三维漫游飞行效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值