Jump to content

Apple Trackpad and the Arc Rotating Camera


Recommended Posts

Dear Forum

I am working on an Apple / Mac computer and i can't get the apple trackpad on my Laptop to work with babylonjs (with pep.js) arc rotaing camera (or any other camera in that sense). Is there a documentation or examples on how to get input of apples trackpad?


Link to comment
Share on other sites

Have you tried using a normal mouse?  I exclusively use an  Apple Track Pad and an ArcRotate caméra for my current project. I had some trouble until I used the correct constructor. 

You could also check the Playgrounds for ArcRotate an see if any of them work with your track pad... then “borrow” their constructor. 

Link to comment
Share on other sites

If the solution is working with a standard mouse and none of the playgrounds are working for you then it is not the constructor.

I would assume it is how the trackpad drivers are interacting with the browser.  I don't think I can be of much help there.  Hopefully, some of the more senior members of this forum will be able to assist in that direction.

However, I have two more things that I would check:

  1. Try a different browser (if you are testing in Safari try in Chrome)
  2. Have a co-worker with a trackpad try to use the same application (this would be to check for company policies configuring the driver oddly)
Link to comment
Share on other sites

  • 1 month later...

Dear Forum

I'm still struggling with touch control over the ArcRotatingCamera.

Pinch Zoom: Works on the iphone, as well as on the Trackpad (touchpad) of my computer, but: It is very slow on the Trackpad . If i change the "camera.pinchDeltaPercentage" value, the pinch speed changes on the iphone, but not on the computer.

Touch panning: Is not working on the iphone, not on the trackpad of my computer


I'm sorry if i miss the obvious, but I'm getting a little desperate.


Does somebody knows a playground example where panning with two fingers is working?


Thanks & all the best,



                        /// ARC ROTATE CAMERA

                                // Parameters: alpha, beta, radius, target position, scene
                                var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 5, new BABYLON.Vector3.Zero, scene);

                                // Positions the camera overwriting alpha, beta, radius  (LeftOrRight,UpOrDown,ForwardOrBackward))
                                camera.setPosition(new BABYLON.Vector3(-1300,0,2700));

                                //set target

                                // This attaches the camera to the canvas, prevent default and tels it what button is used for panning
                                camera.attachControl(canvas, false, true, 2);

                                //limit angle
                                camera.lowerBetaLimit = 0.1;
                                camera.upperBetaLimit = (Math.PI / 2) * 1.1;
                                camera.lowerRadiusLimit = 20;
                                camera.upperRadiusLimit = 4500;

                                //camera.inertia = 1;


                                camera.pinchDeltaPercentage = 0.001;
                                //camera.inertialPanningX = 5;
                                //camera.pinchToPanMaxDistance = 10;
                                //camera.angularSensibilityX = 500;
                                //camera.angularSensibilityY = 5500;
                                //camera.panningSensibility = 10.0;
                                //camera.wheelPrecision = 0.8;
                                //camera.speed = 0.5;
                                //camera.pinchPrecision = 4;
                                //camera.pinchDeltaPercentage = 8.0;

                                //camera.panningInertia = 2;

                                scene.activeCamera = camera;


Link to comment
Share on other sites

@UeliUeli I just remembered that I had enabled three finger drag on my Mac, which also enables three finger panning with the ArcRotateCamera.  You can enable this in System Preferences > Accessibility > Mouse & Trackpad > Trackpad Options.


Select "three finger drag" next to the "Enable dragging" dropdown and select the checkbox.


Afterwards, panning should work.

Link to comment
Share on other sites

that's a great tipp, thank you!! Now i can rotate it with three fingers.


But what i was looking for is a way to pan - on the arc rotating camera this would mean to move the target, right? Sorry if my english was not clear enough..

With this playground i am able to pan with two fingers on my mobile phone (iphone):


Sadly it is not working on the trackpad (touchpad) of my computer.. Maybe i should try to make a custom input to the target of the arc rotating camera - i hope to find time to do that next week.

Link to comment
Share on other sites


  • attachControl(element: HTMLElement, noPreventDefault?: boolean, useCtrlForPanning?: boolean, panningMouseButton?: number): void
  • Overrides Camera.attachControl

    Attached controls to the current camera.


    • element: HTMLElement

      Defines the element the controls should be listened from

    • Optional noPreventDefault: boolean

      Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)

    • Optional useCtrlForPanning: boolean

      Defines whether ctrl is used for paning within the controls

    • Optional panningMouseButton: number

      Defines whether panning is allowed through mouse click button




      Question: what can i do with the last argument of camera.attachControl? Is there a number that defines two fingers swipes?

Link to comment
Share on other sites

@UeliUeli it looks like panning works by holding down the control key while left-dragging, though this causes a context menu to pop up on Mac OS, which interferes with the pan.


I'll see if it is possible to make an update to support left-dragging with the command key for Mac OS

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

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...