Search code examples
javascriptreactjsthree.jsreact-three-fiberdrei

How can I create first person controls in react three fiber?

I am trying to create a situation where the camera is fixed and you can rotate the view around the y or axis by dragging your mouse.

Something similar to threejs.org/examples/?q=panorama#webgl_panorama_cube . But I should be able to manouvre within an object.

I tried using drei but could only succeed with PointLockControls and OrbitControls which are both not helpful since you cannot enable the cursor with PointLockControls and you cannot fix the camera position with orbit controls.

A small example in codesandbox would be super helpful. Thanks a lot!

Solution

  • That example uses OrbitControls and keeps the camera in place by disabling zoom and panning. You can also restrict rotation to the Y axis by setting its min and max polar angles.

    Drei's OrbitControls accepts properties, where you can directly set these options.

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

    This is a vanilla implementation, but the API is the same.