Three.js Camera Orientation in Firefox for Android

Question

Encountering an issue where the phone behaves as though the camera is crossing the environment zenith when it should simply be looking straight ahead. Everything flips upside down the way it would when the phone was oriented so that the camera is looking straight up, but this change happens when looking forward. I'm on the latest version of Firefox (and the Firefox beta browser) on a Samsung Galaxy S6 running Android version 5.0.2. I can reproduce the issue on this video.

The issue appears to be that the rotation around the x-axis crosses from 0 to 180 (degrees) at that point. Is there a way to normalize this? I'm not encountering it in Chrome for Android on the same device.

Answer 1

The simplest solution is to use the experimental WebVR API features in Firefox to get the PositionSensorVRDevice and use its getState() method to derive orientation. The camera may still be slightly off from what you expect, but you can rotate it to be correct without the world flipping the way it does with the device orientation.