Trackball controls cannot customise user mouse buttons

[LinkunGao]

Description

The default is:

    this.mouseButtons = {
      LEFT: MOUSE.ROTATE,
      MIDDLE: MOUSE.DOLLY,
      RIGHT: MOUSE.PAN,
    };

But if we change the buttons function like this will get a strange result which is not we expect:

 this.mouseButtons = {
      LEFT: MOUSE.PAN,
      MIDDLE: MOUSE.DOLLY,
      RIGHT: MOUSE.ROTATE,
    };

Then in the code we can find in line 537, when user mouse click down:

if ( _state === STATE.NONE ) {
  switch ( event.button ) {
          case scope.mouseButtons.LEFT:
                _state = STATE.ROTATE;
          break;
          case scope.mouseButtons.MIDDLE:
               _state = STATE.ZOOM;
          break;
          case scope.mouseButtons.RIGHT:
              _state = STATE.PAN;
          break;
  }
}

We can not just change the mouseButtons to change the controls behaviors.

Solution

Because the value of the MOUSE and controls STATE are similar:

MOUSE.PAN = STATE.PAN = 2
MOUSE.ROTATE = STATE.ROTATE = 0
MOUSE.DOLLY = STATE.ZOOM = 1

So what we can do is:

• in .d.ts we limit the value sign in the mouseButtons:

 mouseButtons: {
    LEFT: MOUSE.ROTATE | MOUSE.PAN | -1;
    MIDDLE: MOUSE.DOLLY;
    RIGHT: MOUSE.ROTATE | MOUSE.PAN | -1;
  };

• in js, we can change the mouse down like this:

if (_state === STATE.NONE) {
        switch (event.button) {
          case 0: //mouse left button click
            _state = scope.mouseButtons.LEFT;
            break;

          case 1: //mouse wheel
            _state = scope.mouseButtons.MIDDLE;
            break;

          case 2: //mouse right button click
            _state = scope.mouseButtons.RIGHT;
            break;
        }
      }

• Then, after this we can customize the controls now when we use the trackball controls in our project.

Alternatives

no, haven't considered others.

Additional context

No response

[LeviPesin]

Couldn't we just do this?

if ( _state === STATE.NONE ) {

    _state = scope.mouseButtons[ event.button ];

}

[LeviPesin]

Also, I think there is a logical error in the current code. event.button, being MOUSE.LEFT/MIDDLE/RIGHT is compared to scope.mouseButtons.LEFT/MIDDLE/RIGHT, which is MOUSE.ROTATE/DOLLY/PAN. This works only because they are equal.
I will file a PR with my solution.