javascript中具有歐拉角的CSS三次全景控制

Question

我目前正在構建查看器以顯示全景照片。 我將圖像放在CSS多維數據集的內部，並且正在研究如何利用javascript中的deviceorientation事件來控制它。

我已經找到並實現了一種算法，可以將來自deviceorientation事件的原始數據轉換為歐拉角，但是我不確定如何使用CSS 3d旋轉變換將這些數據掛鈎以旋轉多維數據集。

我的目標是使用戶可以舉起手機並在全景周圍看，就像那里的一些商業軟件一樣。

我當時正在考慮利用three.js來做到這一點，但是對於這個特定項目，庫的大小太大了。 我們希望保持較低的開銷。

這是我目前擁有的代碼筆：

[已編輯]

任何幫助將不勝感激！ 謝謝！

更新

我現在有一些基本功能正在工作。 這是更新的代碼：

[已編輯]

您需要關閉屏幕旋轉功能，並且必須將手機傾斜到橫向視圖。 現在，我的新問題是如何在將手機保持為縱向位置以及打開屏幕旋轉功能時使整個過程正常工作。

Answer 1

因此，在眾多研究和有關Google的一些非常有用的文章的幫助下，我終於設法解決了這個問題-特別是以下內容：

http://dev.opera.com/articles/w3c-device-orientation-usage/#demo

本質上，我最終將陀螺儀的Tait-Bryan角度轉換為旋轉矩陣。 這有點棘手，因為在創建從歐拉到旋轉矩陣的轉換時，有許多不同的軸組合順序。 我利用了上面文章中使用的ZYX組合。

然后，我用其他兩個矩陣對該初始矩陣進行了變換。 首先是繞z軸旋轉以說明屏幕的方向。 第二個是XZ軸的反轉，從而解決了相機向上看時css立方體移動方向的問題。 抬起頭將多維數據集向下移動。

最后，我必須有點hackey。 立方體內部的圖像偏離當前方向，因此我重新組織了圖像並旋轉了立方體的面。 我嘗試了各種旋轉矩陣變換，但是如果不弄亂我的控件，似乎沒有什么可以糾正它。

希望這對遇到類似問題的其他人可能有用。

您可以在這里找到我的最終解決方案的Codepen：

[已編輯]