<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js canvas - geometry - earth</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 {
				color: #808080;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #ffffff;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
		<script type="text/javascript" src="../lib/three.min.js"></script>

		<script>

			var container;
			var camera, scene, renderer;
			var earth;
			var radius = 500;

			var mouseX = 0, mouseY = 0, pmouseX = 0, pmouseY = 0;
			var pressX = 0, pressY = 0;

			var dragging = false;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.y = 1200;
				camera.rotation.x = -Math.PI/2;


				scene = new THREE.Scene();

				earth = new THREE.Object3D();
				orbit = new THREE.Object3D();
				
				scene.add( earth );
				scene.add(orbit);

				// earth

				var loader = new THREE.TextureLoader();
				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {

					var geometry = new THREE.SphereGeometry( 100, 20, 20 );

					var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
					var mesh = new THREE.Mesh( geometry, material );
					earth.add( mesh );

				} );
				loader.load('textures/p_1.png', function(texture){
					var mesh = createSpaceRadius(texture, radius);
					orbit.add(mesh);

				});
				earth.position.x = radius;
				earth.position.z = 0;

				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );



				//
				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

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

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

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

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

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function pubrotation(x, z, a){
				x2 = x*Math.cos(a) - z*Math.sin(a);
				z2 = z*Math.cos(a) + x*Math.sin(a);
				return {
					x:x2,
					z:z2
				};
			}
			function createSpaceRadius(guidePointTexture, radius, color ){

				color = color ? color : 0x000000;

				//var width = Math.sqrt(radius) * 0.00001;
				var thickness = radius * 0.0005;
				var textureRepeat = 30;

				var resolution = 180;
				var twoPI = Math.PI * 2;
				var angPerRes = twoPI / resolution;	
				var verts = [];
				for( var i=0; i<twoPI; i+=angPerRes ){
					var x = Math.cos( i ) * 1;
					var y = Math.sin( i ) * 1;
					var v = new THREE.Vector3( x,y,0 );
					verts.push( v );
				}

				var geometry = new THREE.Geometry();
				geometry.vertices = verts;


				var areaOfWindow = window.innerWidth * window.innerHeight;

				//var pointSize = 0.000004 * areaOfWindow;

				var particleMaterial = new THREE.ParticleBasicMaterial( 
					{
						color: color, 
						//size: 1000000, 
						//sizeAttenuation: false, 
						map: guidePointTexture,
						//blending: THREE.AdditiveBlending,
						//depthTest: false,
						//depthWrite: false,
					} 
				);

				var mesh = new THREE.ParticleSystem( geometry, particleMaterial );

				return mesh;
			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - pressX;
				mouseY = event.clientY - pressY;
				//return;
				if(dragging ){
					var pos = pubrotation(camera.position.z, camera.position.y, mouseY / 5000);
					camera.position.z = pos.x;
					camera.position.y = pos.z;
					camera.rotation.x -= mouseY / 5000;
					render();
				}
			}

			function onDocumentMouseDown( event ) {	
			    dragging = true;			   
			    pressX = event.clientX;
			    pressY = event.clientY;
			}	

			function onDocumentMouseUp( event ){
				dragging = false;
				histogramPressed = false;
			  // window.setMinimap(dragging);
			}

			function onDocumentMouseWheel( event ) {

				camera.fov -= event.wheelDeltaY * 0.05;
				camera.updateProjectionMatrix();

				render();

			}


			function render() {


				earth.rotation.y -= 0.05;

				var pos = pubrotation(earth.position.x, earth.position.z, 0.005);
				earth.position.x = pos.x;
				earth.position.z = pos.z;

				//rotateVY += (mouseX - pmouseX) / 2 * Math.PI / 180 * 0.2;
				//rotateVX += (mouseY - pmouseY) / 2 * Math.PI / 180 * 0.2;	

				//camera.rotation.vy += (mouseX - pmouseX) * 0.00005 * camera.position.z / 10000;
				//camera.rotation.vx += (mouseY - pmouseY) * 0.00005 * camera.position.z / 10000;
				
				renderer.render( scene, camera );

			}


		</script>

	</body>
</html>
