Issue with auto-panning a scene (Orbit Controls)

Questions
1

Hello,

I’m new to Three.js and started playing around with Orbit Controls to achieve some panning effect on a scene. I got the panning working through using your mouse to drag around the scene; however, I also want to try to auto-pan by animating the camera X and Y position. I added a new THREE.Clock() and tried to animate by doing var time = clock.getElapsedTime() * 0.5; camera.position.x -= time; However, the camera rotates the scene and then doesn’t move. If I animate the camera Z position instead, then it works as intended by moving in the Z direction camera.position.x -= time;

Here is a demo I put together to demonstrate what I mean: https://codesandbox.io/s/gracious-greider-xwshi?fontsize=14&hidenavigation=1&theme=dark

If you comment out line 143 in the index.js file, it animates in the Z direction, but if you comment out line 144 instead, the scene just rotates and doesn’t move. I had to add camera.up.set(0, 0, 1); to get the orbit controls’ panning function to move parallel to the screen, I’m not sure if that’s a factor that messed up the X and Y direction for the camera.

Thank you so much!!! Would love to figure out how to get the X and Y transform of the camera working.

2

When OrbitControls is used, it’s not allowed to modulate the position of the camera manually. Keep in mind that panning works by changing the focus point of OrbitControls which is represented by OrbitControls.target. The controls ensure that the camera is always position with a certain offset to the focus point and looks towards it.

Try to animate OrbitControls.target instead and see how it works.

3

Thank you so much!! I managed to figure it out by updating the controls target!!!

1 Like