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

5 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.

13

Hello Mugen 87! is it possible to set the scroll on controls.touches.ONE? If it is not possible, what way do I have to scroll the page with one finger? ty.