React 三纤:TrackballControls 和 OrbitControls 如何切换?
React Three Fiber: How to switch between TrackballControls and OrbitControls?
我正在尝试在 react-three-fiber with react-three/drei 中创建一个查看器,我可以在其中在 OrbitControls
和 TrackballControls
之间切换。
问题是,当从 TrackballControls
切换到 OrbitControls
时,相机旋转的轴发生变化,因为 TrackballControls 在移动时当然会改变向上矢量。
我在 codesandbox 中创建了几个最小的例子来解释我解决这个问题的方法并展示我被困在哪里。
基本案例
这显示了在不同控件类型之间切换的初始尝试:
https://codesandbox.io/s/r3f-camera-controllers-base-neu07
尝试 #1
显然,这并不能正常工作,所以我尝试将向上矢量重置为 (0, 1, 0)
并调用 lookAt()
。这似乎最初有效,因为相机会正确地重新定位自身(这是它应该看起来的样子)。然而,它并没有绕正确的轴旋转,而是以奇怪的弧线移动。看这里:
https://codesandbox.io/s/r3f-camera-controllers-set-up-vector-yps4k
尝试 #2
对于 this question,建议创建一个新相机,我也尝试过,但最终导致了相同的结果。这是我尝试创建一个新相机并将一些值复制到新相机的尝试:
https://codesandbox.io/s/r3f-camera-controllers-reset-camera-3cih0
感谢任何帮助。谢谢!
几天后,我终于想出了一个实现我想要的方法。
我没有尝试删除不同的控件,而是分别启用和禁用它们。如果控件属性发生变化,我可以通过 ref 在两个控件上调用 reset()
函数。为了保留相机位置,我可以在重置控件之前临时存储它。
你可以找到一个例子here。
我正在尝试在 react-three-fiber with react-three/drei 中创建一个查看器,我可以在其中在 OrbitControls
和 TrackballControls
之间切换。
问题是,当从 TrackballControls
切换到 OrbitControls
时,相机旋转的轴发生变化,因为 TrackballControls 在移动时当然会改变向上矢量。
我在 codesandbox 中创建了几个最小的例子来解释我解决这个问题的方法并展示我被困在哪里。
基本案例
这显示了在不同控件类型之间切换的初始尝试:
https://codesandbox.io/s/r3f-camera-controllers-base-neu07
尝试 #1
显然,这并不能正常工作,所以我尝试将向上矢量重置为 (0, 1, 0)
并调用 lookAt()
。这似乎最初有效,因为相机会正确地重新定位自身(这是它应该看起来的样子)。然而,它并没有绕正确的轴旋转,而是以奇怪的弧线移动。看这里:
https://codesandbox.io/s/r3f-camera-controllers-set-up-vector-yps4k
尝试 #2
对于 this question,建议创建一个新相机,我也尝试过,但最终导致了相同的结果。这是我尝试创建一个新相机并将一些值复制到新相机的尝试:
https://codesandbox.io/s/r3f-camera-controllers-reset-camera-3cih0
感谢任何帮助。谢谢!
几天后,我终于想出了一个实现我想要的方法。
我没有尝试删除不同的控件,而是分别启用和禁用它们。如果控件属性发生变化,我可以通过 ref 在两个控件上调用 reset()
函数。为了保留相机位置,我可以在重置控件之前临时存储它。
你可以找到一个例子here。