title: How To Animate Camera.lookAt using Three JS
body: <p>I have a scene which renders a board with several objects. Clicking on one of the objects and by use of object picking I can get the object and animate the cameras position to sit in an 'overhead' view of the object. Then using the camera.lookAt method I can force the camera to look directly at the object.</p>
  <p>I am noticing a quick jump at the start of my animation when calling camera.lookAt within the onUpdate method as it initially has a large distance to rotate to look at the object selected. Each subsequent call to camera.lookAt is tiny in comparison and is animated nicely.</p>
  <pre class="lang-js prettyprint-override"><code>// Position the camera to fit
  var tween = new TWEEN.Tween(camera.position).to({
      x: selectedObject.position.x,
      y: selectedObject.position.y,
      z: 1
  }).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function() {
      camera.lookAt(selectedObject.position);
  }).onComplete(function() {
      camera.lookAt(selectedObject.position);
  }).start();
  </code></pre>
  <p>Is there any way to animate the method or will I have to manually transform the matrix values of the camera to look at my selected object?</p>
  <p>Here is a fiddle with an example. It uses WebGLRenderer so please use a suitable browser.</p>
  <p><a href="http://jsfiddle.net/fungus1487/SMLwa/" rel="nofollow noreferrer">http://jsfiddle.net/fungus1487/SMLwa/</a></p>
  <p>Thanks for any help.</p>