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

Question

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!

Please provide enough code so others can better understand or reproduce the problem. — m1k3y3
– m1k3y3, Commented Oct 6, 2021 at 8:05

Cody Bennett · Accepted Answer · 2021-09-29 08:57:15Z

2

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.

https://codesandbox.io/s/three-panorama-v751v

answered Sep 29, 2021 at 8:57

Cody Bennett

7965 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saan Over a year ago

Thanks this is helpful! But this codepen.io/mjurczyk/pen/gOwbMVr was more what I was after! Leaving this here for reference.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related