Javascript 使用OrbitControl时，如何在three.js中禁用鼠标右键移动摄影机旋转？

我正在使用轨道控制来旋转三个方向的相机

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

---

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

controls.enablePan=false

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

controls.enablePan=false

如另一个答案中所述，您要做的是禁用平移，在这种情况下，只需使用
控件即可实现。enablePan=false

通过本文，我还想谈谈为什么您的代码不起作用。这是因为事件冒泡。简单地说，它意味着事件（如
mousemove
）在子元素中被触发，并向上移动到父元素


因此，如果事件（如单击或鼠标移动）是在按钮元素上触发的，它将进入容器div，然后进入文档，然后进入窗口

如果你看一下的源代码。您将看到鼠标移动注册为
document.addEventListener（'mousemove'，onMouseMove，false）

所以最终的结果是，你们都在document对象上注册了它。
stopPropogation
的工作方式是，它将停止事件冒泡到其父对象，但您已经在同一对象上注册了它

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

如另一个答案中所述，您要做的是禁用平移，在这种情况下，只需使用
控件即可实现。enablePan=false

通过本文，我还想谈谈为什么您的代码不起作用。这是因为事件冒泡。简单地说，它意味着事件（如
mousemove
）在子元素中被触发，并向上移动到父元素


因此，如果事件（如单击或鼠标移动）是在按钮元素上触发的，它将进入容器div，然后进入文档，然后进入窗口

如果你看一下的源代码。您将看到鼠标移动注册为
document.addEventListener（'mousemove'，onMouseMove，false）

所以最终的结果是，你们都在document对象上注册了它。
stopPropogation
的工作方式是，它将停止事件冒泡到其父对象，但您已经在同一对象上注册了它

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

controls=新的轨道控制（摄像机、容器）；//如果存在，请重用此文件
controls.mouseButtons={
//左：三。鼠标。旋转，
中间：三只。老鼠。多莉，
//右：3.MOUSE.PAN
}
控件。更新（）；//重复使用这个

如上所示，仅取消注释所需的鼠标控件

参考：

controls=新的轨道控制（摄影机、容器）；//如果存在，请重用此文件
controls.mouseButtons={
//左：三。鼠标。旋转，
中间：三只。老鼠。多莉，
//右：3.MOUSE.PAN
}
控件。更新（）；//重复使用这个

如上所示，仅取消注释所需的鼠标控件

参考：