Looking for the right pattern for the camera.lookAt() use.

examples/canvas_camera_orthographic.html

@@ -25,6 +25,7 @@
 
 			var container, stats;
 			var camera, scene, renderer;
+			var center = new THREE.Vector3();
 
 			init();
 			animate();
@@ -42,11 +43,10 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
 				container.appendChild( info );
 
-				camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
+				camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
 				camera.position.x = 200;
 				camera.position.y = 100;
 				camera.position.z = 200;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -137,6 +137,7 @@
 
 				camera.position.x = Math.cos( timer ) * 200;
 				camera.position.z = Math.sin( timer ) * 200;
+				camera.lookAt( center );
 
 				renderer.render( scene, camera );
 

examples/canvas_geometry_earth.html

@@ -45,7 +45,7 @@
 
 			var camera, scene, renderer;
 
-			var mesh;
+			var mesh, center = new THREE.Vector3();
 
 			var mouseX = 0, mouseY = 0;
 
@@ -110,7 +110,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
-				camera.lookAt( mesh.position );
+				camera.lookAt( center );
 
 				mesh.rotation.y -= 0.005;
 

examples/canvas_geometry_hierarchy.html

@@ -27,7 +27,7 @@
 
 			var camera, scene, renderer;
 
-			var geometry, group;
+			var geometry, group, center = new THREE.Vector3();
 
 			var mouseX = 0, mouseY = 0;
 
@@ -107,7 +107,7 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-				camera.lookAt( group.position );
+				camera.lookAt( center );
 
 				group.rotation.x = Math.sin( new Date().getTime() * 0.0007 ) * 0.5;
 				group.rotation.y = Math.sin( new Date().getTime() * 0.0003 ) * 0.5;

examples/misc_lookat.html

@@ -44,6 +44,8 @@
 
 			var mesh, zmesh, lightMesh, geometry, sphere;
 
+			var center = new THREE.Vector3();
+
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -60,9 +62,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 3200;
-				camera.useTarget = true;
 
 				scene = new THREE.Scene();
 
@@ -120,9 +121,6 @@
 
 			function render() {
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
 				var time = new Date().getTime() * 0.0005;
 
 				sphere.position.x = Math.sin( time * 0.7 ) * 2000;
@@ -135,6 +133,10 @@
 
 				}
 
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( center );
+
 				renderer.render( scene, camera );
 
 			}