iOS 13 - Device Motion and Orientation Permission

[pmarfany]

Hi!

With the release of iOS 13, the access to the motion and orientation sensors is turned off by default on every browser (Safari, Chrome...).

Unlike iOS 12, where there was an option in the settings to turn it back on, now we have to ask the user for permission when it performs any action (for example, when it clicks the gyroscope button). Here there is a Medium article with an example: https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140

Would it be possible to update this library to support this new spec?

Thanks!

PS: A big thanks to everyone who supports this awesome library!

[mistic100]

@pmarfany Could you try the demo on this branch https://github.com/mistic100/Photo-Sphere-Viewer/tree/motion-permission ?

I don't have a iOS device to test it.

[pmarfany]

Hi @mistic100! Thanks for having a look so quick!

Just a few issues:

I've seen that you've added an event listener (click) to the whole document to request the gyroscope permission with an action (as iOS demands now), but it just seems to fire when the navbar is clicked (not the whole document). Maybe there is a conflict with another listener.

Also, once the permission is granted, the gyroscope will only work after the page is reloaded. After taking a quick look into the code, it seems that the 'DeviceOrientationControls' module checks for the permission just when its initialized.

I've tried the move that initialization (inside Renderer.js) from the "__createScene" method to the "startGyroscopeControl", and it seems to be fixed that way.

I'm no expert in ThreeJS whatsoever, but maybe this can help you :smile:

[mistic100]

I've seen that you've added an event listener (click) to the whole document to request the gyroscope permission with an action (as iOS demands now), but it just seems to fire when the navbar is clicked (not the whole document). Maybe there is a conflict with another listener.

It was a quick and dirty version with minimal changes, but I think I will try to ove te click listener the the viewer instance, in order to avoid interferences when the viewer is used in a larger page.

Also, once the permission is granted, the gyroscope will only work after the page is reloaded. After taking a quick look into the code, it seems that the 'DeviceOrientationControls' module checks for the permission just when its initialized.

I've tried the move that initialization (inside Renderer.js) from the "__createScene" method to the "startGyroscopeControl", and it seems to be fixed that way.

Strange, DeviceOrientationControls makes use of the permission API https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DeviceOrientationControls.js#L66

[pmarfany]

It was a quick and dirty version with minimal changes, but I think I will try to ove te click listener the the viewer instance, in order to avoid interferences when the viewer is used in a larger page.

Cool! 😎

Strange, DeviceOrientationControls makes use of the permission API https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DeviceOrientationControls.js#L66

Yeah, that part is a little weird. The module is trying to request the orientation permission using the API but without any user action. As a result of this, the code fails and does not register the "orientationchange" and "deviceorientation" listeners, so nothing works.

If we execute the connect method after the permission is granted, the permission API doesn't throw an error (as the permission was granted beforehand) and everything works as it should.

[mistic100]

Yeah, that part is a little weird. The module is trying to request the orientation permission using the API but without any user action. As a result of this, the code fails and does not register the "orientationchange" and "deviceorientation" listeners, so nothing works.

If we execute the connect method after the permission is granted, the permission API doesn't throw an error (as the permission was granted beforehand) and everything works as it should.

Yes that makes sense, everything has to be connected to a user input somehow. Thank you.

[mistic100]

@pmarfany can you give another try on the dev branch ?
Gyroscope support is now part of a plugin (new system I am developping for version 4), everything is configured on the equirectangular example.

Thank you for your help.

[pmarfany]

Everything seems to be working fine.

Thank you very much! :smile_cat: