title: Reposition camera to object & lookAt() (React three fiber)
body: <p>I am trying to transition <code>camera.position</code> and <code>camera.lookAt</code> smoothly between &quot;zoomed out&quot; and &quot;zoomed in&quot; views of individual, randomly placed objects.</p>
  <p>The positioning works great. Lerping the <code>lookAt()</code>, however, doesn't seem to be playing nicely with other solutions for traditional ThreeJS ( see @bovesan's answer <a href="https://stackoverflow.com/a/65222248/1156938">here</a>) nor addressed by the relevant example on the react-three-fiber docs (<a href="https://codesandbox.io/s/camera-pan-nsb7f" rel="nofollow noreferrer">link</a>).</p>
  <p>Zooming in past the z axis flips the camera around, and at the corners it's wildly distored.</p>
  <p>You can see my progress here : <a href="https://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js</a></p>
  <p>With the relevant bit of code being in <code>App.js</code> on line 63 :</p>
  <pre class="lang-js prettyprint-override"><code> useFrame((state) =&gt; {
      const step = 0.05;
  
      // `focus` is a state variable that sends a Vec3 of the objects position
      zoom ? vec.set(focus.x, focus.y, focus.z + 0.2) : vec.set(0, 0, 5);
  
      // HERE, looking for a way to lerp camera lookAt in a way that can toggle.
      state.camera.lookAt(0, 0, 0);
      state.camera.position.lerp(vec, step);
  
      state.camera.updateProjectionMatrix();
    });
  
  </code></pre>
  <p>I've spent hours looking for relevant examples/tutorials, but haven't come up with much. I'm afraid I don't have enough ThreeJs experience to be looking in the right direction, though, so any help in any direction would be most welcome.</p>