cesium 學習(七) HeadingPitchRoll

一、前言

　　對於模型旋轉變換、相機視角變換以及方向變換的處理操作，也就是改變heading、pitch、roll這三個的值。這三個值代表什么意思呢？接下來就專門介紹一下Cesium的HeadingPitchRoll。

二、HeadingPitchRoll

　　HeadingPitchRoll其實也就是歐拉（Euler）角：

　　 

　　機體坐標系與地面坐標系的關系是三個Euler角：yaw，pitch，roll，反應了飛機相對地面的姿態。也就是說Yaw對應的是Heading。（個人認為Cesium用作Heading來表示是非常好的，Heading頭朝向，更形象理解這個角）

2.1 Heading值

　　偏航角ψ（Heading）的值，是控制機體頭的朝向位置，這個角的改變，也就是左右方向的改變。

2.2 Pitch值

　　俯仰角的值，從上圖來看是控制機體上下方向的改變，值為正是順時針旋轉；為負則相反。當然，這個是根據坐標軸來旋轉的，要是進行了翻滾就不一定是上下旋轉了；如果還將頭朝向的方向看作前方，其實還是可以看作上下旋轉的。

2.3 Roll值

　　翻滾角，想象一下側空翻，你就是那個側空翻的人，假如你的頭始終朝着前方看，然后進行側空翻，翻滾完成也就是旋轉了360度。

三、HeadingPitchRange

　　從HeadingPitchRange的名字就可以看出和HeadingPitchRoll是類似的，沒錯他們的Headiing值、Pitch值所代表的意思是一樣的，不一樣的就是Range值。

3.1 Range值

　　Range值所代表的是一個半徑值，在cesium(五)那篇文章的加載動畫模型已經用過了，如下：

　　 

　　其實也就是鎖定了相機距離目標的距離，這個在視角跟隨中常用，跟隨的時候這個半徑值也是可變的。

四、模型旋轉變換

　　介紹了基礎知識，然后可以應用一下，做了一個簡單頁面，控制模型的三個方向的旋轉。

　　核心代碼如下：

this.updateRotation = function (options) {
    if (!Cesium.defined(model)) return;
    var options = options ? options : {};
    //三軸旋轉
    var xAxis = options.xAxis ? angletoradian(options.xAxis) : 0;
    var yAxis = options.yAxis ? angletoradian(options.yAxis) : 0;
    var zAxis = options.zAxis ? angletoradian(options.zAxis) : 0;

    hpRoll.heading = zAxis;
    hpRoll.roll = xAxis;
    hpRoll.pitch = yAxis;
    model.rotation = hpRoll;
    postionVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, 0, new Cesium.Cartesian3());
    position = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, postionVector, position);
    Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, model.modelMatrix);
};

 　　效果圖：

　

 

五、總結

　　雖然沒有將HeadingPitchRoll的例子放上來，但其實使用時不難的。

　　在空間變化中特別是三維空間，歐拉角的應用是非常廣泛的，這里只是使用了Cesium.Transforms.headingPitchRollToFixedFrame來實現模型的旋轉變換，其實還有位置移動、縮放比例等的變換，還可以增加顏色的改變，這里就不再多說了，慢慢來。