Camera control on phone not working for babylonjs vr

Question

I can't manage to get the camera control to work on a phone using babylon defaultVRExperience

I can't understand what's missing. i've tried everything i can think of and i can't find any examples that work outside of the babylonjs playground.

Example of it working perfectly in babylon playground with just a few lines of code: https://www.babylonjs-playground.com/#VIGXA3#38

Example of same code not working outside of babylon: http://jsfiddle.net/dr3k5oqb/

Here's an example with some stuff i found in an article about making vr stuff for phones with babylon.. not working either: https://jsfiddle.net/2cdLw0tk/2/

Phone: A one+ 5 with oxygenOS 9.0.9

Browser: Chrome Version 79.0.3945.93

Literally any help would be greatly appreciated...

Answer 1

I assume that you are using iphone safari.

The story is that Apple is preparing to introduce a new security/privacy setting to prevent sites from being able to access a device’s accelerometer and gyroscope, which means some of those VR/AR items you come across online probably won’t work quite as well until you give express permission to do so. full article

In order to use vr we should ask users to allow access to motion and orientation by using this code:

function onClick() 
{
    if (typeof DeviceMotionEvent.requestPermission === 'function') 
    {
        DeviceMotionEvent.requestPermission()
        .then(permissionState => {
            if (permissionState === 'granted') 
            {
                // DeviceMotionEvent.requestPermission() has been granted
            }
        })
        .catch(console.error);
       }
}

Here is jsfiddle the babylon iphone working vr example outside the playground.

Open this demo link in your phone

Answer 2

Chrome v76 and forward has removed usage of DeviceMotionEvent for http, meaning that vr accelerometer control for chrome only works when using https

Source: https://www.chromestatus.com/feature/5688035094036480

This can be confirmed by just switching my example links to https and they start working on chrome on my phone.

Mudin's answer could be good to look at if you want to support safari.