Three.js & OrbitControls.js - Могу ли я изменить конфигурацию входа?

Question

Я работаю над простой демонстрацией Three.js, которая использует OrbitControls.js. В настоящее время левая кнопка мыши перемещается, правая кнопка мыши и средняя кнопка мыши/тележки прокрутки (масштабирование). Но я бы хотел поменять местами орбиту и панорамирование, чтобы они контролировались правой кнопкой мыши и левой кнопкой мыши, соответственно. Существуют ли настройки конфигурации для изменения этой функции? Или мне придется погрузиться в код, чтобы изменить это?

Answer 1

Вам нужно будет погрузиться в код; на данный момент нет опции конфигурации. К счастью, это довольно легкое изменение; вам просто нужно обновить функцию onMouseDown и изменить условное, который проверяет 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

Одна из причин, эти элементы управления ставятся в примерах (а не части ядра) является то, что люди потребности варьируются довольно широко, поэтому вам рекомендуется редактировать элементы управления в соответствии с вашими потребностями.

Three.js R68

Answer 2

Теперь вы можете настроить мышь-управления очень легко. Просто получите Control-Object, а затем измените конфигурацию мыши-кнопки следующим образом:

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 };