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

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.