How can I rotate my camera by dragging?

Questions
1

Hi,

I am trying to create a situation where the camera is fixed and you can rotate the view by dragging your mouse. The object I’m working with is a room and I want to be able to look around while keeping the cursor enabled.

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!

Kind regards,

3

You should be able to get the fixed (first-person) camera by placing the target close to the camera - something like this.

2 Likes
4

Here is a react-three-fiber implementation for anyone coming to this in the future.

const ModOrbit = () => {
  const controls = useRef();
  const forward = useMemo(() => new THREE.Vector3(), []);

  useFrame((state, delta) => {
    state.camera.getWorldDirection(forward);
    controls.current.target.copy(state.camera.position).add(forward);
    
  });

  return <OrbitControls ref={controls} />;
};

(apologies for reviving a dead post, just thought it would be helpful :slight_smile: )