step1.html

<!DOCTYPE html>

<html>
	<head>
		<title>WebVR Tutorial: Step 1</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;
			}
		</style>
	</head>
	<body>

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

		<script>

			var scene, camera, renderer;
		
			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();
			    renderer.setSize( window.innerWidth, window.innerHeight );
			    document.body.appendChild( renderer.domElement );

			    // 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;
			    }

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

			}

		</script>

	</body>

</html>