VR using spherical image and three.js

HTML

<script src="https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/js/threejs/three-r77.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/js/threejs/StereoEffect.js"></script>
<script src="	 https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/js/threejs/OrbitControls.js"></script>
<script src="	 https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/js/threejs/DeviceOrientationControls.js"></script>
<div id="vr-container"></div>

CSS

body {
  margin: 0px;
  overflow: hidden;
}

#vr-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

</style>< !-- This is required for iOS --><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>

JavaScript

//Derived from http://vr.chromeexperiments.com/cardboard.zip
//Adapted to show a spherical photo

//IMPORATANT : DEVICE ORIENTATION CONTROL DOESN'T WORK ON iOS WITHIN THIS FIDDLE. TO SEE THIS CODE IN ACTION WITH DEVICE CONTROL ON iOS VISIT :
//https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/pages/photo-sphere-fiddle/index.html

/**************** SETTINGS *****************/
var photoSphereURL = 'https://s3-eu-west-1.amazonaws.com/publicvrappcodev/share/resources/photo-spheres/detlef-freddy-vrmaster-websummit-dublin-trip-nov2015.jpeg';
/*******************************************/

/****************** GO!! *******************/
init();
animate();
/*******************************************/

var camera, scene, renderer;
var effect, controls;
var element, container;

function init() {
  renderer = new THREE.WebGLRenderer();
  element = renderer.domElement;
  container = document.getElementById('vr-container');
  container.appendChild(element);

  effect = new THREE.StereoEffect(renderer);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(90, 1, 0.001, 10000);
  camera.position.set(0, 10, 0);
  scene.add(camera);

  setupControlls();

  var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1000, 32, 32),
    new THREE.MeshBasicMaterial({
      map: photoSphereTexture()
    }));

  //Make sphere visible from the inside.
  sphere.scale.x = -1;

  // Rotate sphere so that the texture is centered in the starting position of the camera
  sphere.rotation.y += 90 * Math.PI / 180;

  scene.add(sphere);

  window.addEventListener('resize', resize, false);
  setTimeout(resize, 0);
}

function setupControlls() {
  controls = new THREE.OrbitControls(camera, element);
  controls.rotateUp(Math.PI / 4);
  controls.target.set(
    camera.position.x + 0.1,
    camera.position.y,
    camera.position.z
  );
  controls.noZoom = true;
  controls.noPan = true;

  //This function is called when a device orientation update is received.
  //Receiving an...