開發虛擬或擴增實境網頁應用程式的開發人員,無疑都熟悉 DeviceOrientationEvent
。對於新手來說,「This End Up: Using Device Orientation」一文提供了很好的概略說明,說明 deviceorientation
事件監聽器如何回應裝置的旋轉動作。
在早期版本的 Chrome 中,DeviceOrientationEvent
中包含的 alpha
、beta
和 gamma
值會以 absolute
度數相對於地球座標架構提供。提供絕對度數需要使用裝置的磁力儀感應器偵測地球磁場,而磁場可能會受到附近磁場的波動影響,導致讀數不準確。實際上,即使裝置本身並未移動,附近的磁鐵仍可能導致網頁應用程式註冊大量 DeviceOrientationEvent
。對於只在意追蹤方向變化的虛擬實境應用程式而言,這種磁性雜訊是個壞消息。
異動內容
自 Chrome 50 起,DeviceOrientationEvent
中包含的度數預設不再以地球座標架構為絕對值。也就是說,只有在裝置的加速計和陀螺儀偵測到實際移動時,才應觸發 DeviceOrientationEvent
。磁力計和磁場變化造成的錯誤讀數,都不會影響這項功能。
但我還是需要絕對度數!
如果您要編寫需要使用絕對度數的 JavaScript (例如需要直接對應至實體世界的擴增實境網頁應用程式),也不必擔心。先前的行為 (取決於裝置的磁力計) 可透過新的 deviceorientationabsolute
事件 取得。從開發人員的角度來看,這類似於現有的 DeviceOrientationEvent
,可保證 absolute
屬性會設為 true
。
偵測支援的項目
如果開發人員偏好使用絕對度數,可以使用功能偵測功能,判斷瀏覽器是否支援新的 DeviceOrientationAbsoluteEvent
事件:
if ('ondeviceorientationabsolute' in window) {
// We can listen for the new deviceorientationabsolute event.
} else if ('ondeviceorientation' in window) {
// We can still listen for deviceorientation events.
// The `absolute` property of the event tells us whether
// or not the degrees are absolute.
}
跨瀏覽器相容性
DeviceOrientationEvent
中回報的值從未一致。
iOS 版 Safari 和 Firefox 會使用相對於角度的相對值,這與 Chrome 50 中導入的實作變更相符。這項變更應可讓以 iOS 為開發目標的網頁應用程式更加一致。
在裝置上使用適當的傳感器時,Firefox (在 iOS 以外的平台上)、Edge 和 Chrome 50 以下版本會為 DeviceOrientationEvent
使用絕對度數值。
截至本文撰寫時,Chrome 50 是第一個支援新 DeviceOrientationAbsoluteEvent
的瀏覽器。
使用 DeviceMotionEvent 進行進階方向追蹤
Boris Smus 撰寫了一篇詳細的文章,詳細說明使用 DeviceOrientationEvent
的部分缺點,以及如何使用 DeviceMotionEvent
實作專屬的感應器融合。這些 API 可提供對加速計和陀螺儀的低階存取權,並為使用者提供更精確的虛擬實境體驗。