RelativeOrientationSensor用于获取设备相对于初始方向的姿态变化，适合捕捉手腕微调等细微旋转，需HTTPS、用户交互及浏览器支持；初始化时设高频率，四元数可转欧拉角解读，配合滤波、平滑与重置提升精度。
RelativeOrientationSensor 可以获取设备相对于初始方向的姿态变化，适合捕捉手持设备的细微旋转（如手腕微调、设备轻微倾斜），但需注意它不提供绝对朝向，只反映相对转动。
启用传感器前的必要准备
该传感器属于未经许可的传感器（Permissionless Sensor），但仍需满足以下条件：
- 页面必须通过 HTTPS 提供（本地开发可使用
localhost） - 用户已与页面发生交互（如点击、触摸），否则部分浏览器会延迟启动传感器
- 设备需支持
RelativeOrientationSensor（现代 Android Chrome / Edge / Samsung Internet 通常支持；iOS Safari 不支持） - 检查浏览器兼容性：
'RelativeOrientationSensor' in window
创建并启动 RelativeOrientationSensor 实例
初始化时建议设置较高频率（如 frequency: 60），以提升对细微姿态变化的响应灵敏度：
let sensor;
if (typeof RelativeOrientationSensor !== 'undefined') {
sensor = new RelativeOrientationSensor({ frequency: 60 });
sensor.addEventListener('reading', () => {
const { x, y, z, w } = sensor.quaternion;
// 四元数表示相对旋转，w 是标量分量
console.log('Quaternion:', { x, y, z, w });
});
sensor.addEventListener('error', (event) => {
console.error('Sensor error:', event.error);
});
sensor.start(); // 必须显式调用 start()
} else {
console.warn('RelativeOrientationSensor not supported');
}将四元数转化为直观姿态数据
四元数本身不易解读，常需转换为欧拉角（pitch/yaw/roll）来理解设备朝向变化：
立即学习“前端免费学习笔记（深入）”；
- roll（绕 Z 轴旋转）：反映设备左右倾斜（如拿手机侧翻查看）
- pitch（绕 X 轴旋转）：反映设备俯仰（如抬头看屏幕顶部、低头看底部）
- yaw（绕 Y 轴旋转）：反映设备水平转向（如转动手腕让屏幕朝左/右）
可用简单函数将四元数转为弧度制欧拉角（适用于小角度变化场景）：
function quatToEuler(x, y, z, w) {
const sqx = x * x;
const sqy = y * y;
const sqz = z * z;
const sqw = w * w;
const pitch = Math.asin(2 * (x * z + y * w));
const yaw = Math.atan2(2 * (x * w - y * z), 1 - 2 * (sqx + sqz));
const roll = Math.atan2(2 * (y * w - x * z), 1 - 2 * (sqy + sqz));
return { pitch, yaw, roll };
}注意：该公式在 pitch 接近 ±90° 时会出现万向节死锁，但对“细微姿态”（如 ±15° 内）完全适用。
优化细微姿态捕捉的实用技巧
为提升对微小动作的感知能力，可结合以下策略：
-
滤除静止噪声：计算四元数变化量（如与上一帧的点积），仅当
dot > 0.9999（对应约 0.5° 以内变化）才视为有效更新 - 平滑处理：对欧拉角做移动平均（如保留最近 3–5 帧均值），抑制高频抖动
-
重置参考系：允许用户双击或长按触发
sensor.reset()（部分实现支持），重新定义“初始姿态”，避免长期漂移累积 -
降级兼容：若 RelativeOrientationSensor 不可用，可回退至 DeviceOrientation API 的
rotationRate或absoluteOrientation（需权限），但精度和延迟略差
