Change mouse actions

hello ,
i want to change mouse actions like that :

right mouse button: rotation of the scene

middle mouse button: scroll in the scene

left mouse button: selection of an object

thanks for help :slight_smile:

Hi viche! Please see this post…

It shows how to assign WHICH mouse-actions… to WHICH camera-actions.

There is a playground demo provided there…

In that demo, right and left mouse buttons (assigned to cam) are reversed, and middle wheel remains unchanged. Keep in mind that the CAMERA is being changed, not really the mouse.

I’m not an expert, but perhaps this will work for you. Be well.


the middle mouse button still not working with the scroll on the scene :confused: also the i want to desactiv the left mouse action (just available for the selection). :slight_smile:

Ahh, ok, sorry. I’ll study/work on this.

(I was mistaking scroll with “zoom”)… I didn’t read very well. :slight_smile:

In above playground, center and right button working properly, yes?

But… we still need to “detach” left button from camera, somehow?

I think that is what you wish. I will study it more, and we shall ask for more helpers.


thanks my freind for ur help and yes it’s works just like u say i still need to detach the left button from camera :slight_smile:

1 Like

Nod. Perhaps this is not so easy.

Looking around in there… phew… over my head. All (most?) cameras have a “input” module like this. (camera.inputs), and often…cams have multiple inputs-types allowed.

You can see… in THIS folder… Babylon.js/src/Cameras/Inputs at master · BabylonJS/Babylon.js · GitHub … that there are 5 possible .inputs for the arcCam… gamepad, keyboard, mousewheel, pointers (mousebuttons), and VR DeviceOrient.

AND… BaseCameraPointersInput.ts … the top one.

That BASE camera inputs file… might be where we need to make “hacks”… essentially fooling the camera into thinking that there are only TWO buttons on the mouse. I’m not sure if I know how to hack that well. Can you?

Might need super-hackers or… maybe… this cannot be done and you’ll need a different game plan. hmm. Still studying.

In the #16 playground … I was hoping a -1 in line 24… would disable left button… because of what I saw in BaseInputs line 68. (the -1 thing). But the -1 thing… is just a tester for “not found in the array” and doesn’t do what I hoped for. :slight_smile:

console.log(camera.inputs.attached); reports 3 input modules… but baseCameraPointersInput may also be there… just not shown to us.

1 Like

thanks for your effort and specialy for your explanation :slight_smile:

1 Like

hmm, no new ideas for disabling left button for arcCam, today, huh? Darn. I was sort of hoping that someone had a fresh idea.

Ok, let’s re-brief… in hopes for a miracle. - we have set “strafe” (panning?) on center mouse button, and orbit on right mouse button… as wanted.

We now want left mouse button to do NOTHING for the camera, yet still remain active for future mesh-picking.

Line 24… camera.buttons array - I tried -1, null, and undefined in that zeroth array slot (guessing)… no joy. Left mouse button-drag… still orbits the camera.

Does anyone have any ideas… to disable LMB-drag? (thx). (Wingy crosses his fingers, and crosses Viche’s [mouse-] fingers, too) :slight_smile:

1 Like

I’m leaving it in hopes that other peoples won’t waste so much time as me looking for the answer.

All 3 mouse buttons are by default rotating buttons. You need to set “camera._panningMouseButton” to distinguish one of the buttons for panning.

camera.buttons array is only denoting on/off state of each button. -1 means button is ignored, anything else means button is processed. Which button we are talking about is is based on array index. So left mouse button is 0 index (or first array element). Right mouse button is 2 index, or 3rd array element.

To disable left mouse button it has to have [-1,X,X] where X is anything but -1. Can be even completely empty or not existing so [-1] would also work.

Accordingly disabling right mouse button is [X,X,-1].

At least one of those two things need to be done after camera.attachControl(true); is called. I didn’t bother to test which one.

My goal was to achieve the following behavior:

  • Right click is rotation
  • Left click is panning

On my BABYLON.ArcRotateCamera. I was able to do this by adding the following line after the camera was attached to the HTML canvas:

camera._panningMouseButton = 0;

This had me scratching my head for a while.
Not well documented and misleading information in forum.

Here is what I found.

For arc camera, mouse buttons can be only be used for two things - rotate camera or pan camera.
Of the three buttons, two buttons can be used for rotation and only one for panning.
By default left and midde buttons are used for rotation and right button is used for panning.

To use a different button for panning use the following function
But be carefull
There are five version of this function
see ArcRotateCamera | Babylon.js Documentation
Use the following one

attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void

This will result in right mouse button being used for panning.
The remaining two, left and middle buttons, will be used for rotation

Now lets say you do not want to use middle button at all.
for this use
camera.inputs.attached.pointers.buttons =
This decides which mouse buttons can be used. (but not what they can be used for)

camera.inputs.attached.pointers.buttons = [0,2]
This says use left and right buttons only. Ignore middle button.

So lets say you want to use left to pan and right to rotate and disable middle button, then do
camera.inputs.attached.pointers.buttons = [0,2];


Also just to be clear

0 - left mouse button
1 - middle mouse button
2 - right mouse button.


Thanks for clarifying this. This looks good to me.
Just to be sure, do you have a question/issue or was it just to clarify the thread (thanks for that :hugs:) ?

No question/issue.
I was trying to switch mouse function for my app and found the discussion around this confusing.
So thought I should clarify. Might safe some other poor soul some time :slight_smile:


very helpful post. i’m surprised so few people want to change the default behavior of having all three mouse buttons ‘hijacked’ by camera controls.

I suppose it depends on your project. It’s not always a good thing to force the user to a new behavior. People on the Internet and gamers like me sort of have their habits. Personally, it disturbs me a lot when a common behavior is changed in a game. First thing I do is go to the options and expect to find the setting that will let me use my common inputs for this type of game or experience.