This is probably one of the most glaring problems you’ll encounter when you finally get your VR experience in to the hands of a real user, and you’ll kick yourself for not noticing it sooner.
The problem is that I didn’t account for the direction I would be presenting in when I created the demos. All of my demos were created with the default orientation of cardinal North, but the stage I was presenting from was facing South.
On Android devices, device orientation measures this starting at North. On iOS devices, this is measured starting from the direction the phone is facing when the page is loaded.
We could create a calibration device to provide an offset delta, and then use that whenever we do anything with the device orientation data.
I’m using Three.js’ DeviceOrientationControls.js plugin to provide my device orientation controlled camera. Helpfully, since Three.js
r77 DeviceOrientationControls has a property
alphaOffsetAngle, and a method
updateAlphaOffsetAngle that allow you to specify the offset to use:
// angle is in radians controls.updateAlphaOffsetAngle( angle );
Tomorrow I’ll look at creating a device to allow the
alphaOffsetAngle to be easily set by the user.
Check out my other Cardoctober posts here: /cardboctober