如何用设备姿态实现Three.js第一人称视角自由相机控制

我明白你的需求——不用OrbitControls，而是自己实现和键盘控制逻辑完全对齐的设备姿态漫游，核心就是把设备的陀螺仪/姿态数据映射到相机的旋转视角和位移移动上，和你自定义的键盘控制保持一致。下面是具体的实现方案和代码示例：

核心思路 #

键盘控制的本质是：

• 按键触发相机沿自身坐标系的前后/左右/上下位移
• 按键触发相机绕自身X/Y轴的视角旋转

姿态控制就是把设备的姿态数据对应到这两个行为上：

• 设备的**转动（alpha/beta值）**对应相机的视角旋转（替代方向键的视角控制）
• 设备的**倾斜（gamma/beta值）**对应相机的位移（替代W/A/S/D的移动控制）

步骤1：处理设备权限（必做） #

现在主流浏览器（尤其是iOS Safari、Chrome）要求用户主动交互才能获取设备姿态权限，所以先加一个授权按钮：

<button id="enableMotion" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;">开启姿态控制</button>

步骤2：初始化相机与控制变量 #

和你键盘控制的配置保持一致，比如移动速度、旋转速度：

import * as THREE from 'three';

let camera;
const moveSpeed = 0.15; // 和你键盘控制的移动速度一致
const rotateSmoothFactor = 0.1; // 旋转平滑系数，避免抖动
let isMotionEnabled = false;
let currentQuaternion = new THREE.Quaternion(); // 用于平滑旋转

步骤3：请求权限并监听姿态事件 #

// 初始化相机（替换成你自己的相机初始化逻辑）
function initCamera() {
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 1.6, 5); // 模拟人眼高度
}

// 请求姿态权限
document.getElementById('enableMotion').addEventListener('click', async () => {
  if (typeof DeviceOrientationEvent.requestPermission === 'function') {
    try {
      const permission = await DeviceOrientationEvent.requestPermission();
      if (permission === 'granted') {
        enableMotionControl();
      }
    } catch (err) {
      console.error('姿态权限请求失败:', err);
    }
  } else {
    // Android等非iOS设备直接启用
    enableMotionControl();
  }
});

function enableMotionControl() {
  isMotionEnabled = true;
  window.addEventListener('deviceorientation', handleDeviceOrientation);
  document.getElementById('enableMotion').style.display = 'none';
}

步骤4：处理姿态数据，映射到相机旋转与移动 #

这部分是核心，要处理坐标系转换、旋转平滑、移动逻辑：

function handleDeviceOrientation(event) {
  if (!isMotionEnabled || !camera) return;

  // 获取姿态数据（转成弧度）
  const alpha = event.alpha ? THREE.MathUtils.degToRad(event.alpha) : 0;
  const beta = event.beta ? THREE.MathUtils.degToRad(event.beta) : 0;
  const gamma = event.gamma ? THREE.MathUtils.degToRad(event.gamma) : 0;

  // 1. 处理相机旋转（对应键盘的视角控制）
  // 坐标系转换：设备姿态 → Three.js相机坐标系，旋转顺序用YXZ符合第一人称视角
  const targetEuler = new THREE.Euler(beta, alpha, -gamma, 'YXZ');
  const targetQuaternion = new THREE.Quaternion().setFromEuler(targetEuler);

  // 限制俯仰角度，避免相机翻转（比如限制在±85度）
  const maxPitch = Math.PI / 2 - 0.1;
  const currentPitch = Math.asin(2 * (targetQuaternion.x * targetQuaternion.w - targetQuaternion.y * targetQuaternion.z));
  if (Math.abs(currentPitch) > maxPitch) {
    targetEuler.x = currentPitch > 0 ? maxPitch : -maxPitch;
    targetQuaternion.setFromEuler(targetEuler);
  }

  // 平滑旋转，避免抖动
  currentQuaternion.slerp(targetQuaternion, rotateSmoothFactor);
  camera.quaternion.copy(currentQuaternion);

  // 2. 处理相机移动（对应键盘的W/A/S/D）
  // 用设备倾斜程度判断移动方向：beta前倾→向前，gamma左倾→向左，以此类推
  const tiltThreshold = 0.1; // 倾斜阈值，避免微小抖动触发移动
  const moveForward = beta > tiltThreshold;
  const moveBackward = beta < -tiltThreshold;
  const moveLeft = gamma < -tiltThreshold;
  const moveRight = gamma > tiltThreshold;

  // 获取相机的前后/左右方向向量（保持水平移动，忽略Y轴）
  const forwardDir = new THREE.Vector3();
  camera.getWorldDirection(forwardDir);
  forwardDir.y = 0;
  forwardDir.normalize();

  const rightDir = new THREE.Vector3();
  rightDir.crossVectors(camera.up, forwardDir).normalize();

  // 应用位移，和键盘控制逻辑完全一致
  if (moveForward) camera.position.add(forwardDir.multiplyScalar(moveSpeed));
  if (moveBackward) camera.position.add(forwardDir.multiplyScalar(-moveSpeed));
  if (moveLeft) camera.position.add(rightDir.multiplyScalar(-moveSpeed));
  if (moveRight) camera.position.add(rightDir.multiplyScalar(moveSpeed));
}

步骤5：添加上下移动控制（替代键盘Q/E） #

姿态控制不好直接对应上下移动，推荐用触摸事件实现，比如触摸屏幕上下半区：

document.addEventListener('touchstart', (e) => {
  if (!isMotionEnabled || !camera) return;
  const touchY = e.touches[0].clientY;
  const halfHeight = window.innerHeight / 2;
  if (touchY < halfHeight) {
    // 触摸上半区→向上移动
    camera.position.y += moveSpeed * 2;
  } else {
    // 触摸下半区→向下移动
    camera.position.y -= moveSpeed * 2;
  }
});

关键注意事项 #

1. 坐标系兼容：iOS和Android的alpha初始值可能有差异，如果你的相机初始朝向不对，可以给alpha加一个偏移量（比如alpha += Math.PI）。
2. 抖动处理：设备姿态数据会有微小抖动，用slerp平滑旋转是必要的，也可以对移动方向做简单的防抖。
3. 速度适配：可以根据设备倾斜的幅度动态调整移动速度，比如const speed = moveSpeed * Math.abs(beta) / (Math.PI/2)，倾斜越大速度越快。
4. 多控制兼容：可以判断设备类型（比如用/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)），移动端启用姿态控制，桌面端保留键盘控制。

内容的提问来源于stack exchange，提问作者redfelix