1

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!

saan
  • 13
  • 1
  • 6
  • You could always take a look at : https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=%40react-three%2Ffiber&refinementList%5Bnpm_dependencies.dependency%5D%5B1%5D=%40react-three%2Fdrei&page=1&configure%5BhitsPerPage%5D=12&query=camera – codeanjero Sep 28 '21 at 19:43
  • Please provide enough code so others can better understand or reproduce the problem. – m1k3y3 Oct 06 '21 at 08:05

1 Answers1

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.

Cody Bennett
  • 766
  • 5
  • 10
  • Thanks this is helpful! But this https://codepen.io/mjurczyk/pen/gOwbMVr was more what I was after! Leaving this here for reference. – saan Sep 30 '21 at 13:10