我如何使用 React 三纤或threejs 推拉或缩放？

Question

我有一个react-three-fiber 应用程序，我使用OrbitControls 作为我的相机控件。

我想使用屏幕上的按钮手动放大/缩小，但我的代码无法正常工作。

我希望这些按钮的工作方式与鼠标中键与OrbitControls 的工作方式相同。 有人如何使用React 来完成这项工作吗？

我尝试使用 useThree() 挂钩更改相机位置，但它没有按我的意愿工作。

谢谢。

Answer 1

当您使用带有OrbitControls 的中间滚轮时，它所做的只是将相机位置乘以某个值。因此，如果您想手动执行此操作，则可以使用以下函数：

function zoom(constant){
    camera.position.x = camera.position.x * constant;
    camera.position.y = camera.position.y * constant;
    camera.position.z = camera.position.z * constant;
}

如果你想放大，更近，那么你传递一个小于一个的值。如果你想缩小，进一步，你传递一个大于一个的值。