第二天:相机系统

368 阅读2分钟

相机原理

Cesium通过相机控制场景中的视域,旋转,绽放,平移等操作都可以控制相机移动。当场景移动时,
其实是地球不动,相机在移动,这种相对运动产生场景移动的效果。

相机的方向和位置

    Cesium中相机方向通过orientation设定,orientation包括heading,pitch,roll。
    heading:围绕笛卡尔坐标y轴旋转,也叫偏航角,控制飞机往左飞还是往右飞,即水平旋转。
默认方向为正北,正角度向东旋转。
    pitch:围绕笛卡尔坐标x轴旋转,也叫俯仰角,即上下旋转,默认-90°,面向地面,
    roll:围绕笛卡尔坐标z轴旋转,也叫翻滚角,控制飞机翻滚旋转,默认角度0°,正角度向右旋转。
正向角度向东旋转

相机系统分类和用法

  1. setView
     setView通过定义相机飞行目的点的三维坐标和视角,没有飞行过程,直接定位到设定的视域范围,
 用于快速切换视角
        let position = Cesium.Cartesian3.fromDegrees(lon, lat, height)
        viewer.camera.setView({
            destination:position,
            orientation:{
                heading:Cesium.Math.toRadians(0, 0)  // 默认
                pitch:Cesium.Math.toRadians(-90.0)   // 默认
                roll:0.0                             // 默认
            }
        })
  1. viewerBoundingSphere
     viewerBoundingSphere相机运动效果与setView类似,都是没有飞行过程,直接切换到视域,但是有所不同,
 必须要设定模型的外接圆,适用于室内浏览,空间较小,相机移动不易控制。viewerBoundingSphere可以将相机固定在定点,
视角旋转360度,实现定点环游。
    var tileset = new Cesium.Cesium3DTiles({
        url:''
    })
    tileset.readyPromise.then({
        primitives:add(tileset)
        viewer.scene.primitives.add(primitives)
        viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(-1.57, 0, 2))
    })
  1. flyTo
     flyTo是快速切换视角,带有飞行动画,可以设置飞行时长,相机自动设定飞行速度和飞行路线,
 实现巡游式视域切换。
    viewer.camera.flyTo({
        destination:Cesium.Cartesian3.fromDegrees(lon, lat, height),
        orientation:{
            heading:Cesium.Math.toRadians(20, 0)  // 默认
            pitch:Cesium.Math.toRadians(-90.0)   // 默认
            roll:0.0                             // 默认
        },
        duration:5,  
        complete:function(){
            // 到达位置后执行的回调函数
        },
        cancle:function(){
            // 取消飞行后执行的回调函数
        },
        pitchAdjustHeight:-90, //如果相机飞行高于该值,则调整俯仰角度,将地球保持在视域中
        maximumHeight:5000,  // 相机最大飞行高度
        flyOverLongitude:100  // 相机飞向目的地的过程中,必须强制经过东经100度子午线
    })
  1. lookAt
    lookAt将视角固定在所设置的目的点上,可以任意旋转视角,但是不会改变位置
    var center = Cesium.Cartesian3.fromDegrees(lon, lat)
    var heading = Cesium.Math.toRadians(50)
    var pitch = Cesium.Math.toRadians(-90)
    var roll = 50
    viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, roll))