将相机重新定位到对象和lookAt（）（反应三纤维）答案

【问题标题】：Reposition camera to object & lookAt() (React three fiber)将相机重新定位到对象和lookAt（）（反应三纤维）
【发布时间】：2021-10-16 21:39:15
【问题描述】：

我正在尝试在单个随机放置的对象的“缩小”和“放大”视图之间平滑过渡 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

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

 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 经验来寻找正确的方向，所以任何方向的任何帮助都将受到欢迎。

【问题讨论】：

标签： javascript reactjs three.js 3d react-three-fiber

【解决方案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 在the original thread 中的回答也很有效，但我无法对其进行足够的调试以使其可靠。（见convo。）

【讨论】：