CODEWITHSUNDEEP
three.js
Justin
Justin

Reputation: 1949

Three.js & OrbitControls.js - Can I change the input configuration?

I'm working on a simple Three.js demo that uses OrbitControls.js. Currently, the left mouse button orbits, the right mouse button pans, and the middle mouse button/scroll wheel dollies (zooms). But I'd like to swap orbit and pan so that they are controlled by the right mouse button and left mouse button, respectively. Are there configuration settings to change this functionality? Or will I have to dive into the code to change this?

Upvotes: 6

Views: 6934

Answers (4)

Hemant Remanache
Hemant Remanache

Reputation: 1

In the latest update of three.js(r131), you can try this

controls.mouseButtons = {LEFT: 0, MIDDLE: 1, RIGHT: 2};

Where, 0 = orbit, 1 = zoom and 2 = pan contol

Upvotes: 0

Felix Turner
Felix Turner

Reputation: 1473

As of Three.js r99 you can switch orbit controls mouse buttons like this:

controls.mouseButtons = {
    LEFT: THREE.MOUSE.RIGHT,
    MIDDLE: THREE.MOUSE.MIDDLE,
    RIGHT: THREE.MOUSE.LEFT
}

See https://threejs.org/docs/#examples/controls/OrbitControls

Upvotes: 2

braandl
braandl

Reputation: 96

By now you can Configure the Mouse-Controls very easily. Just get the 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 };

Upvotes: 5

caseygrun
caseygrun

Reputation: 2170

You'll need to dive into the code; there's no configuration option at the moment. Happily it's a pretty easy change; you just need to update the onMouseDown function and change the conditional 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 put in examples (rather than part of the core) is that folks' needs vary pretty widely, so you're encouraged to edit the controls to suit your needs.

three.js r68

Upvotes: 4

Related Questions