使用OrbitControls时如何在three.js中禁用鼠标右键移动相机旋转？答案

【问题标题】：How to disable right click mouse move camera rotation in three.js when using OrbitControls?使用OrbitControls时如何在three.js中禁用鼠标右键移动相机旋转？
【发布时间】：2019-04-12 17:16:21
【问题描述】：

我在 three.j 中使用轨道控制来旋转相机。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.dampingFactor = 0.07;
controls.rotateSpeed = 0.07;
controls.enableZoom = false;
controls.screenSpacePanning = false;
controls.minDistance = 250;
controls.maxDistance = 350;
controls.minPolarAngle = 1.2;
controls.maxPolarAngle = 1.2;

我正在像这样固定相机位置 -

camera.position.x = 308;
camera.position.y = 130;
camera.position.z = 135;

当我使用鼠标左键移动时，相机可以很好地围绕我的对象移动。但是当我使用鼠标右键移动时，它奇怪地将我的相机从物体上移开。我需要禁用此功能，但找不到任何方法来做到这一点。我尝试在文档上使用事件侦听器来阻止和停止鼠标移动事件的传播，如果随后单击鼠标右键，但它不起作用。

document.addEventListener("mousedown", function(event){
  console.log(event.button);
  if(event.button == 2){
    rightmousemove = true;
    return false;
  //   // Right click
  } 
});
document.addEventListener("mousemove", function(event){
  if(rightmousemove === true){
    event.preventDefault();
    event.stopPropagation();
  }
});

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您所描述的是“平移”。您可以通过以下方式禁用此功能：

controls.enablePan = false;

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

【讨论】：

【解决方案2】：

正如另一个答案中提到的，您想要做的是禁用平移，在这种情况下，可以通过使用 controls.enablePan = false; 轻松实现

不过，我还想谈谈为什么您的代码无法正常工作的话题。这是因为事件冒泡。简而言之，这意味着事件（如mousemove）在子元素中被触发并向上移动到父元素。

因此，如果在按钮元素上触发了事件（如单击或鼠标移动），它将向上到达容器 div，然后到达文档，然后到达窗口。

如果您查看 OrbitControl.js 的源代码。你会看到鼠标移动被注册为document.addEventListener( 'mousemove', onMouseMove, false );

所以最终的结果是你们都在文档对象上注册了它。 stopPropogation 的工作方式是它会阻止事件冒泡到它的父对象，但你已经在同一个对象上注册了它。

要获得所需的结果，您可以将其注册到更具体的元素或使用event.stopImmediatePropagation()。 stopImmediatePropogation 的工作方式是阻止其余处理程序的执行，并防止事件在 DOM 树中冒泡。

JS Fiddle code with stopImmediatePropogation

【讨论】：

【解决方案3】：

controls = new OrbitControls(camera, container); // Reuse this if exist
controls.mouseButtons = {
    // LEFT: THREE.MOUSE.ROTATE,
    MIDDLE: THREE.MOUSE.DOLLY,
    // RIGHT: THREE.MOUSE.PAN
}
controls.update();// reuse this

如上所示，只取消注释您想要的鼠标控件。

参考：https://threejs.org/docs/#examples/en/controls/OrbitControls.mouseButtons

【讨论】：