step3.html

<!DOCTYPE html>
<html>
	<head>
		<title>WebVR Tutorial: Step 3</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

		<style>
			body {
				margin: 0;
			}

			button {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>

		<button id="startVR">Start VR</button>

		<script src="lib/webvr-polyfill.js"></script>

		<script src="lib/three.min.js"></script>
		<script src="lib/VRControls.js"></script>
		<script src="lib/VREffect.js"></script>

		<script>

			var scene, camera, renderer;
			var controls, effect;
			var vrDisplay;
		
			var numCubes = 100;	// Number of cubes in the scene
			var fieldRange = 1500; // The range in 3D space the cubes will be placed
			var cubes = []; // Array to hold cube meshes

			init();
			animate();

			function init() {

				var material, geometry, mesh;

				// This is your standard three.js set up
				// Create a scene, camera and a renderer
			    scene = new THREE.Scene();
			    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			    renderer = new THREE.WebGLRenderer();
			    document.body.appendChild( renderer.domElement );

			    // Set VR controls
			    controls = new THREE.VRControls( camera );

			    // Apply VR stereo rendering to renderer.
				effect = new THREE.VREffect(renderer);
				effect.setSize(window.innerWidth, window.innerHeight);

				// Look for available VR devices
				navigator.getVRDisplays().then(function(displays) {
  					if (displays.length > 0) {
  						// set vrDisplay variable as the first device
					    vrDisplay = displays[0];
					 }	
				});

			     // Create a bunch of cubes
			    for (var i = 0; i < numCubes; i++) {
			    	
			    	// Standard three.js to create a cube
					// Each cube needs a material and geometry which is used to create a mesh
					material = new THREE.MeshNormalMaterial();
					geometry = new THREE.BoxGeometry( 50, 50, 50 );
					mesh = new THREE.Mesh( geometry, material );

					// Give each cube a random position
					mesh.position.x = (Math.random() * fieldRange) - fieldRange/2;
					mesh.position.y = (Math.random() * fieldRange) - fieldRange/2;
					mesh.position.z = (Math.random() * fieldRange) - fieldRange/2;

					// Add cube to scene
					scene.add(mesh);

					// Add mesh to global array for use later
					cubes.push(mesh);

			    }

			}

		
			// Standard way to run an animation in JS
			// Using requestAnimationFrame
			function animate() {

			    requestAnimationFrame( animate );

			     // Every frame, update each cube's rotation
			    for (var i = 0; i < numCubes; i++) {
			    	cubes[i].rotation.x += 0.01;
					cubes[i].rotation.y += 0.02;
			    }

			    // Controls need updating every frame
			    controls.update();

			    // Render the scene
			    effect.render( scene, camera );

			}

			// Resize the renderer canvas
			function onResize() {
			  effect.setSize(window.innerWidth, window.innerHeight);
			  camera.aspect = window.innerWidth / window.innerHeight;
			  camera.updateProjectionMatrix();
			}

			// Start the VR if button is clicked
			document.querySelector('#startVR').addEventListener('click', function() {
			  vrDisplay.requestPresent([{source: renderer.domElement}]);
			});

			// Resize the renderer canvas when going in or out of VR mode
			window.addEventListener('vrdisplaypresentchange', onResize);

			// Resize the renderer canvas if the browser window size changes
			window.addEventListener('resize', onResize);


		</script>

	</body>

</html>