DeviceOrientationCamera not working on my basic example but runs fine in playground

Questions
1

vs html:

    <title>DeviceOrientationCamera test</title>

    <!-- Babylon.js -->
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>    
    <script src="./layama.scene.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<canvas id="renderCanvas"></canvas>
<script>                             
    var canvas = document.getElementById("renderCanvas");
    canvas.setAttribute("touch-action", "none");      
    
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        
        // This creates and positions a device orientation camera 	
        var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 0, 0), scene);
        
        // This targets the camera to scene origin
        camera.setTarget(new BABYLON.Vector3(10, 0, 0));
        
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);      
        camera.angularSensibility = 10000;
        camera.moveSensibility = 10000;
            
        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        
        //Materials
        var redMat = new BABYLON.StandardMaterial("red", scene);
        redMat.diffuseColor = new BABYLON.Color3(255, 0, 0);
        redMat.emissiveColor = new BABYLON.Color3(255, 0, 0);
        redMat.specularColor = new BABYLON.Color3(255, 0, 0);
        
        var greenMat = new BABYLON.StandardMaterial("green", scene);
        greenMat.diffuseColor = new BABYLON.Color3(0, 255, 0);
        greenMat.emissiveColor = new BABYLON.Color3(0, 255, 0);
        greenMat.specularColor = new BABYLON.Color3(0, 255, 0);
        
        var blueMat = new BABYLON.StandardMaterial("blue", scene);
        blueMat.diffuseColor = new BABYLON.Color3(0, 0, 255);
        blueMat.emissiveColor = new BABYLON.Color3(0, 0, 255);
        blueMat.specularColor = new BABYLON.Color3(0, 0, 255);
        
        var yellowMat = new BABYLON.StandardMaterial("yellow", scene);
        yellowMat.diffuseColor = new BABYLON.Color3(255, 255, 0);
        yellowMat.emissiveColor = new BABYLON.Color3(255, 255, 0);
        yellowMat.specularColor = new BABYLON.Color3(255, 255, 0);
        
        var orangeMat = new BABYLON.StandardMaterial("orange", scene);
        orangeMat.diffuseColor = new BABYLON.Color3(253, 188, 3);
        orangeMat.emissiveColor = new BABYLON.Color3(253, 188, 3);
        orangeMat.specularColor = new BABYLON.Color3(253, 188, 3);
        
        var purpleMat = new BABYLON.StandardMaterial("purple", scene);
        purpleMat.diffuseColor = new BABYLON.Color3(255, 0, 255);
        purpleMat.emissiveColor = new BABYLON.Color3(255, 0, 255);
        purpleMat.specularColor = new BABYLON.Color3(255, 0, 255);
        
        // Shapes
        var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 5}, scene);
        box1.position = new BABYLON.Vector3(0, 0, 10);
        box1.material = redMat;
        
        var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 5}, scene);
        box1.position = new BABYLON.Vector3(0, 0, -10);
        box1.material = greenMat;
        
        var box3 = BABYLON.MeshBuilder.CreateBox("box3", {size: 5}, scene);
        box3.position = new BABYLON.Vector3(10, 0, 0);
        box3.material = greenMat;
        
        var box4 = BABYLON.MeshBuilder.CreateBox("box4", {size: 5}, scene);
        box4.position = new BABYLON.Vector3(-10, 0, 0);
        box4.material = yellowMat;
        
        var box5 = BABYLON.MeshBuilder.CreateBox("box5", {size: 5}, scene);
        box5.position = new BABYLON.Vector3(0, 10, 0);
        box5.material = orangeMat;
        
        var box6 = BABYLON.MeshBuilder.CreateBox("box6", {size: 5}, scene);
        box6.position = new BABYLON.Vector3(0, -10, 0);
        box6.material = purpleMat;
        
        return scene;
    };
    
    var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true ,autoEnableWebVR:true});
    var scene = createScene();

    engine.runRenderLoop(function () {
        if (scene) {
            scene.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        
    });                         
</script>

Any thought on this?

also a warning is thrown:

[Deprecation] The deviceorientation event is deprecated on insecure origins and will be removed in M76, around July 2019. Event handlers can still be registered but are no longer invoked since M74, around April 2019. See Chrome Platform Status for more details.

Thank you in advance!

2

Weird even the providen example https://www.babylonjs-playground.com/index.html#12WBC#185

Fails to work once is saved to your own server.

3

I think I recently read that you need to run on https to get device orientation to work now (new constraint from browser vendors)

4

For both, me and the guys that decide the standards.

picard-facepalm.jpg895×503 29.6 KB

1 Like