How can I update the target in orbit controls based on camera position to prevent the camera from tilting?

Questions
, , ,
1

Hi I am working on a project where you can move around using wasd controls. Similar to:

However when I move to the cube the camera tilts downwards to the center. I want to solve this by adjusting the target of the orbitcontrols based on the camera position. Any ideas on how to implement this in react-three-fiber?

Thanks!

2

You just have to move the target along with the position.
i updated your code here: r3f-wasd-controls (forked) - CodeSandbox

2 Likes
3

small trick, you don’t need to prop drill controls. just do this:

<OrbitControls makeDefault />

function Foo() {
  // And when you need it anywhere in the component graph ...
  const controls = useThree(state => state.controls)

same goes to your camera rig, there’s a ready-made made component for this in drei so you don’t have to go through all the updating and aspect/ratio boilerplate. It also has the makeDefault prop.

<PerspectiveCamera makeDefault position={[0, 1.6, 5]} fov={70} />

PS. you are using an old, outdated version, the namespace is called “@react-three/fiber”, not “react-three-fiber”

2 Likes
4

Both answers are super helpful. Thanks! :pray: