将相机重新定位到物体并lookAt()（反应三纤维）

Question

我试图在单个随机放置的对象的“缩小”和“放大”视图之间平滑camera.position过渡。camera.lookAt

定位效果很好。然而， LerpinglookAt()似乎并不能很好地与传统 ThreeJS 的其他解决方案配合使用（请参阅此处@bovesan 的答案），也没有通过 React-Three-Fiber 文档（链接）上的相关示例来解决。

放大超过 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 经验来寻找正确的方向，因此非常欢迎任何方向的帮助。

Answer 1

对于后来遇到这种情况的人来说，解决方案是由@drcmda 找到的。

\n

您可以在这里找到一个工作示例：

\n

https://codesandbox.io/s/ Three-Fiber-Zoom-to-object-camera-controls-solution-final-sbgx0?file=/src/App.js

\n

这只是 @drcmda 实现相机控制的一个微小变化，通过正常的 lerping 来移动相机。它\xe2\x80\x99s并不完美（首先，相机控制中的过渡时间\xe2\x80\x99t似乎不可编辑，因此\xe2\x80\x99s会发生一种奇怪的摆动现象，当你\xe2\x80\x99re 缩小）但它确实解决了问题。（非常感谢@looeee 和@forerunrun 提供的额外帮助。）

\n

如果您不想使用其他库，@forerunrun 在原始线程中的答案也可以很好地工作，但我无法对其进行足够的调试以使其可靠。（参见对话。）

\n