如何实现移动手机即可全角度查看链接中托管的3D图像

你已经完成了传感器权限申请和欧拉角读取，接下来只需要完成坐标系适配、视角映射、平滑处理这几步即可实现需求：

1. 欧拉角与3D相机的坐标系适配 #

首先明确手机传感器返回的三类欧拉角的定义：

• Alpha：绕垂直于地面的Z轴旋转的角度，取值范围0~360°，对应手机水平左右转动的角度
• Beta：绕手机横向X轴旋转的角度，取值范围-180~180°，对应手机前后俯仰的角度
• Gamma：绕手机纵向Y轴旋转的角度，取值范围-90~90°，对应手机左右倾斜的角度

不同3D渲染引擎的默认坐标系和传感器坐标系可能存在轴方向、单位的差异，需要做对应映射，以常用的Three.js为例，基础映射规则如下（如果出现视角反向，直接给对应轴的计算结果加负号即可）：

// 欧拉角是角度单位，3D引擎用弧度单位，需要先做转换
camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = alpha * Math.PI / 180;
camera.rotation.z = gamma * Math.PI / 180;

2. 初始视角校准 #

为了避免用户打开页面时3D模型初始视角偏移，第一次获取到欧拉角时需要记录初始值作为基准，后续只计算相对初始位置的偏移量：

let initAlpha = null, initBeta = null, initGamma = null;

// 传感器数据回调函数
function handleSensor(e) {
  const { alpha, beta, gamma } = e;
  // 首次触发时记录初始值
  if (initAlpha === null) {
    initAlpha = alpha;
    initBeta = beta;
    initGamma = gamma;
    return;
  }
  // 计算相对偏移量
  const deltaA = alpha - initAlpha;
  const deltaB = beta - initBeta;
  const deltaG = gamma - initGamma;
  
  // 赋值给相机旋转
  camera.rotation.x = deltaB * Math.PI / 180;
  camera.rotation.y = deltaA * Math.PI / 180;
  camera.rotation.z = deltaG * Math.PI / 180;
}

3. 可选优化项 #

视角边界限制 #

避免用户转动幅度过大出现穿模、视角错乱的问题，给相机旋转角度加范围限制：

// 以俯仰角为例，限制在-80°~80°之间
const clampedX = Math.max(-80 * Math.PI/180, Math.min(80 * Math.PI/180, camera.rotation.x));
camera.rotation.x = clampedX;

抖动平滑处理 #

部分机型传感器返回数值存在高频抖动，可以加低通滤波做数值平滑：

const smoothFactor = 0.1; // 数值越小越平滑，响应速度越慢
let smoothA = 0, smoothB = 0, smoothG = 0;

// 在传感器回调里替换直接赋值的逻辑
smoothA = smoothA * (1 - smoothFactor) + deltaA * smoothFactor;
smoothB = smoothB * (1 - smoothFactor) + deltaB * smoothFactor;
smoothG = smoothG * (1 - smoothFactor) + deltaG * smoothFactor;

camera.rotation.y = smoothA * Math.PI / 180;
camera.rotation.x = smoothB * Math.PI / 180;
camera.rotation.z = smoothG * Math.PI / 180;

注意事项 #

• 传感器接口仅支持HTTPS环境和localhost本地调试环境，部署到线上必须开HTTPS
• 不同品牌手机的传感器返回方向可能存在差异，测试时如果出现转动方向和预期相反，直接给对应偏移量加负号即可调整

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