lhx880619

how to enable touch panning for ArcRotateCamera

Recommended Posts

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 :)

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

@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;
                }

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.