2

3D空間でマップイメージタイルの平面を表示しようとしているWebアプリケーションがあります。

飛行機を常に水平にしたいのですが、デバイスは回転します。最終的な効果は、この海洋コンパスのデモに似ています。

これで、モバイルデバイス用のW3CデバイスオリエンテーションAPIを介してデバイスオリエンテーションをキャプチャでき、マップイメージタイルを正常にレンダリングできました。

私の問題は、デバイスの向きに応じてカメラを正しく回転させる方法についての基本的な数学の知識が不足していることです。

私はThree.jsライブラリを使用しています。カメラオブジェクトの回転をアルファ/ベータ/ガンマ（ラジアンに変換）で直接設定しようとしました。ただし、カメラは常にローカル軸ではなく、openGL / webGLで使用されるワールド軸に従って回転しているように見えるため、機能していません。

カメラの前でポイントを100ユニット回転させ、デバイスの向きAPIによって提供される角度でカメラの位置に対してポイントを回転させるというアイデアに出会いました。しかし、これを実装する方法もわかりません。

誰かが私が達成したいことを手伝ってくれますか？

編集：

間違いの修正：

同様のことを実装することに興味がある人にとって、Three.jsオブジェクトはデフォルトでワールド空間軸ではなくローカル空間軸を使用していることがわかりました。私は間違っていました。公式文書には、「object.matrixAutoUpdate = false」を設定し、「object.matrixWorld」を変更して「object.updateWorldMatrix（）」を呼び出すと、オブジェクトをワールド軸で手動で移動/回転/スケーリングできると記載されています。ただし、オブジェクトに親がある場合は機能しません。オブジェクトに親がある場合は、ローカル軸マトリックスが常に使用されます。

4

1 に答える 1

4

W3Cデバイスオリエンテーションイベント仕様によると、 角度はalpha、  タイプZX'-Y''の固有のテイトブライアン角度のセットを形成しますbeta 。 gamma

Three.jsカメラも固有の角度に従って回転します。ただし、回転が適用されるデフォルトの順序は次のとおりです。

camera.rotation.order = 'XYZ'.

次に、実行する必要があるのは、次のように設定することです。

camera.rotation.order = 'ZXY'; // or whatever order is appropriate for your device

次に、カメラの回転を次のように設定します。

camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = gamma * Math.PI / 180;
camera.rotation.z = alpha * Math.PI / 180;

免責事項：私はあなたのデバイスタイプを持っていません。これは、three.jsに関する私の知識に基づいた知識に基づいた推測です。

編集：three.jsr.65用に更新

于 2012-08-05T16:12:43.280 に答える