将相机重新定位到对象和 lookAt()(React 三根光纤)

Question

我正在尝试在"缩小"one_answers"缩小"之间顺利过渡camera.position和camera.lookAt。然后"放大"单个的，随机放置的物体的视图。

定位效果很好。然而，帮助lookAt()似乎并没有很好地与传统三光纤的其他解决方案(见@bovesan的回答在这里)一起发挥作用，也没有在react-three-fiber文档(链接)上的相关示例中解决。

当镜头超过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();
});

我花了几个小时寻找相关的例子/教程，但没有想出很多。不过，我恐怕没有足够的3p经验来寻找正确的方向，所以任何方向的帮助都是非常受欢迎的。

Answer 1

对于任何后来碰巧看到这个的人，解决方案是由@drcmda想出的。

你可以在这里找到一个工作示例:

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

这只是对@drcmda的相机控制实现的一个轻微的改变，使用正常的帮助来移动相机。它并不完美(比如，相机控制中的过渡时间似乎不可编辑，所以当你缩小时，会出现奇怪的摇摆现象)，但它绝对解决了这个问题。(非常感谢@looeee和@forerunrun的额外帮助。)

如果你不想使用另一个库，@forerunrun的答案在原来的线程也工作得很好，但我不能调试它足够可靠。(见康沃变频器。)