MDN WebXR 设备 API 基础指南：构建沉浸式体验的核心概念

什么是 WebXR？

WebXR 设备 API 是现代网页开发中实现增强现实（AR）和虚拟现实（VR）的核心技术，统称为混合现实（XR）。这项技术让开发者能够在浏览器中创建沉浸式的 3D 体验，而无需依赖原生应用。

WebXR 的本质与边界

WebXR 的核心职责是：

1. 管理 XR 硬件（如头显、AR 眼镜）的接口
2. 处理 3D 视图渲染所需的视角计算
3. 追踪硬件运动数据并更新场景

但需要明确的是：

• WebXR 不是渲染引擎：它不直接处理 3D 模型加载或纹理渲染
• 依赖 WebGL：实际渲染工作由 WebGL 或基于 WebGL 的框架（如 Three.js、Babylon.js）完成

关键基础概念

视场角（FOV）

视场角决定了用户在 XR 环境中能看到的范围：

• 单眼 FOV 约 135°
• 双眼组合 FOV 约 200-220°
• 重叠区域（约 115°）提供深度感知

XR 设备的 FOV 通常在：

• 基础设备：约 90°
• 高端设备：约 150°

自由度（DoF）

自由度描述用户运动被追踪的维度：

3DoF（旋转自由度）

1. 俯仰（Pitch）：上下看
2. 偏航（Yaw）：左右看
3. 翻滚（Roll）：头部倾斜

6DoF（完整自由度）

在 3DoF 基础上增加： 4. 前后移动 5. 左右移动 6. 上下移动

WebXR 会话模式

虚拟现实（VR）

• inline：在网页文档中呈现
• immersive-vr：完全沉浸式体验（需头显）

增强现实（AR）

• immersive-ar：唯一模式，叠加虚拟内容到现实世界

XR 硬件类型

头戴设备

1. 手机盒子式（如 Google Cardboard）

   • 使用手机作为显示和计算单元
   • 成本低但功能有限

2. 独立式头显

   • 集成显示屏和传感器
   • 可能包含音频设备
   • 示例帧缓冲区使用：

AR 眼镜

• 透明显示技术
• 直接叠加虚拟内容到现实视野

CAVE 系统

• 投影墙构成的沉浸空间
• 需要配合 3D 眼镜
• 多用于专业场景

健康与安全须知

VR 使用注意事项

可能引发：

• 眼睛疲劳
• 头晕
• 不适感

预防措施：

• 确保帧率稳定
• 避免视觉矛盾
• 注意内容可能引发的不适反应

物理安全

• 设置安全边界
• 有线设备注意线缆管理
• 提供明确的安全警告

开发工具建议

推荐框架

1. Three.js：轻量级 3D 库
2. Babylon.js：功能全面的引擎
3. A-Frame：声明式 WebVR 框架

开发优势

• 内置虚拟相机系统
• 简化 3D 数学运算
• 提供场景图管理

最佳实践

1. 渐进增强：先检测设备能力
2. 性能优化：保持稳定帧率
3. 用户引导：清晰的操作说明
4. 多设备测试：覆盖不同硬件配置

通过理解这些核心概念，开发者可以更高效地构建跨平台的 WebXR 体验，为用户带来真正沉浸式的网页内容。