26、游戏开发应用：陀螺仪控制 3D 物体旋转的实践

终于到了最让人兴奋的环节了。

前面我们学了那么多传感器原理、数据滤波、坐标系转换，说实话，都是为了这一刻——让陀螺仪真正动起来，控制一个 3D 物体在屏幕上旋转。

我个人觉得，这是理解陀螺仪价值最快的方式。你想想看，一个虚拟的立方体，你手机怎么转，它就怎么转，那种实时反馈的感觉，比看一堆数据曲线直观多了。

从数据到旋转：核心思路

陀螺仪输出的是角速度，单位是 rad/s（弧度每秒）。我们要做的，就是把每一帧的角速度累加起来，得到当前的总旋转角度。

说白了，就是积分。

我记得第一次做这个 demo 时，直接拿原始数据去积分，结果物体疯狂漂移，根本停不下来。后来才意识到，原始数据里有零偏和噪声，积分会让误差不断累积。

实践环境准备

我们这次用 Three.js 来渲染 3D 场景。它是一个轻量级的 WebGL 库，上手很快。

• 前端框架： 纯 HTML + JavaScript
• 3D 引擎： Three.js（通过 CDN 引入）
• 传感器接口： DeviceOrientation API（封装了陀螺仪和加速度计）
• 测试设备： 一部支持陀螺仪的 Android 手机（真机调试）

为什么用 DeviceOrientation API 而不是直接读陀螺仪？因为浏览器已经帮我们做了坐标系对齐和部分滤波，省去了很多底层工作。当然，如果你追求极致精度，还是得走原生 SensorManager。

核心代码实现

我们先搭一个最简单的 3D 场景，然后让一个立方体跟随手机旋转。

// 1. 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00aaff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 4. 监听陀螺仪数据
window.addEventListener('deviceorientation', function(event) {
    // alpha: 绕 Z 轴旋转（0-360）
    // beta: 绕 X 轴旋转（-180 到 180）
    // gamma: 绕 Y 轴旋转（-90 到 90）
    const alpha = event.alpha;  // 航向角
    const beta = event.beta;    // 俯仰角
    const gamma = event.gamma;  // 横滚角

    // 应用到立方体
    cube.rotation.x = THREE.MathUtils.degToRad(beta);
    cube.rotation.y = THREE.MathUtils.degToRad(gamma);
    cube.rotation.z = THREE.MathUtils.degToRad(alpha);
});

// 5. 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这段代码看起来很简单，对吧？但实际跑起来你会发现一个问题——旋转顺序和坐标系对不上。

坐标系映射：避坑指南

我曾经在这个坑里卡了整整一个下午。

简单来说，手机平放时（屏幕朝上），beta 对应绕 X 轴旋转，gamma 对应绕 Y 轴旋转。但手机竖屏时，坐标系就变了。

一个比较稳妥的做法是：

1. 把 alpha/beta/gamma 转成四元数（Quaternion）
2. 再用四元数直接赋值给物体的 quaternion 属性

// 使用四元数避免万向锁和坐标系混乱
window.addEventListener('deviceorientation', function(event) {
    const alpha = event.alpha || 0;
    const beta = event.beta || 0;
    const gamma = event.gamma || 0;

    // 转成弧度
    const a = THREE.MathUtils.degToRad(alpha);
    const b = THREE.MathUtils.degToRad(beta);
    const g = THREE.MathUtils.degToRad(gamma);

    // 创建四元数（注意顺序：ZYX）
    const quat = new THREE.Quaternion();
    quat.setFromEuler(new THREE.Euler(b, g, a, 'ZYX'));

    // 直接赋值
    cube.quaternion.copy(quat);
});

这样改完之后，立方体的旋转就跟手机完全同步了。你试试把手机绕各个轴转，立方体都会跟着动。

知识体系：陀螺仪控制 3D 物体的核心流程

下面这张图，是我自己总结的，从传感器数据到屏幕渲染的完整链路。

性能优化与调试技巧

在实际项目中，你可能会遇到几个问题：

• 卡顿： 如果物体旋转不流畅，检查一下动画循环里有没有做耗时操作。我一般把传感器数据更新和渲染分开，用独立的定时器读传感器。
• 漂移： 积分漂移是陀螺仪的老毛病。可以加一个高通滤波器，或者定期用加速度计做姿态校正（互补滤波）。
• 权限问题： 在 Android Chrome 上，DeviceOrientation 需要用户手势触发。记得加一个「点击开始」按钮。

好了，今天的实践就到这里。你可以在手机上跑一下这段代码，感受一下陀螺仪控制 3D 物体的魅力。相信我，当你看到立方体跟着你的手一起转动时，那种成就感是数据表格给不了的。

公众号:蓝海资料掘金营，微信deep3321