WebXR hit test区分地面墙面天花板及Three.JS AR放置适配方法

平面类型区分逻辑 #

WebXR命中测试返回结果本身会携带平面的朝向信息，你可以通过命中结果关联平面的法线判断类型，判断逻辑误差范围可根据业务需求调整：

• 地面：平面法线Y轴分量接近+1，一般取绝对值≥0.8即可判定为水平向上的平面
• 天花板：平面法线Y轴分量接近-1，一般取Y值≤-0.8即可判定为水平向下的平面
• 墙面：平面法线Y轴分量绝对值<0.2，即可判定为垂直于地面的竖直平面

Three.js的ARButton仅做XR会话的基础初始化封装，没有限制底层WebXR原生API的调用，你完全可以跳过ARButton的封装层直接获取原生XR返回的平面信息。 #

Three.js侧适配修改方案 #

你可以直接在官方WebXR AR hit test示例基础上做以下调整：

1. 初始化XR会话时开启平面检测能力，配置会话参数时加入平面检测的权限申请：

const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['hit-test', 'plane-detection']
})

2. 帧循环中获取平面类型，在每帧的XR回调中拿到命中结果后，提取关联的平面信息做类型判断：

const hitTestResults = frame.getHitTestResults(hitTestSource);
if (hitTestResults.length) {
  const hit = hitTestResults[0];
  const plane = hit.plane; 
  let planeType = 'wall';
  const normal = plane.normal;
  if (normal.y > 0.8) planeType = 'floor';
  else if (normal.y < -0.8) planeType = 'ceiling';
  // 后续根据平面类型处理对象参数
}

3. 按平面类型调整新增对象的参数：

• 尺寸调整：可根据业务场景自定义规则，比如墙面放置海报可设置宽高比为3:2，地面放置家具按1:1真实比例映射，天花板放置灯具可缩小至默认尺寸的0.3倍
• 旋转角度调整：直接将对象的向上方向对齐平面法线即可，Three.js可通过以下代码快速实现：

const pose = hit.getPose(xrReferenceSpace);
targetObject.position.copy(pose.transform.position);
targetObject.up.copy(plane.normal);
targetObject.lookAt(pose.transform.position.clone().add(plane.normal));

异常排查 #

如果获取不到plane属性，优先确认XR会话是否正确申请了plane-detection特性，其次确认测试设备的浏览器支持WebXR平面检测能力，建议优先用Chrome安卓版做功能验证。

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