CameraControls as first person camera

Questions
1

I’m having a difficult time trying to make CameraControls act as a first-person camera. I’ve tried following the example in the CameraControls GitHub, but for some reason, the camera never wants to stay stationary; its position always changes, especially on rotation.

I cannot use FirstPersonControls because I cannot restrict the horizontal rotation. Whenever I do, it messes up the camera’s initial position, and I would instead not use PointerLockControls.

const controlsRef = useRef<CameraControls>(null);
  const cameraRef = useRef<PerspectiveCamera>(null);

  useEffect(() => {
    if (controlsRef.current) {
      const controls = controlsRef.current;

      controls.minDistance = 0;
      controls.maxDistance = 0;

      controls.dollyToCursor = false;
      controls.mouseButtons.wheel = 16; // CameraControls.ACTION.ZOOM
      controls.touches.two = 8192; // CameraControls.ACTION.TOUCH_ZOOM_TRUCK

      controls.minPolarAngle = Math.PI / 3;
      controls.maxPolarAngle = (2 * Math.PI) / 3;

      controls.azimuthRotateSpeed = -0.3;
      controls.polarRotateSpeed = -0.3;
      
      controls.saveState();
    }
  }, []);

  useFrame((state) => {
    const delta = state.clock.getDelta();
    const controls = controlsRef.current;
    if (controls) {
      controls.update(delta);
    }
  });

 return (
    <>
      <color attach="background" args={["#0a0a0a"]} />
      <CameraControls camera={cameraRef.current!} ref={controlsRef} />
      <perspectiveCamera ref={cameraRef} position={[0, 2, 5]} fov={75} />
    </>
  );
2

Here fps control but need add limit up and down looking: three.js examples
Or here with limit: https://codepen.io/illuminsi/pen/zYgGYKo

3

Not what I’m looking for thanks though.

4

You may want to have a look at this.