Threejs: Rotate sphere

Rotate sphere(globe) to a point(city location) on the sphere itself. Display Coordinates.

by navinleon

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<body>
	<div id="tools">
		<div>
			<form class="form-search">
				<div class="input-prepend">
					<button id="rotate" class="btn btn-info" type="button">Show</button>
					<select id="selectedPoint">
					</select>
				</div>
			</form>
		</div>
		<div class="screen" ></div>
		<div class="sphere" ></div>
		<div class="coord" ></div>
	</div>
	
	<div id="container"></div>
  
</body>

CSS

body {
			color			: #ffffff;
			font-family		: Monospace;
			font-size		: 13px;
			text-align		: center;
			font-weight		: bold;

			background-color: #000000;
			margin			: 0px;
			overflow		: hidden;
		}
		#three{
			position: absolute;
			top		: 0px;
			left	: 0px;
			width	: 100%;
			height	: 100%;
		}

		#tools{
			position	: absolute;
			top			: 0px;
			left		: 0px;
			margin		: 10px;
			width		: 100%;
			z-index		: 1;
			text-align	: left;			
		}
		.coord, .screen, .sphere{
			font-size	: 11px;
			text-align	: left;			
		}

JavaScript

// Please ignore this section. Actual code follows after this section.

// This part includes tween.min.js for animation working with threejs
// tween.js - http://github.com/sole/tween.js
'use strict';var TWEEN=TWEEN||function(){var a=[];return{REVISION:"10",getAll:function(){return a},removeAll:function(){a=[]},add:function(c){a.push(c)},remove:function(c){c=a.indexOf(c);-1!==c&&a.splice(c,1)},update:function(c){if(0===a.length)return!1;for(var b=0,d=a.length,c=void 0!==c?c:void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();b<d;)a[b].update(c)?b++:(a.splice(b,1),d--);return!0}}}();
TWEEN.Tween=function(a){var c={},b={},d={},e=1E3,g=0,i=0,k=null,u=TWEEN.Easing.Linear.None,v=TWEEN.Interpolation.Linear,p=[],q=null,r=!1,s=null,t=null,j;for(j in a)c[j]=parseFloat(a[j],10);this.to=function(a,c){void 0!==c&&(e=c);b=a;return this};this.start=function(e){TWEEN.add(this);r=!1;k=void 0!==e?e:void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();k+=i;for(var f in b){if(b[f]instanceof Array){if(0===b[f].length)continue;b[f]=[a[f]].concat(b[f])}c[f]=
a[f];!1===c[f]instanceof Array&&(c[f]*=1);d[f]=c[f]||0}return this};this.stop=function(){TWEEN.remove(this);return this};this.delay=function(a){i=a;return this};this.repeat=function(a){g=a;return this};this.easing=function(a){u=a;return this};this.interpolation=function(a){v=a;return this};this.chain=function(){p=arguments;return this};this.onStart=function(a){q=a;return this};this.onUpdate=function(a){s=a;return this};this.onComplete=function(a){t=a;return this};this.update=function(n){if(n<k)return!0;
!1===r&&(null!==q&&q.call(a),r=!0);var f=(n-k)/e,f=1<f?1:f,m=u(f),h;for(h in b){var j=c[h]||0,l=b[h];l instanceof Array?a[h]=v(l,m):("string"===typeof l&&(l=j+parseFloat(l,10)),a[h]=j+(l-j)*m)}null!==s&&s.call(a,m);if(1==f)if(0<g){isFinite(g)&&g--;for(h in d)"string"===typeof...