Change mouse actions

Viche · April 6, 2020, 10:04am

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

Wingnut · April 6, 2020, 10:14am

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… https://www.babylonjs-playground.com/#VE33T#14

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.

Viche · April 6, 2020, 10:23am

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

Wingnut · April 6, 2020, 10:34am

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

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

https://www.babylonjs-playground.com/#VE33T#16

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.

Viche · April 6, 2020, 10:44am

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

Wingnut · April 6, 2020, 11:29am

Nod. Perhaps this is not so easy.

github.com

BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/arcRotateCameraPointersInput.ts

import { Nullable } from "../../types";
import { serialize } from "../../Misc/decorators";
import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
import { CameraInputTypes } from "../../Cameras/cameraInputsManager";
import { BaseCameraPointersInput } from "../../Cameras/Inputs/BaseCameraPointersInput";
import { PointerTouch } from "../../Events/pointerEvents";

/**
 * Manage the pointers inputs to control an arc rotate camera.
 * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
 */
export class ArcRotateCameraPointersInput extends BaseCameraPointersInput {
    /**
     * Defines the camera the input is attached to.
     */
    public camera: ArcRotateCamera;

    /**
     * Gets the class name of the current input.
     * @returns the class name

This file has been truncated. show original

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.

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

Viche · April 6, 2020, 11:41am

thanks for your effort and specialy for your explanation

Wingnut · April 7, 2020, 1:18am

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.

https://www.babylonjs-playground.com/#VE33T#16 - 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)

Elrood · September 21, 2021, 2:44pm

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.

srothst1 · November 22, 2022, 2:53pm

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;

satguru · November 28, 2022, 2:32am

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
camera.attachControl()
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

Example
camera.attachControl(true,false,2);
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)

Example
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.attachControl(true,false,0);
camera.inputs.attached.pointers.buttons = [0,2];

see

Also just to be clear

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

mawa · November 28, 2022, 1:33pm

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 ) ?

satguru · November 28, 2022, 4:22pm

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

Convergence · March 11, 2023, 12:58am

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.

mawa · March 11, 2023, 11:40am

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.

Topic		Replies	Views
How to control the rotation of the camera only by move the mouse? Questions	1	3517	April 16, 2019
Possible bug with camera inputs? Questions	9	737	March 4, 2020
How to change UniversalCamera behaviour Questions	4	899	December 17, 2020
Change ArcRotateCam Pan Questions	10	1001	November 15, 2021
Change Camera Position Questions	2	651	October 28, 2020

Change mouse actions

Related topics