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(五)那篇文章的加載動畫模型已經用過了，如下：

　　

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

四、模型旋轉變換

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

　　核心代碼如下：

 1 this.updateRotation = function (options) {
 2     if (!Cesium.defined(model)) return;
 3     var options = options ? options : {};
 4     //三軸旋轉
 5     var xAxis = options.xAxis ? angletoradian(options.xAxis) : 0;
 6     var yAxis = options.yAxis ? angletoradian(options.yAxis) : 0;
 7     var zAxis = options.zAxis ? angletoradian(options.zAxis) : 0;
 8 
 9     hpRoll.heading = zAxis;
10     hpRoll.roll = xAxis;
11     hpRoll.pitch = yAxis;
12     model.rotation = hpRoll;
13     postionVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, 0, new Cesium.Cartesian3());
14     position = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, postionVector, position);
15     Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, model.modelMatrix);
16 };

　　效果圖：

　

五、總結

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

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

總結

以上是生活随笔為你收集整理的cesium 学习(七) HeadingPitchRoll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。