demonixis/VRMobileDemo.html

## VRMobileDemo.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<title>VR Sandbox 3D</title>
		<style>
			body {
				margin: 0; padding: 0; overflow: hidden;
			}

			#container {
				width: 100%; height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script src="js/vendors/three.js"></script>
		<script src="js/vendors/StereoEffect.js"></script>
		<script src="js/vendors/DeviceOrientationControls.js"></script>
		<script src="js/vendors/OrbitControls.js"></script>
		<script>
			var renderer,
				camera,
				scene,
				viewController,
				stereoEffect,
				clock,
				container;

			function initialize() {
				// The renderer
				renderer = new THREE.WebGLRenderer();
				renderer.autoClear = false;
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setClearColor(0xffffff, 1);

				// Add the canvas into the DOM
				container = document.getElementById("container");
				container.appendChild(renderer.domElement);

				// The camera
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
				camera.position.set(0, 50, 0);

				// The scene
				scene = new THREE.Scene();

				// This is the needed effect that shows two screens (one per eye)
				stereoEffect = new THREE.StereoEffect(renderer);

				// A clock used for the controllers.
				clock = new THREE.Clock();

				// An orbit controller for PC, it's disabled on mobile devices.
				viewController = new THREE.OrbitControls(camera, renderer.domElement);
				viewController.rotateUp(Math.PI / 4);
				viewController.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);

				// Set the correct size of all this world!
				resize();

				// On mobile we want to use the device orientation
				var onOrientationChanged = function (event) {
					if (!event.alpha) {
						return;
					}

					viewController = new THREE.DeviceOrientationControls(camera, true);
					viewController.connect();
					viewController.update();
					resize();

					window.removeEventListener("deviceorientation", onOrientationChanged);
				};

				window.addEventListener("deviceorientation", onOrientationChanged, false);
				window.addEventListener("resize", resize, false);
			}

			function createScene() {
				// A SphereBox
				var geometry = new THREE.SphereGeometry(1500, 16, 16);
				var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("images/skysphere.jpg") });
				var skysphere = new THREE.Mesh(geometry, material);
				skysphere.scale.x = -1;
				scene.add(skysphere);

				// A light
				var directionalLight = new THREE.DirectionalLight(0x008888, 0.8);
				directionalLight.position.set(0.5, 0.8, 0);
				scene.add(directionalLight);

				// Now it's time to build a small world :-)
				var width = 500,
					depth = 500,
					blockSize = 50;

				// With a ground
				var gMaterial = new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture("images/checker_green.png")
				});

				gMaterial.map.wrapS = THREE.RepeatWrapping;
				gMaterial.map.wrapT = THREE.RepeatWrapping;
				gMaterial.map.repeat.x = 8;
				gMaterial.map.repeat.y = 8;

				var ground = new THREE.Mesh(new THREE.BoxGeometry(width, 1, depth), gMaterial);
				scene.add(ground);

				// And few cubes...
				var geometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize);
				var material = new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture("images/checker_blue.png")
				});

				function random(min, max) {
					return (Math.random() * (max - min) + min);
				}

				for (var i = 0; i < 6; i++) {
					var mesh = new THREE.Mesh(geometry, material);
					mesh.position.x = random(-width / 2 + blockSize, width / 2 - blockSize);
					mesh.position.y = blockSize / 2;
					mesh.position.z = random(-depth / 2 + blockSize, depth / 2 - blockSize);
					mesh.receiveShadow = true;
					mesh.castShadow = true;
					scene.add(mesh);
				}
			}

			function resize() {
				renderer.setSize(window.innerWidth, window.innerHeight);
				stereoEffect.setSize(window.innerWidth, window.innerHeight);
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
			}

			function loop() {
				requestAnimationFrame(loop);
				viewController.update(clock.getDelta());
				stereoEffect.render(scene, camera);
			}

			// Entry point
			window.onload = function () {
				initialize();
				createScene();
				loop();
			};
		</script>
	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
	<title>VR Sandbox 3D</title>
	<style>
	body {
	margin: 0; padding: 0; overflow: hidden;
	}

	#container {
	width: 100%; height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="js/vendors/three.js"></script>
	<script src="js/vendors/StereoEffect.js"></script>
	<script src="js/vendors/DeviceOrientationControls.js"></script>
	<script src="js/vendors/OrbitControls.js"></script>
	<script>
	var renderer,
	camera,
	scene,
	viewController,
	stereoEffect,
	clock,
	container;

	function initialize() {
	// The renderer
	renderer = new THREE.WebGLRenderer();
	renderer.autoClear = false;
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0xffffff, 1);

	// Add the canvas into the DOM
	container = document.getElementById("container");
	container.appendChild(renderer.domElement);

	// The camera
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
	camera.position.set(0, 50, 0);

	// The scene
	scene = new THREE.Scene();

	// This is the needed effect that shows two screens (one per eye)
	stereoEffect = new THREE.StereoEffect(renderer);

	// A clock used for the controllers.
	clock = new THREE.Clock();

	// An orbit controller for PC, it's disabled on mobile devices.
	viewController = new THREE.OrbitControls(camera, renderer.domElement);
	viewController.rotateUp(Math.PI / 4);
	viewController.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);

	// Set the correct size of all this world!
	resize();

	// On mobile we want to use the device orientation
	var onOrientationChanged = function (event) {
	if (!event.alpha) {
	return;
	}

	viewController = new THREE.DeviceOrientationControls(camera, true);
	viewController.connect();
	viewController.update();
	resize();

	window.removeEventListener("deviceorientation", onOrientationChanged);
	};

	window.addEventListener("deviceorientation", onOrientationChanged, false);
	window.addEventListener("resize", resize, false);
	}

	function createScene() {
	// A SphereBox
	var geometry = new THREE.SphereGeometry(1500, 16, 16);
	var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("images/skysphere.jpg") });
	var skysphere = new THREE.Mesh(geometry, material);
	skysphere.scale.x = -1;
	scene.add(skysphere);

	// A light
	var directionalLight = new THREE.DirectionalLight(0x008888, 0.8);
	directionalLight.position.set(0.5, 0.8, 0);
	scene.add(directionalLight);

	// Now it's time to build a small world :-)
	var width = 500,
	depth = 500,
	blockSize = 50;

	// With a ground
	var gMaterial = new THREE.MeshBasicMaterial({
	map: THREE.ImageUtils.loadTexture("images/checker_green.png")
	});

	gMaterial.map.wrapS = THREE.RepeatWrapping;
	gMaterial.map.wrapT = THREE.RepeatWrapping;
	gMaterial.map.repeat.x = 8;
	gMaterial.map.repeat.y = 8;

	var ground = new THREE.Mesh(new THREE.BoxGeometry(width, 1, depth), gMaterial);
	scene.add(ground);

	// And few cubes...
	var geometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize);
	var material = new THREE.MeshBasicMaterial({
	map: THREE.ImageUtils.loadTexture("images/checker_blue.png")
	});

	function random(min, max) {
	return (Math.random() * (max - min) + min);
	}

	for (var i = 0; i < 6; i++) {
	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.x = random(-width / 2 + blockSize, width / 2 - blockSize);
	mesh.position.y = blockSize / 2;
	mesh.position.z = random(-depth / 2 + blockSize, depth / 2 - blockSize);
	mesh.receiveShadow = true;
	mesh.castShadow = true;
	scene.add(mesh);
	}
	}

	function resize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	stereoEffect.setSize(window.innerWidth, window.innerHeight);
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	}

	function loop() {
	requestAnimationFrame(loop);
	viewController.update(clock.getDelta());
	stereoEffect.render(scene, camera);
	}

	// Entry point
	window.onload = function () {
	initialize();
	createScene();
	loop();
	};
	</script>
	</body>
	</html>