DeviceOrientationEvent：當測試版接近/命中90deg時如何處理瘋狂的gamma？

任何擁有DeviceOrientationEvent體驗和手機/平板電腦的人都可以使用嗎？DeviceOrientationEvent：當測試版接近/命中90deg時如何處理瘋狂的gamma？

在具有陀螺儀的設備上運行以下代碼片段時，我注意到gamma（沿y軸左右旋轉）隨着beta接近90deg（設備直指向上）變大且不可預知。我認爲這是gimbal-lock。

var data, raf, alpha = document.getElementById("alpha"), 
 
    beta = document.getElementById("beta"), 
 
    gamma = document.getElementById("gamma"); 
 

 
window.addEventListener("deviceorientation", processData); 
 
window.addEventListener('click', togglePause); 
 
updateText(); 
 

 
function processData(e) { 
 
    data = e; 
 
} 
 

 
function updateText() { 
 
    if (data) { 
 
    alpha.textContent = Math.round(data.alpha); 
 
    beta.textContent = Math.round(data.beta); 
 
    gamma.textContent = Math.round(data.gamma); 
 
    } 
 
    raf = requestAnimationFrame(updateText); 
 
} 
 

 
function togglePause(e) { 
 
    if (raf) { 
 
    cancelAnimationFrame(raf); 
 
    raf = null; 
 
    window.removeEventListener("deviceorientation", processData); 
 
    } else { 
 
    window.addEventListener("deviceorientation", processData); 
 
    raf = requestAnimationFrame(updateText); 
 
    } 
 
}

body { 
 
    font: normal 30px/200% sans-serif; 
 
    margin: 20px; 
 
    cursor: default; 
 
} 
 
span { 
 
    font-size: 50px; 
 
    vertical-align: middle; 
 
}

<body> 
 
    alpha: <span id="alpha">null</span> 
 
    <br>beta: <span id="beta">null</span> 
 
    <br>gamma: <span id="gamma">null</span> 
 
    <br>[tap to pause/resume] 
 
</body>

https://jsfiddle.net/1us8p1ad/show

我的問題：我如何可以預見跟蹤使用伽瑪左/右設備的方向？伽瑪是我關心的唯一價值 - 不需要3D空間。

我使用旋轉矩陣和四元數來討論here，但沒有得到有效的結果。事實上，作者的github頁面上的示例在測試版命中90deg時也會中斷！與此相同MDN tutorial - 在您的設備上檢查它：當它直線上升時，球就會爆裂。這些畸變怎麼沒有被忽視！

來源

2017-01-05 calipoop

這[CodePen]（https://codepen.io/u01jmg3/pen/WRxJEX）有幫助嗎？它使用歐拉角上的四元數角度來避免萬向節鎖定。 – u01jmg3

@ u01jmg3感謝您的回覆 - 但codepen仍然遇到鎖定問題 - 您會注意到，如果您將設備垂直向上或向下放置，則扭曲設備無效。相反，如果您將設備放平，則向左/向右扭曲會產生所需的結果。 – calipoop

似乎萬向節鎖是一個已知的現實世界的障礙，許多應用通過限制設備運動來避免它（在我的情況下不可能）。

我的解決方案是將alpha/beta/gamma值轉換爲旋轉矩陣，然後從其中一個矩陣值中提取數據。我使用的代碼是來自W3C的here。

請注意，我嘗試過使用四元數，但結果值對於僅在1個方向上的運動沒有幫助。

來源

2017-01-15 20:17:02 calipoop

由於你有任何代碼可以共享哪個產生旋轉矩陣？ – u01jmg3

@ u01jmg3當然！我更新了我的答案，以包含我使用的代碼的來源。關於該頁面的整個討論與理解我的問題非常相關。 – calipoop

DeviceOrientationEvent：當測試版接近/命中90deg時如何處理瘋狂的gamma？

回答

相關問題