要在网页中实现AR/VR功能，核心依赖的是WebXR等专项标准，但浏览器对象模型BOM提供了访问设备硬件的基础能力，是衔接硬件与AR/VR逻辑的重要桥梁。BOM本身不包含AR/VR的渲染、空间定位等核心能力，却可以通过一系列接口获取实现功能所需的设备数据。
BOM中可用于AR/VR开发的核心接口
1. DeviceOrientationEvent 设备姿态接口
该接口属于BOM的window对象，用于获取设备的物理朝向和旋转角度，是VR场景中视角跟随设备转动、AR场景中虚拟物体贴合现实空间的基础。它会在设备方向发生变化时触发事件，返回alpha、beta、gamma三个旋转角度值。
// 监听设备方向变化
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', (event) => {
// alpha：绕Z轴旋转的角度，范围0-360
const alpha = event.alpha;
// beta：绕X轴旋转的角度，范围-180到180
const beta = event.beta;
// gamma：绕Y轴旋转的角度，范围-90到90
const gamma = event.gamma;
// 后续可将角度数据传递给渲染引擎调整视角
console.log(`设备姿态：alpha=${alpha}, beta=${beta}, gamma=${gamma}`);
});
} else {
console.log('当前浏览器不支持DeviceOrientationEvent');
}
2. getUserMedia 摄像头访问接口
AR功能需要将虚拟内容叠加在真实摄像头画面上，BOM的navigator.mediaDevices.getUserMedia接口可以获取设备摄像头的视频流，是实现AR画面层叠的核心前置条件。
// 获取摄像头视频流并展示在页面video元素中
async function getCameraStream() {
try {
// 请求摄像头视频权限，可指定前后摄像头
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment' // 优先使用后置摄像头，适合AR场景
}
});
const videoElement = document.getElementById('camera-video');
videoElement.srcObject = stream;
// 等待视频加载完成后可以获取画面尺寸等信息
videoElement.addEventListener('loadedmetadata', () => {
console.log(`摄像头分辨率：${videoElement.videoWidth}x${videoElement.videoHeight}`);
});
} catch (error) {
console.error('获取摄像头失败：', error);
}
}
3. screen 屏幕相关接口
VR场景通常需要全屏展示，并且需要获取屏幕的刷新率、分辨率等信息来优化渲染效果，BOM的screen对象可以提供这些基础数据。
// 获取屏幕信息适配VR渲染
function getScreenInfo() {
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const screenRefreshRate = window.screen.refreshRate || 60; // 部分浏览器支持获取刷新率
console.log(`屏幕尺寸：${screenWidth}x${screenHeight}，刷新率：${screenRefreshRate}Hz`);
// 可根据刷新率调整渲染帧率，避免画面卡顿
}
4. Fullscreen API 全屏接口
AR/VR场景需要沉浸式体验，BOM提供的全屏API可以让页面元素进入全屏模式，隐藏浏览器工具栏等干扰内容。
// 触发全屏模式
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
// 兼容webkit内核浏览器
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
// 兼容IE浏览器
element.msRequestFullscreen();
}
}
BOM与WebXR的配合实现完整流程
BOM仅提供基础硬件数据，完整的AR/VR功能还需要配合WebXR标准实现，以下是基础实现流程：
- 第一步：通过
navigator.xr判断浏览器是否支持WebXR，这是实现AR/VR的核心标准 - 第二步：使用BOM的
getUserMedia获取摄像头流（AR场景需要），使用DeviceOrientationEvent获取设备姿态 - 第三步：通过WebXR创建AR/VR会话，将BOM获取的设备数据同步到渲染逻辑中
- 第四步：使用全屏API进入沉浸式模式，完成功能闭环
实现注意事项
注意：DeviceOrientationEvent和getUserMedia接口都需要用户主动授权，不能在页面加载时直接调用，需要绑定用户点击事件触发权限申请。
另外，不同浏览器对BOM接口的支持程度不同，开发前需要做好兼容性判断，对于不支持的接口需要提供降级方案，比如提示用户更换浏览器。同时获取到的设备姿态数据可能存在偏移，需要结合实际场景做校准处理，才能保证AR/VR体验的准确性。
如果需要更复杂的空间定位、3D渲染能力，还需要引入Three.js等渲染库，BOM负责提供硬件数据输入，渲染库负责画面输出，二者配合才能实现完整的网页端AR/VR功能。
BOMAR/VRWebXRDeviceOrientationEventgetUserMedia修改时间：2026-07-20 00:15:27