Device orientation
デバイスの 端末方向イベント を取得し、ReactPixi で描画するサンプルです。
※ iOS では "動作と方向" へのアクセス許可が必要です。Request permission (for iOS) ボタンを押してください。
- alpha:
- beta:
- gamma:
動作確認済みの環境
- iPhone XS (iOS 17.5)
- Safari
- Google Chrome 125.0.6422.51
- Brave 1.65
- Zenfone 9 (Android 14)
- Google Chrome 125.0.6422.53
- Brave 1.65.133 (
設定>サイトの設定>モーションセンサーを許可にする)
メモ
モバイル端末には、一般的にジャイロスコープ、コンパス、加速度センサーなどが搭載されており、端末上で動作するアプリケーションが端末の方向や動きを検出できる。
端末の方向や傾きは 地球座標フレーム および 端末座標フレーム を元に算出され、Web API では 端末方向イベント としてアクセスすることができる。
当ページでは端末方向イベントのうち、DeviceOrientationEvent から得られる下記の情報を利用している。
- alpha 回転角 (0 度 ~ 360 度)
- 端末の東西南北方向への向き。
- 端末の上端が地球の北極をまっすぐ向いているときが 0 度。
- 端末が左へ回転するのに従って最大 360 度まで増加する。
- beta 回転角 (180 度 ~ -180 度)
- 端末の縦方向の向き。
- 端末が地球表面と平行になっている (上端および下端から地球表面までの距離が同じ) ときが 0 度。
- 端末を前方へ傾けるのに従って 180 度まで増加、後方へ傾けるのに従って -180 度まで減少する。
- gamma 回転角 (90 度 ~ -90 度)
- 端末の横方向の向き。
- 端末が地球表面と平行になっている (左端および右端から地球表面までの距離が同じ) ときが 0 度。
- 端末を右へ傾けるのに従って 90 度まで増加、左へ傾けるのに従って -90 度まで減少する。