javascript - 如何在 React 三纤维中创建第一人称控制？

Question

我正在尝试创建一种相机固定的情况，您可以通过拖动鼠标围绕 y 或轴旋转视图。

类似于 threejs.org/examples/?q=panorama#webgl_panorama_cube 的东西。但我应该能够在一个物体内移动。

我尝试使用 drei，但只能使用 PointLockControls 和 OrbitControls 成功，这两者都没有帮助，因为您无法使用 PointLockControls 启用光标，并且您无法使用轨道控件修复相机位置。

代码沙箱中的一个小例子会非常有帮助。非常感谢！

score 0 · Accepted Answer

该示例通过禁用 zoom 和 panning OrbitControls来使用相机并将其保持在原位。您还可以通过设置其最小和最大极角来限制 Y 轴的旋转。

Drei 的 OrbitControls接受属性，您可以在其中直接设置这些选项。

<OrbitControls
  enableZoom={false}
  enablePan={false}
  minPolarAngle={Math.PI / 2}
  maxPolarAngle={Math.PI / 2}
/>

这是一个普通的实现，但 API 是相同的。

1 回答 1