bradfordbarr/camera.html

## camera.html
<!DOCTYPE html>
<html>
	<head>
		<title>Camera movement test | Threejs</title>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript" src="RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="Stats.js"></script>
		<script type="text/javascript" src="Three.js"></script>

		<script type="text/javascript">
		var x = 0;
		    origin = new THREE.Vector3(0, 0, 0),
		    camera = null,
		    scene = null,
		    renderer = null,
		    stats = null,
		    sphere = null,
		    point = null;

		init();
		animate();

		function init() {
			var material = new THREE.MeshBasicMaterial({color:0xcc0000,opacity:.5}),
			    program = function (context) {
				var PI2 = Math.PI * 2;

				context.beginPath();
				context.arc(0, 0, 3, 0, PI2, true);
				context.closePath();
				context.fill();
			    };


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


			// Set up the renderer
			renderer = new THREE.CanvasRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.getElementById('container').appendChild(renderer.domElement);

			// Set up the scene
			scene = new THREE.Scene();

			// Add our globe
			sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material);
			sphere.position.x = 0;
			sphere.position.y = 0;
			sphere.position.z = 0;
			scene.addChild(sphere);

			// Add a point over Washington DC (my city)
			point = new THREE.Particle(new THREE.ParticleCanvasMaterial({color: 0xF66312, program: program}));
			point.position.x = -79.63852123903702;
			point.position.y = 65.92898977682889;
			point.position.z = 18.332327780896797;
			scene.addChild(point);

			// Set up the camera
			camera = new THREE.Camera(45, (window.innerWidth/window.innerHeight), 0.1, 500, sphere);
			camera.position.z = 300;

			/**
			 * When I set the 'useTarget' flag to false the 'lookAt' method of the camera no longer
			 * works as intended.
			 */
			camera.useTarget = false;

			/**
			 * The issue is here.
			 *
			 * When I set the 'up' vector of the camera (to rotate the view 90 degrees clockwise
			 * about the x axis) the globe rotates half way and then inverts and rotates in
			 * the opposite direction.
			 *
			 * I want to move the camera around the globe so points on the globe can have a
			 * standardized reference point that makes sense to me.
			 *
			 * Aesthetically I'd like to have the globe rotating away from the user.
			 */
			camera.up = new THREE.Vector3(0, 0, 1);
		}

		function animate() {
			requestAnimationFrame(animate);

			render();
			stats.update();
		}

		function render() {
			x += 0.01;

			camera.position.x = 300 * Math.sin(x) * Math.cos(0);
			camera.position.y = 300 * Math.sin(0);
			camera.position.z = 300 * Math.cos(x) * Math.cos(0);

			/**
			 * When the 'useTarget' flag is set to false, this method doesn't work.
			 */
			camera.lookAt(origin);

			renderer.render(scene, camera);
		}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Camera movement test \| Threejs</title>
	</head>
	<body>
	<div id="container"></div>
	<script type="text/javascript" src="RequestAnimationFrame.js"></script>
	<script type="text/javascript" src="Stats.js"></script>
	<script type="text/javascript" src="Three.js"></script>

	<script type="text/javascript">
	var x = 0;
	origin = new THREE.Vector3(0, 0, 0),
	camera = null,
	scene = null,
	renderer = null,
	stats = null,
	sphere = null,
	point = null;

	init();
	animate();

	function init() {
	var material = new THREE.MeshBasicMaterial({color:0xcc0000,opacity:.5}),
	program = function (context) {
	var PI2 = Math.PI * 2;

	context.beginPath();
	context.arc(0, 0, 3, 0, PI2, true);
	context.closePath();
	context.fill();
	};


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


	// Set up the renderer
	renderer = new THREE.CanvasRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.getElementById('container').appendChild(renderer.domElement);

	// Set up the scene
	scene = new THREE.Scene();

	// Add our globe
	sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material);
	sphere.position.x = 0;
	sphere.position.y = 0;
	sphere.position.z = 0;
	scene.addChild(sphere);

	// Add a point over Washington DC (my city)
	point = new THREE.Particle(new THREE.ParticleCanvasMaterial({color: 0xF66312, program: program}));
	point.position.x = -79.63852123903702;
	point.position.y = 65.92898977682889;
	point.position.z = 18.332327780896797;
	scene.addChild(point);

	// Set up the camera
	camera = new THREE.Camera(45, (window.innerWidth/window.innerHeight), 0.1, 500, sphere);
	camera.position.z = 300;

	/**
	* When I set the 'useTarget' flag to false the 'lookAt' method of the camera no longer
	* works as intended.
	*/
	camera.useTarget = false;

	/**
	* The issue is here.
	*
	* When I set the 'up' vector of the camera (to rotate the view 90 degrees clockwise
	* about the x axis) the globe rotates half way and then inverts and rotates in
	* the opposite direction.
	*
	* I want to move the camera around the globe so points on the globe can have a
	* standardized reference point that makes sense to me.
	*
	* Aesthetically I'd like to have the globe rotating away from the user.
	*/
	camera.up = new THREE.Vector3(0, 0, 1);
	}

	function animate() {
	requestAnimationFrame(animate);

	render();
	stats.update();
	}

	function render() {
	x += 0.01;

	camera.position.x = 300 * Math.sin(x) * Math.cos(0);
	camera.position.y = 300 * Math.sin(0);
	camera.position.z = 300 * Math.cos(x) * Math.cos(0);

	/**
	* When the 'useTarget' flag is set to false, this method doesn't work.
	*/
	camera.lookAt(origin);

	renderer.render(scene, camera);
	}
	</script>
	</body>
	</html>