solved how to enable touch panning for ArcRotateCamera

[lhx880619]

Are there any way to enable touch panning for ArcRotateCamera?

now we have 1 finger rotate,2 finger zoom,maybe 3 finger for panning?

[max123]

rotating IS kind of panning for ArcRotateCamera if you've got your target set. The name ArcRotateCamera is a bit of a mouthful, I agree - it's easier to think about it as an orbit camera

[lhx880619]

@max123 you can still do that with CTRL+MouseLeftClick to panning on pc,  jsut want to find a way to enable panning on touch device  the same as pc.

[davrous]

Hi!

The problem to enable the panning on touch is to find the right gesture to do it. Edge/IE11 has a built-in gesture recognizer we may use but it won't work on other browsers. Generally speaking, gesture recognizion are patented so we can't reverse-engineer them. 

Still, we could potentially detect a more or less horizontal move using 3 fingers as you said. Something we should maybe consider @Deltakosh ?

[GameMonetize]

Why not:) If someone wants to step in  We have some gestures already in the TouchCamera (like head down with two fingers)

[lhx880619]

@davrous how do you think if we just add a parameter to switch between rotate and panning for one finger move. user can hit a button to switch the mode. i think that's may much easier for user than 3 finger.

[davrous]

Yes, this is probably the most simple & efficient way to do it.

I would suggest to add a boolean exposed in the ArcRotateCamera to influence this test: https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L97 in order to pan or rotate based on the boolean/button pressed. 

[lhx880619]

@davrous already changed the default input(add mode) to support mode switch

 

var panningMode =
                    _this.mode == "panning" ||
                    (evt.ctrlKey && _this.camera._useCtrlForPanning) ||
                    (!_this.camera._useCtrlForPanning && _this._isPanClick);
                if ( _this.panningSensibility !== 0 && panningMode ) {
                    _this.camera
                        .inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / _this.panningSensibility;
                    _this.camera
                        .inertialPanningY += (evt.clientY - cacheSoloPointer.y) / _this.panningSensibility;
                }

 

[Kjue]

This was very easy to adapt from what @davrous mentioned. I suggest to implement a physically connected touch interface so that each physical connection gets a screen mapped point in 3D space from picked coordinates. The interface would simply move the picked points to match the finger positions as best as possible. This makes for a very intuitive interface, as the model stays under the connected styli/fingers directly. Zooming, panning and even 3D rotations come out of the box. For rotation I would lock the up vector, and just rotate accordingly. Below is the panning code.

https://www.babylonjs-playground.com/#C2ZGCJ#1

[Steffen]

Is this boolean flag already implemented? I can't find the code piece mentioned by @lhx880619.

Also setting "mySceneCam._isPanClick = true" has no effect on mobile.

Thanks 

[GameMonetize]

it is already implemented. Just call camera.attachControl with the right parameter:http://doc.babylonjs.com/classes/3.0/arcrotatecamera#attachcontrol-element-nopreventdefault-usectrlforpanning-panningmousebutton-rarr-void

 

(note that you can also pan with two fingers on mobile / touch devices)

[Steffen]

Now it works. Thanks @Deltakosh

I was irritated by the fourth argument "panningMouseButton" because it is a number.

Maybe for the others: the two fingers pan on mobile/touch is available in the current v3.1-alpha  -- not in the stable v3.0.

 

Thanks again for the fast answer!