One finger Panning on touch devices (Orbitcontrols)

Questions
#1

Hi,

I have a web application where I have to display a 2D floor plan with an Orthographic camera. I have added the OrbitControls to my app and everything works fine on PC browsers.

On mobile devices, the 2 finger pinch zoom works fine for me but the default behaviour for panning seems to be with a 2 finger swipe. Instead, if I need to enable 1 finger panning on OrbitControls do I have to change the source code of OrbitControls? (I am fine to do this). Or is OrbitControls not the way to go here and maybe I need to build this from scratch?

Please let me know of a viable solution in this case.

Any help would be appreciated.

Thanks
Srinivas

1 Like
#2

Configure OrbitControls like so:

controls = new OrbitControls( camera, renderer.domElement );
controls.touches.ONE = THREE.TOUCH.PAN;
controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;

This will enabled one finger pan and two fingers dolly/rotate.

Live demo: https://jsfiddle.net/pf5Lm4e9/7/show

3 Likes
#3

Great. This totally works!

Thanks Michael.

1 Like
#4

Hi Michael,

A related question, in the fiddle (https://jsfiddle.net/pf5Lm4e9/7/show) that you mentioned yesterday I can pan both in X and Y direction (mouse panning). You seem to be using three.js version r119.1.

But, when I run the same fiddle with an older version of three.js i.e r112.1, the panning happens only in the X direction with OrbitControls.
https://jsfiddle.net/srinivasprabhu794/msd81taj/4/

Was there some known bug that was fixed in the later version of Three.js? After a while of meddling around with the code, I was able to fix this by setting the camera up vector to (0.0,0.0,1.0) which does not seem intuitive to me at the moment but does the job. (https://jsfiddle.net/srinivasprabhu794/msd81taj/6/).

Is this the right way to fix this issue? I don’t want to move my whole codebase, but I am fine to upgrade only OrbitControls if needed.

Please let me know what could be done in this case.

Thanks
Srinivas

#5

Hi,

Please let me know if this is a known issue

#6

With r118, the default value of OrbitControls.screenSpacePanning has changed. It is now true . Does setting it to false solve your issue? https://jsfiddle.net/a3k0oyd9/

1 Like
#7

Setting screenSpacePanning to true in r112 solved the issue. Maybe you meant the opposite?
https://jsfiddle.net/ohw4qpu1/3/

#8

Oh sorry. If you have to use r112, you have to change this value in order to replicate the latest behavior.

1 Like
#9

Great Michael. :wink: Thanks man.

1 Like
#10

Is there a way to invert this to…? Simply changing the state doesn’t work.

controls.touches.ONE = THREE.TOUCH.DOLLY_ROTATE;
controls.touches.TWO = THREE.TOUCH.PAN;

#11

Dolly_* can’t be configured for touches.ONE. I don’ think this makes sense anyway.

#12

Thank you for your response.

Is there another way to achieve the same behaviour with one finger gesture? …a simple camera rotation… because TOUCH.ROTATE is rotating the scene.