将相机重新定位到对象并使用lookAt()函数（React three fiber）

Question

我正在尝试在个体随机放置的对象的“缩小”和“放大”视图之间平滑地过渡camera.position和camera.lookAt。定位工作得很好。然而，Lerping lookAt()似乎与传统ThreeJS的其他解决方案（请参见@bovesan的答案here）不兼容，也未被react-three-fiber文档中相关示例所解决（link）。

当缩放超过z轴时，摄像机会翻转，并且在角落处它会非常扭曲。

您可以在此处查看我的进度：https://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js

相关代码位于App.js的第63行：

 useFrame((state) => {
    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();
  });

我花了数小时寻找相关的示例/教程，但没有找到太多。我担心自己没有足够的ThreeJs经验去寻找正确的方向，所以任何方向上的帮助都将不胜感激。

- laffan

Answer 1

任何后来看到这篇文章的人，解决方案已经被@drcmda找到了。你可以在这里找到一个可行的示例：

https://codesandbox.io/s/three-fiber-zoom-to-object-camera-controls-solution-final-sbgx0?file=/src/App.js

这只是对@drcmda实现的camera-controls进行微小改动，使用普通lerping移动相机。它并不完美（例如，在相机控件中过渡时间似乎无法编辑，因此在缩小时会出现奇怪的摆动），但它确实解决了问题。（特别感谢@looeee和@forerunrun的额外帮助。）如果您不想使用另一个库，则@forerunrun在原始线程中的答案也很好用，但我无法对其进行足够的调试以使其可靠。（请参见对话。）

- laffan