Babylon.js手记：使用鼠标中键控制ArcRotateCamera平移

在 Babylon.js 中，ArcRotateCamera 默认使用鼠标右键进行平移操作。但在某些情况下，我们可能希望使用鼠标中键来实现平移功能。本文将详细介绍如何正确配置 ArcRotateCamera 以实现鼠标中键平移。

解决方案

经过验证，以下是实现鼠标中键平移的正确代码：

// 创建 ArcRotateCamera
camera = new BABYLON.ArcRotateCamera(
    "Camera", 
    camAlpha, 
    camBeta, 
    camRadius, 
    posTarget.clone(), 
    scene);

// 关键配置：启用鼠标中键平移
camera.attachControl(true, false, 1);

// 其他相机设置
camera.fov = Math.PI * 0.12;
camera.panningAxis = new BABYLON.Vector3(1, 0, 1); // 禁用Y轴平移 
camera.panningSensibility = 5000 / camera.radius;

关键参数详解

attachControl 方法参数

attachControl 方法有多个重载，目前我使用重载的完整签名如下：

attachControl(noPreventDefault: boolean, useCtrlForPanning: boolean, panningMouseButton: number): void;

各参数含义：

1. noPreventDefault (true)

   • 设置为 true 时，不会阻止浏览器默认行为

   • 设置为 false 时，会阻止浏览器默认行为（如右键菜单）

2. useCtrlForPanning (false)

   • 设置为 true 时，需要按住 Ctrl 键配合鼠标左键进行平移

   • 设置为 false 时，直接使用指定鼠标按钮进行平移

3. panningMouseButton (1)

   • 0 = 鼠标左键

   • 1 = 鼠标中键

   • 2 = 鼠标右键

其他重要配置

• panningAxis: 限制平移的轴向

  • new BABYLON.Vector3(1, 0, 1) 表示允许 X 和 Z 轴平移，禁用 Y 轴平移

  • new BABYLON.Vector3(1, 1, 1) 表示允许所有轴向平移

• panningSensibility: 平移灵敏度

  • 值越大，平移速度越慢

  • 可以设置为固定值，或根据相机半径动态调整

完整的控制方案

配置后的相机控制行为：

• 鼠标左键拖动: 旋转相机

• 鼠标中键拖动: 平移相机

• 鼠标滚轮: 缩放相机

注意事项

1. 确保在调用 attachControl 之前相机已被正确创建

2. 如果需要禁用 Y 轴平移，务必设置 panningAxis 属性

3. 平移灵敏度可以根据具体场景需求进行调整

4. 如果遇到平移不灵敏的问题，可以适当减小 panningSensibility 的值