device motion api不提供原始陀螺仪数据，仅输出融合后的rotationrate和加速度；需请求accelerometer/gyroscope权限，且devicemotion在safari/ios需用户交互后才生效；rotationrate为弧度/秒角速度，须积分并滤零漂用于3d姿态估算。
Device Motion API 本身不直接提供原始陀螺仪数据，它提供的是经过设备系统融合处理后的相对旋转角度（rotationRate）和加速度（acceleration、accelerationIncludingGravity）。所谓“原始陀螺仪数据”在标准 Web API 中并不可用——浏览器出于隐私与安全限制，不会暴露未经校准、未融合的底层传感器原始流。但你可以用 rotationRate 作为高精度角速度输入，驱动 3D DOM 场景实现自然、低延迟的联动。
确认权限与启用传感器
现代浏览器要求明确请求运动传感器权限：
- 调用
navigator.permissions.query({ name: "accelerometer" })和"gyroscope"权限（注意：部分浏览器将二者合并为"motion"） - 必须在用户手势（如点击、触摸）后发起请求，不能自动触发
- 监听
deviceorientation事件仅需页面可见即可，但devicemotion在 Safari/iOS 上仍需用户交互授权后才开始派发有效数据
解析 rotationRate 实现姿态映射
rotationRate 返回每秒绕 x/y/z 轴的弧度变化量（rad/s），是连续、高采样率（通常 60Hz+）的角速度信号。要用于 3D 场景，需做积分累积（即姿态估算）：
- 使用简单欧拉积分：
alpha += rotationRate.alpha * deltaTime（单位统一为度或弧度） - 推荐用
requestAnimationFrame控制时间步长，避免依赖setInterval - 务必对
rotationRate做零漂过滤（如剔除绝对值 - 若需更高稳定性，可结合
deviceorientation的beta/gamma做互补滤波，但注意其更新频率较低（~30Hz）、有延迟
绑定到 3D DOM 元素（CSS 3D 或 Three.js）
无论用纯 CSS transform: rotateX() rotateY() rotateZ() 还是 Three.js 场景，核心是把积分后的欧拉角同步到渲染层：
- CSS 方式：用
element.style.transform = `rotateX(${beta}deg) rotateY(${gamma}deg) rotateZ(${alpha}deg)`，注意顺序影响结果，建议按 Y→X→Z（类似航向-俯仰-滚转） - Three.js 方式：用
camera.rotation.set(thetaX, thetaY, thetaZ)或更鲁棒的camera.quaternion.setFromEuler(euler) - 务必启用硬件加速：给 3D 元素添加
transform-style: preserve-3d和will-change: transform
规避常见陷阱
实际落地时几个关键细节容易导致体验断裂：
- iOS Safari 默认禁用
devicemotion，需在<meta name="apple-mobile-web-app-capable" content="yes">+ 全屏模式下才稳定工作 - Android Chrome 对后台标签页会暂停传感器，切出页面再切回需重新初始化监听
- 不要直接用
rotationRate驱动 CSS 动画帧（如@keyframes），必须走 JS 渲染循环，否则无法响应实时数据 - 首次加载时
rotationRate可能为null，应监听devicemotion事件后检查字段存在性再启用逻辑
不复杂但容易忽略：真正的“原始”数据在 Web 环境中并不存在，rotationRate 就是你能拿到的最接近、最实用的角速度源。用好它，比追求底层更可靠。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
