HTML5的OrientationSensor可获取设备三维朝向，需HTTPS/localhost环境及运动传感器权限；iOS需降级为DeviceOrientationEvent；使用四元数避免万向节锁，并注意坐标系映射以确保3D效果正确。
HTML5 的 OrientationSensor（属于 Generic Sensor API）可用于获取设备的三维空间朝向（欧拉角或四元数），配合 WebGL 或 CSS 3D 变换，就能实现随手机摆动实时更新的 3D 效果。但需注意：该 API 目前仅在支持 Secure Context（HTTPS 或 localhost）且启用传感器权限的现代浏览器中可用（如 Chrome on Android/iOS Safari 需额外配置）。
前提条件与权限准备
确保页面运行在 HTTPS 或 localhost 下；iOS Safari 默认不支持 OrientationSensor，需用 DeviceOrientationEvent 降级；Android Chrome 需用户主动授予“运动传感器”权限（首次访问会弹出提示）。可在页面加载后调用 requestPermission 显式申请：
if (typeof DeviceMotionEvent.requestPermission === 'function') { DeviceMotionEvent.requestPermission(); }- 对于
OrientationSensor，需检查'OrientationSensor' in window，再实例化
使用 OrientationSensor 获取旋转数据
创建 OrientationSensor 实例，监听 reading 事件，它提供四元数 quaternion（[x, y, z, w]）或欧拉角（需启用 referenceFrame: 'device'）。推荐用四元数避免万向节锁：
const sensor = new OrientationSensor({ referenceFrame: 'device' });sensor.addEventListener('reading', () => { console.log(sensor.quaternion); });-
sensor.start();启动后每秒约 60 次触发（取决于硬件）
映射到 3D 变换（CSS 或 WebGL）
将四元数转为 CSS transform: rotate3d() 最简方案：用 quaternion.toRotationMatrix()（需自行实现或引入轻量 math 库如 gl-matrix），再提取欧拉角或直接构造旋转矩阵；更推荐用 quaternion 直接驱动 Three.js 场景的相机或物体：
- Three.js 中：
camera.quaternion.fromArray(sensor.quaternion);（需确保 sensor 坐标系与 Three.js 一致，常需翻转 Y/Z 轴） - CSS 方案：用
quat2mat4将四元数转 4×4 矩阵，再用matrix3d(...)应用到元素上 - 注意坐标系差异：手机默认 Z 轴指向屏幕外，而多数 Web 3D 使用 Y 向上，需做轴映射（如交换 y/z 并翻转 z）
兼容性兜底：降级到 DeviceOrientationEvent
当 OrientationSensor 不可用时，监听 deviceorientation 事件获取 alpha（方位角）、beta（俯仰角）、gamma（横滚角）：
window.addEventListener('deviceorientation', e => { const q = eToQuaternion(e.alpha, e.beta, e.gamma); });- 注意：该事件返回角度为度，且
alpha在 iOS 上可能受限（需手动开启权限），且无绝对参考系，适合简单交互而非高精度导航 - 可封装统一接口，内部自动选择最优传感器源
不复杂但容易忽略的是坐标系对齐和权限时机——传感器数据错一位，3D 效果就反向旋转。建议从一个静止立方体开始调试，逐轴验证转动方向是否符合直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
