Three.js中WebXR控制器定位及引用失效问题咨询

问题核心 #

你当前的代码通过遍历session.inputSources获取游戏手柄（用于按钮交互），但依赖索引i获取renderer.xr.getController(i)的方式存在两个关键问题：

1. 控制器索引与inputSource的遍历顺序无绑定关系，导致位姿对象和左右手无法稳定匹配
2. 一次性获取的控制器引用无法应对运行时输入源变化（如控制器断开重连、切换），进而出现位姿停止更新的情况

解决方案 #

1. 维持位姿对象有效性：通过事件监听动态管理控制器 #

不要一次性获取控制器，而是监听XR会话的输入源变化事件，动态创建/更新控制器引用，确保位姿始终同步：

// 全局存储控制器映射，以handedness为键绑定对应资源
const controllerMap = {
  left: null,
  right: null
};

// 初始化XR控制器监听逻辑
function setupXRControllers() {
  const session = renderer.xr.getSession();
  if (!session) return;

  // 处理当前已存在的输入源
  updateControllers(session.inputSources);

  // 监听输入源变化（控制器连接/断开）
  session.addEventListener('inputsourceschange', () => {
    updateControllers(session.inputSources);
  });
}

// 更新控制器映射关系
function updateControllers(inputSources) {
  // 清空旧引用（如需移除场景中的废弃控制器，可在此添加清理逻辑）
  controllerMap.left = null;
  controllerMap.right = null;

  inputSources.forEach((source, index) => {
    if (!source.gamepad || !source.handedness) return;

    // 获取对应索引的控制器对象
    let controller = renderer.xr.getController(index);
    // 若控制器未加入场景，手动添加（按需调整）
    if (!controller.parent) {
      scene.add(controller);
    }

    // 按左右手绑定游戏手柄和位姿控制器
    controllerMap[source.handedness] = {
      gamepad: source.gamepad,   // 用于按钮交互
      poseController: controller // 用于位姿获取
    };
  });
}

// 在动画循环中直接从映射获取有效引用
function animate() {
  renderer.setAnimationLoop(() => {
    // 处理左手位姿
    if (controllerMap.left?.poseController) {
      const leftPos = controllerMap.left.poseController.position;
      const leftRot = controllerMap.left.poseController.quaternion;
      // 此处添加位姿相关业务逻辑
    }

    // 处理右手位姿
    if (controllerMap.right?.poseController) {
      const rightPos = controllerMap.right.poseController.position;
      const rightRot = controllerMap.right.poseController.quaternion;
      // 此处添加位姿相关业务逻辑
    }

    renderer.render(scene, camera);
  });
}

// 会话启动时触发控制器初始化
renderer.xr.addEventListener('sessionstart', setupXRControllers);

通过inputsourceschange事件监听输入源变化，能确保控制器引用始终对应活跃的硬件设备，避免位姿停止更新的问题。

2. 确保位姿对象与左右手稳定匹配 #

核心逻辑是完全抛弃索引依赖，直接通过inputSource.handedness绑定控制器：

• 在updateControllers函数中，以source.handedness（left/right）为键，将控制器和游戏手柄关联到全局映射
• 后续使用时，直接通过controllerMap.left和controllerMap.right获取对应左右手的资源，彻底避免索引混乱问题

如果需要使用手柄模型，可通过renderer.xr.getControllerGrip(index)获取，同样按handedness绑定到映射即可。

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