theee.js

<!doctype html>
<html>
	<head>
		<title>learningthree.js boiler plate for three.js</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">


		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
		<script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/three.js/Detector.js"></script>
		<script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/trackballcontrols.js"></script>


		<script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/threex/THREEx.screenshot.js"></script>
		<script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/threex/THREEx.FullScreen.js"></script>
		<script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/threex/THREEx.WindowResize.js"></script>
		 <script src="http://netgfx.com/trunk/threejs/boilerplate/vendor/threex.dragpancontrols.js"></script>

		<script src="http://netgfx.com/trunk/threejs/boilerplate/js/TweenMax.js"></script>
		<script src="http://netgfx.com/trunk/threejs/boilerplate/js/jquery-1.8.3.min.js"></script>


		<link  href="http://netgfx.com/trunk/threejs/boilerplate/css/main.css" rel="stylesheet"/>
	</head>
<body>
	<!-- three.js container -->
    	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
		<div class="top">

			<div class="buttons" id="left"><< Left</div>
			<div class="buttons" id="right"> Right >> </div>
			<div class="buttons" id="in">Zoom-In +</div>
			<div class="buttons" id="out">Zoom-Out -</div>


		</div>
		<div class="bottom" id="inlineDoc" >
			- <i>p</i> for screenshot
		</div>
	</div>

	<script type="text/javascript">
		var  scene, renderer;
		var camera, cameraControls, cameraControl;
		var items = new Array();
		var autoRotate = false;

		if( !init() )	animate();

		// init the scene
		function init(){

			if( Detector.webgl ){
				renderer = new THREE.WebGLRenderer({
					antialias		: true,	// to get smoother output
					preserveDrawingBuffer	: true,	// to allow screenshot
					alpha: true
				});
				renderer.setClearColor( 0x000000,1 );
			// uncomment if webgl is required
			//}else{
			//	Detector.addGetWebGLMessage();
			//	return true;
			}else{
				renderer	= new THREE.CanvasRenderer();
			}
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById('container').appendChild(renderer.domElement);


			// create a scene
			scene = new THREE.Scene();

			// put a camera in the scene
			 camera = new THREE.PerspectiveCamera(110, window.innerWidth / window.innerHeight, 1, 10000);
  			 camera.position.z = 350;
     		 camera.position.y = 0;
    		 camera.position.x = 0;
			camera.setViewOffset(window.innerWidth,window.innerHeight,0,-100,window.innerWidth,window.innerHeight);
			scene.add(camera);
			camera.lookAt(scene.position);

			// LIGHT
			var light = new THREE.AmbientLight(0xffaa00);
			light.position.set(0,0,0);
			scene.add(light);

			// create a camera contol
			cameraControls	= new THREE.TrackballControls( camera );
			cameraControls.rotateSpeed = 1.0;
				cameraControls.zoomSpeed = 1.2;
				cameraControls.panSpeed = 0.8;
				cameraControls.noZoom = false;
				cameraControls.noPan = false;
				cameraControls.staticMoving = true;
				cameraControls.dynamicDampingFactor = 0.3;
				cameraControls.keys = [ 65, 83, 68 ];

				window.console.log(cameraControls);
				cameraControls.domElement.addEventListener( 'change', render );

			// transparently support window resize
			THREEx.WindowResize.bind(renderer, camera);
			// allow 'p' to make screenshot
			THREEx.Screenshot.bindKey(renderer);
			// allow 'f' to go fullscreen where this feature is supported
			if( THREEx.FullScreen.available() ){
				THREEx.FullScreen.bindKey();
				document.getElementById('inlineDoc').innerHTML	+= "- <i>f</i> for fullscreen";
			}

			var light = new THREE.PointLight(0xffffff);
			light.position.set(0,0,0);
			scene.add(light);


			// create a small sphere to show position of light
			var Geometry = new THREE.PlaneGeometry(1000, 1000);
			var Material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'assets/images/world-map.jpg' ), overdraw: true } );


			var lightbulb = new THREE.Mesh(Geometry, Material );


			scene.add( lightbulb );
			lightbulb.position = light.position;


			TweenMax.to(camera,8,{fov:85,onUpdate:function(){
				camera.updateProjectionMatrix();
			}});

			///////// EVENT LISTENERS ////////////////

			/// CAMERA CONTROL /////

				$("#left").live('click',function(){
						var theta = 0.1;
						 var x = camera.position.x;
				    	 var z = camera.position.z;

				    	var moveX = x * Math.cos(theta) + z * Math.sin(theta);
				    	var moveZ = z * Math.cos(theta) - x * Math.sin(theta);


				});

				$("#right").live('click',function(){
						 var theta = 0.1;
						 var x = camera.position.x;
				    	 var z = camera.position.z;

				    	var moveX = x * Math.cos(theta) - z * Math.sin(theta);
				    	var moveZ = z * Math.cos(theta) + x * Math.sin(theta);

						TweenMax.to(camera.position,0.5,{x:moveX,z:moveZ,onUpdate:function(){
						camera.updateProjectionMatrix();
						camera.lookAt(scene.position);
					}});
				});

				$("#in").live('click',function(){
						TweenMax.to(camera,0.5,{fov:"-=5",onUpdate:function(){
						camera.updateProjectionMatrix();
					}});
				});

				$("#out").live('click',function(){
						TweenMax.to(camera,0.5,{fov:"+=5",onUpdate:function(){
						camera.updateProjectionMatrix();
					}});
				});

				$("#reset").live('click',function(){
					TweenMax.to(camera,0.2,{fov:85,onUpdate:function(){
						autoRotate = false;
						camera.position.x = 0;
					    camera.position.z = 50;
						camera.lookAt(scene.position);
						camera.updateProjectionMatrix();
					}});

				});

				$("#rotate").live('click',function(){

					autoRotate = true;

				});

		}

		// animation loop
		function animate() {

			if(autoRotate == true){

				_autoRotate();
			}
			camera.updateProjectionMatrix();

			requestAnimationFrame( animate );

			// do the render
			render();


		}

		// render the scene
		function render() {
			// update camera controls
			cameraControls.update();

			// actually render the scene
			renderer.render( scene, camera );
		}

		var radius = 300;
		var theta = 0;
		function _autoRotate(){

			//theta = 0.01 //the speed of rotation

					// rotate camera

				theta += 0.1;

				//camera.position.x = radius * Math.sin( degToRad( theta ) );
				//camera.position.y = radius * Math.sin( degToRad( theta ) );
				//camera.position.z = radius * Math.cos( degToRad( theta ) );
				//camera.lookAt( scene.position );

				for(var i =0;i<items.length;i++){
					items[i].rotation.y -= 0.005;
					items[i].children[0].rotation.y -= 0.005;
					//items[i].position.x = radius * Math.sin( degToRad( theta ) );
				}

				camera.updateMatrixWorld();
				    /*var x = camera.position.x;
				    var z = camera.position.z;

				    camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
				    camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
				    camera.lookAt(scene.position);*/
		}

		function degToRad(degrees){
			return degrees * (Math.PI / 180);
		}

		function hoverOver(event){
			console.log('hovered');
		}

		function overlook(input){


			console.log(items[2].rotation);
			camera.updateMatrixWorld();

			render();
		}

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