title: Orbiting around the origin using a device's orientation
body: <p>I am trying to replicate the functionality of Google's Cardboard Demo "Exhibit" with three.js. I took the starting example straight from the <a href="https://vr.chromeexperiments.com/" rel="nofollow noreferrer">Chrome Experiments web page</a> and just dropped in code to draw a simple triangular pyramid in the <code>init</code> method:</p>
  
  <pre><code>function init() {
    renderer = new THREE.WebGLRenderer();
    element = renderer.domElement;
    container = document.getElementById('example');
    container.appendChild(element);
  
    effect = new THREE.StereoEffect(renderer);
  
    scene = new THREE.Scene();
  
    camera = new THREE.PerspectiveCamera(90, 1, 0.001, 700);
    camera.position.set(0, 0, 50);
    scene.add(camera);
  
    controls = new THREE.OrbitControls(camera, element);
    controls.rotateUp(Math.PI / 4);
    controls.noZoom = true;
    controls.noPan = true;
  
    var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
    var material = new THREE.MeshPhongMaterial( { color:0xffffff, shading: THREE.FlatShading } );
  
    var mesh = new THREE.Mesh( geometry, material );
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );
  
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );
  
    light = new THREE.DirectionalLight( 0x002288 );
    light.position.set( -1, -1, -1 );
    scene.add( light );
  
    light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );
  
    function setOrientationControls(e) {
      if (!e.alpha) {
        return;
      }
  
      controls = new THREE.DeviceOrientationControls(camera);
      controls.connect();
      controls.update();
  
      element.addEventListener('click', fullscreen, false);
  
      window.removeEventListener('deviceorientation', setOrientationControls, true);
    }
    window.addEventListener('deviceorientation', setOrientationControls, true);
  
    window.addEventListener('resize', resize, false);
    setTimeout(resize, 1);
  }
  </code></pre>
  
  <p>The <code>OrbitControls</code> method on desktop works perfectly: by dragging with the mouse, the screen orbits around the pyramid. On mobile using <code>DeviceOrientationControls</code> however, this effect is entirely lost and instead the camera moves freely at (0, 0, 0). I tried doing as a <a href="https://stackoverflow.com/questions/33815662/rotating-object-instead-of-camera-with-deviceorientationcontrols">previous question suggested</a> and replacing the <code>camera</code> with <code>scene</code> such that:</p>
  
  <pre><code>controls = new THREE.DeviceOrientationControls(scene);
  </code></pre>
  
  <p>however this does not work at all and nothing moves when the device is rotated. What do I need to change to replicate <code>OrbitControls</code> behavior with the motion captured by <code>DeviceOrientationControls</code>?</p>