Drei 提供了一组有用的控件来在场景中导航和与对象交互。让我们来了解一下它们。

轨道控件

在之前的课程中，我们已经使用过 OrbitControls 组件在场景中导航。

虽然我们在没有任何 props 的情况下使用它，但它提供了一些有用的选项来定制其行为。

首先，你可以选择启用或禁用以下功能的布尔 props：

• enableZoom
• enableRotate
• enablePan

例如，如果你的体验是基于滚动的，你可以禁用缩放，以防止用户使用鼠标滚轮时发生冲突。

然后，你可以通过以下方式更改控件的速度：

• zoomSpeed
• rotateSpeed
• panSpeed

最后，你可以更改缩放的最小值和最大值：

• minZoom
• maxZoom

...顶部和底部旋转：

• minPolarAngle
• maxPolarAngle

...左右旋转：

• minAzimuthAngle
• maxAzimuthAngle

...和平移：

• minDistance
• maxDistance

如果你运行起始项目，你会发现我们可以到达一些看起来有问题的位置。 (比如穿过地面，穿过 mesh，平移后不显示灯塔等)

让我们结合一些这些 props 来创建一个更受限制的体验：

Copy
<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

看看现在摄像机如何被限制为始终以一种吸引人的方式展示灯塔。它可以防止用户透视对象和看到地下。

这些小细节可以为你的体验质量带来重大差异。

由于 drei 组件 只是 three.js 中 OrbitControls 类的一个包装器，请查看 three.js 文档 来了解所有可用的 props。

Presentation Controls

PresentationControls 与 OrbitControls 不同之处在于它与包装对象的内容交互，而不是相机。除此之外，它们非常相似。

以下是 drei 文档 中的示例代码