DeviceOrientation API通过beta和gamma获取设备倾斜角实现全景体感交互，需用Three.js渲染球面全景图并处理iOS权限及鼠标fallback。
HTML5 中的 DeviceOrientation API（特别是 deviceorientation 事件）可获取设备三维旋转角度（α、β、γ），是实现全景图体感查看的核心，但需注意：标准中没有独立的“Gyroscope”接口，浏览器不直接暴露原始陀螺仪角速度数据；实际使用的是融合后的欧拉角（由陀螺仪+加速度计+磁力计共同估算），足够用于全景交互。
1. 基础准备：全景图与容器
使用等距柱状投影（Equirectangular）格式的全景图（如 4096×2048 JPG），这是 WebGL 全景库最通用的输入格式。页面中只需一个全屏 或支持 WebGL 的容器（如 ），无需额外 DOM 结构。
2. 监听设备方向并转换为视角偏移
监听 deviceorientation 事件，将浏览器返回的 beta（前后倾斜）、gamma（左右倾斜）映射为水平（yaw）和垂直（pitch）旋转角度：
- beta ≈ pitch（上下视角）：-90°（抬头）→ +90°（低头），建议限制在 ±70° 防止翻转
- gamma ≈ yaw（左右视角）：-90°（左倾）→ +90°（右倾），可线性映射到 -180°~+180° 水平视场
- 忽略
alpha（设备朝向），因全景图无绝对“北”参考，且易受磁场干扰
示例片段：
let yaw = 0, pitch = 0;
window.addEventListener('deviceorientation', (e) => {
if (!e.beta || !e.gamma) return;
yaw = e.gamma * 1.5; // 放大横向灵敏度
pitch = Math.max(-70, Math.min(70, e.beta)); // 限幅
});3. 渲染全景：用 Three.js 快速实现（推荐）
手动写 WebGL 复杂且易出错，Three.js 提供成熟方案：
- 加载全景图作为球面材质：
new THREE.TextureLoader().load('pano.jpg') - 创建球体几何体（内面朝外）：
new THREE.SphereGeometry(500, 60, 40) - 每帧更新相机旋转：
camera.rotation.y = THREE.MathUtils.degToRad(yaw)，camera.rotation.x = THREE.MathUtils.degToRad(pitch) - 启用
requestAnimationFrame循环渲染，避免卡顿
4. 关键细节与兼容性处理
用户首次交互前，iOS Safari 和新版 Chrome 要求用户手势触发权限（如点击按钮）才能启用传感器：
- 页面加一个“开启体感”按钮，点击后调用
EventTarget.requestPermission?.()（仅 iOS 13+）或直接监听事件（Android/旧版） - 检测
DeviceOrientationEvent.requestPermission是否存在，有则显式请求；否则静默监听 - 添加 fallback：鼠标拖拽或触摸滑动控制视角，确保无陀螺仪设备也可用
- 避免频繁重绘：用
THREE.Clock.getDelta()控制更新频率，或仅当 yaw/pitch 变化 > 0.1° 时才更新
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
