Three.js & OrbitControls.js - Can I change the input config?
I am working on a simple Three.js demo that uses OrbitControls.js. Currently, the left mouse button is moved, the right mouse button and the middle mouse / cart scrolling button (zoom). But I would like to swap the orbit and panning so that they are controlled by the right mouse button and the left mouse button, respectively. Are there configuration settings to change this feature? Or will I have to dive into the code to change this?
source to share
You will need to dive into the code; there is currently no configuration option. Fortunately, this is a fairly easy change; you just need to update the function onMouseDown
and change the condition that checks event.button
:
// you could change this to `event.button == 1` if you wanted the
/// right mouse button to rotate, and so on...
if ( event.button === 0 ) {
if ( scope.noRotate === true ) return;
state = STATE.ROTATE;
rotateStart.set( event.clientX, event.clientY );
} else if ( event.button === 1 ) {
if ( scope.noZoom === true ) return;
state = STATE.DOLLY;
dollyStart.set( event.clientX, event.clientY );
} else if ( event.button === 2 ) {
if ( scope.noPan === true ) return;
state = STATE.PAN;
panStart.set( event.clientX, event.clientY );
}
https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js#L333-L352
One of the reasons these controls are shown in the examples (and not in the kernel part) is because people's needs vary quite widely, so you are encouraged to edit the controls to suit your needs.
three.js r68
source to share
By now, you can easily customize your mouse controls. Just get a Control-Object and then change the mouse-button configuration like this:
this._controls = new OrbitControls(world._engine._camera, world._container);
// Mouse buttons
this._controls.mouseButtons = { ORBIT: THREE.MOUSE.RIGHT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.LEFT };
source to share
Starting with Three.js r99, you can toggle mouse buttons in orbit like so:
controls.mouseButtons = {
LEFT: THREE.MOUSE.RIGHT,
MIDDLE: THREE.MOUSE.MIDDLE,
RIGHT: THREE.MOUSE.LEFT
}
See https://threejs.org/docs/#examples/controls/OrbitControls.
source to share