Three.js中使用OrbitControls时如何启用右键菜单？

OrbitControls默认会拦截右键的contextmenu事件并调用preventDefault()，这就是右键点击无法弹出保存菜单的核心原因。下面提供两种实用方案：

方案一：保留右键平移+支持右键菜单（推荐） #

这种方法区分右键点击和右键拖拽行为：只有当用户按住右键拖拽时，保留OrbitControls的平移功能；单纯右键点击时，允许弹出系统右键菜单。

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 标记是否为右键拖拽操作
let isRightDragging = false;

// 监听鼠标按下事件
renderer.domElement.addEventListener('mousedown', (e) => {
  if (e.button === 2) { // 2对应右键
    isRightDragging = false;
  }
});

// 监听鼠标移动事件，判断是否进入拖拽状态
renderer.domElement.addEventListener('mousemove', (e) => {
  if (e.buttons === 2) { // 右键按住时移动
    isRightDragging = true;
  }
});

// 重写控制器的右键菜单事件处理
controls.addEventListener('contextmenu', (e) => {
  if (!isRightDragging) {
    // 非拖拽状态，不阻止默认行为，弹出右键菜单
    return;
  }
  e.preventDefault(); // 拖拽状态下阻止默认行为，保留平移功能
});

方案二：禁用右键平移+直接启用右键菜单 #

如果你的场景不需要右键平移功能，可以直接让控制器放弃拦截右键菜单事件：

const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false; // 关闭右键平移

// 移除控制器绑定的contextmenu事件监听
renderer.domElement.removeEventListener('contextmenu', controls._onContextMenu);

// 或者直接覆盖控制器的右键处理方法
// controls._onContextMenu = () => {};

两种方案都能让你在不关闭OrbitControls的前提下，右键点击Canvas弹出保存菜单。

内容的提问来源于stack exchange，提问作者Nichola