Drei provides a set of useful controls to navigate in your scene and interact with objects. Let's discover them.

Orbit Controls

We already used the OrbitControls component in the previous lessons to navigate in our scene.

While we used it without any props, it provides useful options to customize its behavior.

First, you can decided to enable or disable features the following boolean props:

• enableZoom
• enableRotate
• enablePan

For example your experience is scroll based, you can disable the zoom to prevent conflicts when the user uses mouse wheel.

Then, you can change the speed of the controls with the:

• zoomSpeed
• rotateSpeed
• panSpeed

Finally, you can change the minimum and maximum values for the zoom:

• minZoom
• maxZoom

...the top and bottom rotations:

• minPolarAngle
• maxPolarAngle

...the left and right rotations:

• minAzimuthAngle
• maxAzimuthAngle

...and the pan with:

• minDistance
• maxDistance

If you run the starter project, you can see we can reach positions that look buggy. (below the ground, through the mesh, pan to not show the lighthouse, etc.)

Let's combine some of these props to create a more constrained experience:

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

See how the camera is now limited to always show the lighthouse in an appealing way. It prevents the user to see through objects and below the ground.

Those small details can make a big difference in the quality of your experiences.

As the drei component is just a wrapper around the OrbitControls class from three.js check the three.js documentation to see all the available props.

Presentation Controls

PresentationControls in opposition to OrbitControls interact with the content of the wrapper objects, not the camera. Other than that, they are very similar.

Here is the sample code from the drei documentation