如何使用 React three fiber 或 threejs 推拉或缩放？

Question

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

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

我希望这些按钮的工作方式与鼠标中键与 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;
}

如果你想放大，更近，那么你传递一个负数值。如果要缩小，进一步，正值。

如何使用 React three fiber 或 threejs 推拉或缩放？

How do I dolly or zoom using React three fiber or threejs?

three.js

reactjs

react-three-fiber

orbitcontrols

react-three-drei