Add W3C DeviceOrientation Event controls and demo

[richtr]

Provide camera controls based on the W3C Device Orientation Event specification (http://www.w3.org/TR/orientation-event/).

A demo using these controls is included in this patch and it can be viewed directly in a browser @ http://richtr.github.io/three.js/examples/misc_controls_deviceorientation.html.

THREE.DeviceOrientationControls currently works well in the following browsers:

• Chrome Beta for Android
• Opera Beta for Android
• Firefox Beta for Android

Note: Other browsers may not yet conform to the rotation calibration described in the DeviceOrientation Event specification.

A full W3C DeviceOrientation event browser support table is available at http://caniuse.com/#feat=deviceorientation.

Detection of browser/platform deviceorientation capabilities or anomalies remain out-of-scope of this patch. Developers may test for the presence and calibration of DeviceOrientation Events prior to invoking this DeviceOrientation control.

[mrdoob]

This really relies on Beta versions! :)

It seems work pretty well, albeit not perfect? It's hard to describe what's going on... Maybe we need a debug cubemap for this?

[mrdoob]

It's pretty great though!

[mrdoob]

Merged! Thanks!

[richtr]

Thanks!

Yes, this does rely on 'beta' versions of browsers. There is a lot of activity happening in 'next' versions of mobile browsers and I think this provides a state-of-the-art snapshot for those developments.

Certainly looking forward to more feedback on this from developers.

[lemonzi]

Cool! Chrome for Mac also reports DeviceOrientation. However, the angle is relative to the screen (which is what the spec says), not to the keyboard, so you have to open it at 90 deg. and hold the screen as if it was a tablet with the body facing you for it to work.

[jbouny]

With the same idea (issue 4495), I worked on a MotionControl that can be easily integrated in a scene: https://github.com/jbouny/motioncontrols

One other thing that will arrive one day, is screen.lockOrientation: http://www.w3.org/TR/screen-orientation/
With something like this, we can really hope the possibility to build complete applications by having control of the device and the view management.

[mrdoob]

One other thing that will arrive one day, is screen.lockOrientation: http://www.w3.org/TR/screen-orientation/

Oh true... I forgot about that. I always have the orientation thing disabled but I forgot that it's enabled by default :S

[richtr]

Hi @jbouny. I really like this particularly the way you attempt to re-wire the device orientation axis' as screen orientation changes (so no particular compensation is needed on the part of developers).

I demonstrated an alternate way developers can compensate for screen orientation changes in the provided demo (by rotating the canvas by -window.orientation. see: https://github.com/mrdoob/three.js/blob/dev/examples/misc_controls_deviceorientation.html#L98-L107)

Perhaps we could adopt your work in #4495 on compensating for screen orientation changes directly in DeviceOrientationControls.js rather than always having to relying on developers implementing such a canvas element rotation hack for this?

[jbouny]

Thanks @richtr! Yep, I tried to simplify the use of the control for developers without specific actions.

It's also a nice idea to rotate the canvas. I will try to test the integration of some elements inside your work as soon as possible.

I hope and think we can build a robust and simple solution! (Need to see 'devicemotion' event you are right)

[zz85]

@richtr misc_controls_deviceorientation.html is crashing mobile safari (ios7, ipad mini) constantly for me. anyone else facing this issue?

[richtr]

Updated pull-request @ #4558.

@zz85 I can recreate this issue but I cannot seem to locate the cause. Any ideas?

[zz85]

@richtr sorry would love to look into this, but i don't have the time right now. could you load up the controls with an empty scene to check if that crashes the browser? otherwise, it could be the panorama taking up too much memory...

[jonobr1]

The latest example currently does not work well in Firefox for Android. I started a commit to try to solve this problem.., but ran into a wall. You can try the misc_controls_deviceorientation example with my patch here.

It's better than what currently exists because it takes into account the lack of window.orientation and converts window.screen.orientation into a format that's useful to THREE.DeviceOrientationControls. But viewing the demo in landscape in Firefox and looking above the horizon line flips the image about the x-axis.

I did some light research. When you rotate your phone in landscape to look from the floor to the ceiling Chrome and Firefox behave differently:

• Chrome's alpha changes as you rotate the phone (despite rotating in a way that wouldn't "affect" alpha).
• Firefox's alpha stays relatively the same. This behavior is not beneficial for how THREE.DeviceOrientationControls currently works.

Someone else seems to have found this difference as well. I however don't know enough about deviceorientation, accelerometers, or gyroscopes to know if this is related.