blueintegral/index.html

## index.html


<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Planck Cosmic Microwave Background</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

		<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

		<script src="http://mrdoob.github.com/three.js/examples/js/effects/AsciiEffect.js"></script>

		<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>

		<script>

			var container, stats;

			var camera, controls, scene, renderer;

			var sphere, plane;

			var start = Date.now();

			init();
			animate();

			function init() {

				var width = window.innerWidth || 2;
				var height = window.innerHeight || 2;

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'Spherical mapping of Planck Cosmic Microwave Background data. Drag to change the view';
				container.appendChild( info );

				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;

				controls = new THREE.TrackballControls( camera );

				scene = new THREE.Scene();


				var earthTexture = new THREE.Texture();
				var loader = new THREE.ImageLoader();

				loader.addEventListener( 'load', function ( event ) {

					earthTexture.image = event.content;
					earthTexture.needsUpdate = true;

				} );

				loader.load( 'moll.jpg' );

				var geometry = new THREE.SphereGeometry( 300, 50, 50 );
				var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );

				sphere = new THREE.Mesh( geometry, material );
				scene.add( sphere );

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( width, height );
				 container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );


				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}


			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {

				var timer = Date.now() - start;

				controls.update();

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>


	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Planck Cosmic Microwave Background</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #f0f0f0;
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>

	<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

	<script src="http://mrdoob.github.com/three.js/examples/js/effects/AsciiEffect.js"></script>

	<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>

	<script>

	var container, stats;

	var camera, controls, scene, renderer;

	var sphere, plane;

	var start = Date.now();

	init();
	animate();

	function init() {

	var width = window.innerWidth \|\| 2;
	var height = window.innerHeight \|\| 2;

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '10px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.innerHTML = 'Spherical mapping of Planck Cosmic Microwave Background data. Drag to change the view';
	container.appendChild( info );

	camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
	camera.position.y = 150;
	camera.position.z = 500;

	controls = new THREE.TrackballControls( camera );

	scene = new THREE.Scene();


	var earthTexture = new THREE.Texture();
	var loader = new THREE.ImageLoader();

	loader.addEventListener( 'load', function ( event ) {

	earthTexture.image = event.content;
	earthTexture.needsUpdate = true;

	} );

	loader.load( 'moll.jpg' );

	var geometry = new THREE.SphereGeometry( 300, 50, 50 );
	var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );

	sphere = new THREE.Mesh( geometry, material );
	scene.add( sphere );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( width, height );
	container.appendChild( renderer.domElement );

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	container.appendChild( stats.domElement );


	window.addEventListener( 'resize', onWindowResize, false );

	}

	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	}


	function animate() {

	requestAnimationFrame( animate );

	render();
	stats.update();

	}

	function render() {

	var timer = Date.now() - start;

	controls.update();

	renderer.render( scene, camera );

	}

	</script>
	</body>
	</html>