无需登录 数据私有 本地保存

WebXR 手部追踪演示 - 无控制器交互

AR VR AR VR WebXR 手部追踪
45
0
0
0
手部: 等待检测
捏合: 未检测
0 个物体被抓取
捏合拇指+食指来抓取物体
使用支持 WebXR 手部追踪的设备体验
（如 Meta Quest 2/3/Pro）

常见问题与知识点

WebXR 手部追踪（Hand Tracking）是 WebXR Device API 的扩展功能，允许浏览器直接获取用户手部骨骼关节的实时 3D 位置数据，无需使用任何物理控制器。它通过头显内置的摄像头（如 Quest 的 Inside-Out 摄像头）捕捉手部动作，生成包含手腕、手指关节在内共 25 个关节点的骨骼模型，实现裸手自然交互。
头显设备：Meta Quest 2、Quest Pro、Quest 3 系列（在 Quest 浏览器中启用）、PICO 4 系列、HTC Vive XR Elite、Apple Vision Pro（WebXR 支持逐步完善）。
浏览器：Meta Quest Browser（基于 Chromium，支持最好）、Wolvic Browser、PICO Browser。
前置条件：需在设备设置中开启手部追踪功能，网页需通过 HTTPS 或 localhost 访问。
WebXR 原生 API 提供的是底层关节数据（25 个关节的 3D 坐标），而非高层手势识别。开发者需要自行实现手势检测逻辑。常见可检测手势包括：捏合（Pinch）——拇指尖与食指尖距离小于阈值；握拳——所有指尖靠近掌心；指向——食指伸出其他手指弯曲；张开手掌——所有手指伸展。本演示实现了捏合检测用于抓取物体。
在 Quest 2/3 上，手部追踪延迟通常在 20-40ms，关节定位精度在 2-5mm（理想光照条件下）。影响因素包括：环境光线（需充足均匀）、手部与摄像头的距离（最佳 0.3-1.2 米）、遮挡情况（手指相互遮挡会降低精度）、快速运动（可能产生拖影）。Quest 3 的双 400 万像素 RGB 摄像头显著提升了追踪质量。
在请求 XR 会话时添加 'hand-tracking' 特性：
navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: ['hand-tracking']
});
然后通过 XRFrame.getJointPose() 获取每个关节的姿态数据。使用 Three.js 时可借助 XRHandModelFactory 自动创建手部 3D 模型，简化开发流程。完整的 25 个关节包括手腕、拇指 4 关节、其他四指各 5 关节。
控制器追踪：精度高（亚毫米级），延迟低，有物理按钮和触觉反馈，适合游戏和精确操作。需要手持设备，不够自然。
手部追踪：完全解放双手，自然直观，适合社交、UI 浏览、轻交互。无触觉反馈，精度稍低，快速动作可能丢帧。两者可互补——Quest 支持在同一应用中切换。
WebXR 手部追踪在浏览器层面处理摄像头数据，原始图像不会暴露给网页。网页仅接收处理后的关节 3D 坐标数据（数学向量），无法访问摄像头画面。此外，WebXR 要求 HTTPS 加密连接，且用户需主动授权 XR 会话。这确保了隐私安全，符合 W3C 隐私设计原则。
🎓 教育与培训：虚拟实验室、手术模拟；🤝 社交 VR：自然手势交流、虚拟会议；🛒 电商展示：用手查看 3D 商品；🎨 创意工具：3D 雕刻、虚拟绘画；🏥 康复训练：手部运动追踪与评估；🎮 休闲游戏：抓取、投掷等直觉交互。无控制器降低了使用门槛，特别适合非游戏用户。
🔧 相关工具