Jump to content

how to enable touch panning for ArcRotateCamera


Recommended Posts


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 ?

Link to comment
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. 

Link to comment
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 ) {
                        .inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / _this.panningSensibility;
                        .inertialPanningY += (evt.clientY - cacheSoloPointer.y) / _this.panningSensibility;


Link to comment
Share on other sites

  • 3 months later...

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.


Link to comment
Share on other sites

  • 1 month later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...