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

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">
    <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">
    <div id="info">
        <a href="" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with
        DeviceOrientation controls.<br />
        photo by <a href="" target="_blank" rel="noopener">Jón
    <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;


        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();

            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);
            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);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            window.addEventListener('resize', onWindowResize, false);

        function animate() {
            camera.lookAt(0, 0, 0);
            renderer.render(scene, camera);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            renderer.setSize(window.innerWidth, window.innerHeight);

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.

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

Yes. More information in this issue:

1 Like

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

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