Trackball controls interaction issues on trouchscreen. (zoom and pan)

[LinkunGao]

Description

Recently I’ve got a threejs trackball controls issue on touch screen.
In the touch screen: the trackball controls default setting is one finger for rotate, two fingers for pan and zoom.
This design is very strange, when I test on my ipad using two fingers, the model will zoom and pan happen together, it makes model hard to control! e.g: if we only want to pan without change the model size, it is hard for users.
Is it possible I can set the two fingers only for zoom, and three fingers for pan?

And look into the code, it seems hard code the number of fingers(only two options):

Reproduction steps

1. open any trackball controls example on trouchscreen

Code

// code goes here

Live example

no

Screenshots

No response

Version

r152

Device

Mobile

Browser

Chrome, Safari

OS

Android, iOS

[LeviPesin]

Maybe related: #24215 (unfortunately reverted)

[Mugen87]

@LinkunGao What do you think about the touch interaction of OrbitControls? Does you see the same issue with this class, too?

[LinkunGao]

Hi @Mugen87 , Just test the OrbitControls, and it meets the same issue with trackballControls. When using two fingers (only can use two, can not customize it) to drag the model on the touch screen, the model will zoom and move at the same time. That causes it hard to focus on some points in the model.

Then go through the OrbitControls code you can see the touch part; although it is more complicated than trackball control, it also limits the user to customize it.

In my thought, is it possible to allow users to customize the fingers function?
E.g, we have a default touch state:

const touch_state = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY, THREE: TOUCH.PAN };

Then, the user can customize the fingers function in different situations when developing.

Actually, this code is from OrbitControls code line 88, but it only has two fingers, and we cannot see these kinds of code in TrackballControl.

// Touch fingers
this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };

I think this.touches should have three attributes is perfect because the threejs have rotate/zoom/pan, and if it has three attributes, it has enough space for users to customize their demands functions. Such as:

const touch_state = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN, THREE: TOUCH.PAN };

And also we can add these codes into TrackballControl (obviously the touchstart part codes' logic also need to do some changes ), which would be super nice for touch screens!
Thanks! : )

[LinkunGao]

You can test/see the issue on https://threejs.org/examples/webgl_decals.html. (use two fingers to move on touch screen).
And on https://threejs.org/examples/webgl_loader_nrrd.html (with two/three fingers move on touch screen.) I tested it on Ipad.

[kchiu1713]

Hi! I'm interested in contributing towards this.

[Mugen87]

There was no more demand so far for three finger touch input in controls classes so let's close the issue until there are more feature requests.

TBH, I personally experienced no issues by myself or clients so far with mapping dolly/zoom and pan to two fingers. This is a common approach in applications (e.g. Google Maps) and it might be more intuitive to stick to this behavior than establish a three-finger policy.