bradfordbarr · September 5, 2011 04:37
diff --git a/camera.html b/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>