Is it possible to start using DeviceOrientation when launching a webpage?

Questions
1

I have tried to use DeviceOrientation module and it works great with Android. But since iOS needs a permission from the user, I just realized the example uses a button that trigger the permission. However, I have not found how this button triggers this permission alert. I deleted the button from the example and ran the code right away but it doesn’t gives me any permission.

Is there anyway I can accomplish this in iOS? Or am I missing something?

Code modified from example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - controls - deviceorientation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with
        DeviceOrientation controls.<br />
        photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón
            Ragnarsson</a>.
    </div>
    <script type="module">
        import * as THREE from './js/three/build/three.module.js';
        import { DeviceOrientationControls } from './js/three/examples/jsm/controls/DeviceOrientationControls.js';

        var camera, scene, renderer, controls;

        init();
        animate();

        function init() {
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
            camera.position.set(2, 2, 2);
            var box = new THREE.BoxBufferGeometry(1, 1, 1);
            var mat = new THREE.MeshBasicMaterial({
                color: 0xff0000
            })

            var boxMesh = new THREE.Mesh(box, mat);
            controls = new DeviceOrientationControls(boxMesh);

            scene = new THREE.Scene();
            scene.add(boxMesh)

            var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
            // invert the geometry on the x-axis so that all of the faces point inward

            geometry.scale(- 1, 1, 1);
            var material = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('assets/testhdi.jpg')
            });

            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            var helperGeometry = new THREE.BoxBufferGeometry(100, 100, 100, 4, 4, 4);
            var helperMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true });
            var helper = new THREE.Mesh(helperGeometry, helperMaterial);
            scene.add(helper);
            //
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            //
            window.addEventListener('resize', onWindowResize, false);
        }

        function animate() {
            window.requestAnimationFrame(animate);
            camera.lookAt(0, 0, 0);
            controls.update();
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>
2

The example works since it creates the controls right after a user interaction. If this interaction is missing, the permission request won’t pop up. Hence, if you remove the button, it won’t work as expected.

3

So in iOS is mandatory an user interaction in order to use it?

4

Yes. More information in this issue:

1 Like
5

Is it possible to do this with an Alert dialog? Sorry for being kind of annoying, but this is a new area for me

6

Yes, that should be possible. It’s only necessary to create the controls it the confirm event listener.