Moving on the scene on two axis plane

Hello Everyone!

I am trying to find the best way to move on the scene with the mouse on a two axis plane (x,y).

I have tried with OrbitControls, but if i change the camera.position then apply orbitControls.update(), the scene is rotated.

I just want to move around the scene like PANNING.

Does someone know how to help me please?

Have you considered to just disable orbiting and zooming/dollying?

https://jsfiddle.net/Ln52u7bw/

1 Like

Yes i tried.
Let me explain better this problem.

Img. 1 This is the scene at the begin

Img. 2 I change the camera position (camera.position.x+=3) and that’s perfect. No object rotation.

Img. 3 Then if try to zoom or move around the scene this is the result. The object is rotated. I think that the controls.update() method is called.

How to avoid the situation in the Img. 3 ? And keep the situation as the Img. 2

Thank you a lot.

Sorry, but I’m not sure this makes sense. If you perform orbiting (which is not just a translation but also a rotation), that’s the expected output. If you don’t want that, it’s best to disable orbiting.

Yes i’m sorry. I don’t need to perform orbiting. I only need to translate horizontally and vertically the camera on the scene by using the mouse.

Do you know which is the best way to do that?

How about this setup: https://jsfiddle.net/excju9fm/

The idea is just use panning with screen space panning enabled.

1 Like

Yes, thanks, that’s perfect while i’m moving on the scene with the mouse.

But sometimes i need to change the camera position programmatically.
I do that by modifying the camera.position value, but after that, if a move around the scene with the mouse there is still the problem of the rotation.

I don’t know if i’m explaining well my problem and i’m so sorry for that.

Thank you for your patience.

Are you remembering to change the camera target position too?

1 Like