html5的陀螺儀

2021-08-02 16:15:46 字數 847 閱讀 6723

獲取移動裝置的陀螺儀,需要知道陀螺儀包含什麼。

我們可以讓document監聽deviceorientation 來獲取相關的資料,裡面包括3個值 alpha、beta和gamma。

這三個值分別代表:

(1)alpha:

移動裝置水平放置時,繞z軸旋轉的角度,數值為0度到360度。

移動裝置水平放置時,繞x軸旋轉的角度,數值為-180度到180度。

移動裝置水平放置時,繞y軸旋轉的角度,數值為-90度到90度。

案例:

alpha:

beta:

gamma:

效果:

相容:相容具體沒有測試,ios和android兩家的系統有一些區別,而且不同的核心也有一定的偏差。

判斷是否是ios可以使用乙個webkitcompassheading屬性來判斷,ios上面會有這個屬性,來表示 手機與地球正北方的夾角。

如果dom裡面含有這個屬性,我們就需要通過這個屬性進行加減來計算出來當前所處於的地區的水平位置。

基於HTML5陀螺儀實現ofo首頁眼睛移動效果

從效果中不難看出,是使用陀螺儀事件實現的。這裡先來看一下html5中陀螺儀事件的一些概念。陀螺儀事件為deviceorientation,這裡主要獲取事件中的alpha,beta,gamma。移動裝置水平放置時,繞 z 軸旋轉的角度,數值為 0 度到 360 度。移動裝置水平放置時,繞 x 軸旋轉的...

陀螺儀的學習

從陀螺儀得到x y z三個角速度後就需要通過積分來得到角度,事實上,經過簡單的積分是得不到正確的角度的,更得不到尤拉角,在這裡說一下通過的runge kunta更新四元數,從而對角速度積分得到角度的過程。四元數能到快速的發展,得益於飛行器控制與導航的發展,要求更合理的描述剛體空間的運動,以便於計算機...

陀螺儀工作原理

陀螺儀是用來測量平衡和轉速的工具,在載體高速轉動的時候,陀螺儀始終要通過自我調節,使得轉子保持原有的平衡,這一點是如何做到的?帶著這個問題,我們來看一下這個古老而又神秘的裝置的工作原理。我把三個gimbal環用不同的顏色做了標記,底部三個軸向,rgb分別對應xyz。假設現在這個陀螺儀被放在一艘船上,...