VR using spherical image and three.js

by Freddy Snijder

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...