1
DeviceOrientationEventエクスペリエンスと携帯電話/タブレットを持つ人は誰でも便利ですか？DeviceOrientationEvent：ベータが90度に近づいたりヒットしたりすると、どのように狂ったガンマに対処するのですか？
ジャイロスコープ付デバイスで次のコードスニペットを実行すると、ベータが90deg（デバイスがまっすぐ上を向いている）に近づくにつれてガンマ（y軸に沿って左/右に回転）が大きくなり、予測できなくなります。私はこれが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ページの例も、ベータが90度になると壊れます！このMDN tutorialと同じです - あなたのデバイスでそれを確認してください：まっすぐであれば、ボールは邪魔になります。これらの収差はどうやって気付かなかったのですか？
この[CodePen]（https://codepen.io/u01jmg3/pen/WRxJEX）は役に立ちますか？ジンバルロックを避けるためにオイラー角よりも大きな四角形の角度を使用します。 – u01jmg3
@ u01jmg3あなたの返事に感謝します。しかし、このコードペンはまだロックの問題に遭遇しています。デバイスをまっすぐ上下に握っていると気づくでしょう。これとは対照的に、デバイスを平らに置くと、左右にねじることで目的の結果が得られます。 – calipoop