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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.