将相机重新定位到对象 & lookAt() (反应三纤维)
Reposition camera to object & lookAt() (React three fiber)
我正尝试在随机放置的单个对象的“缩小”和“放大”视图之间平滑地过渡 camera.position
和 camera.lookAt
。
定位效果很好。然而,Lerping lookAt()
似乎并不能很好地与传统 ThreeJS 的其他解决方案一起使用(请参阅@bovesan 的回答 ) nor addressed by the relevant example on the react-three-fiber docs (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();
});
我花了几个小时寻找相关的 examples/tutorials,但没有找到太多。不过,恐怕我没有足够的 ThreeJs 经验来寻找正确的方向,因此欢迎任何方向的帮助。
对于后来发生这种情况的任何人,@drcmda 找到了解决方案。
您可以在这里找到一个工作示例:
这只是对@drcmda 的 camera-controls 实现的一个细微改动,使用正常的 lerping 来移动相机。它并不完美(首先,相机控件中的过渡时间似乎不可编辑,所以当你缩小时会发生奇怪的 swing-around 事情)但它确实解决了问题。 (非常感谢@looeee 和@forerunrun 的额外帮助。)
如果您不想使用其他库,@forerunrun 在 the original thread 中的回答也很有效,但我无法对其进行足够的调试以使其可靠。 (见会议。)
我正尝试在随机放置的单个对象的“缩小”和“放大”视图之间平滑地过渡 camera.position
和 camera.lookAt
。
定位效果很好。然而,Lerping lookAt()
似乎并不能很好地与传统 ThreeJS 的其他解决方案一起使用(请参阅@bovesan 的回答
放大超过 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();
});
我花了几个小时寻找相关的 examples/tutorials,但没有找到太多。不过,恐怕我没有足够的 ThreeJs 经验来寻找正确的方向,因此欢迎任何方向的帮助。
对于后来发生这种情况的任何人,@drcmda 找到了解决方案。
您可以在这里找到一个工作示例:
这只是对@drcmda 的 camera-controls 实现的一个细微改动,使用正常的 lerping 来移动相机。它并不完美(首先,相机控件中的过渡时间似乎不可编辑,所以当你缩小时会发生奇怪的 swing-around 事情)但它确实解决了问题。 (非常感谢@looeee 和@forerunrun 的额外帮助。)
如果您不想使用其他库,@forerunrun 在 the original thread 中的回答也很有效,但我无法对其进行足够的调试以使其可靠。 (见会议。)