使用AFrame与ar.js开发标记型AR时移动端标记平面识别异常求助

• 禁用陀螺仪干扰：你此前修改look-controls属性未生效，是因为AR.js的相机控制优先级高于AFrame默认的视角控制，直接在<a-scene>标签的arjs属性中添加deviceOrientationEnabled: false，同时关闭VR模式UI即可完全屏蔽设备姿态跟踪的影响，参考配置：

<a-scene arjs="deviceOrientationEnabled: false;" vr-mode-ui="enabled: false">

• 适配移动端宽高比：手动指定AR.js的视频流采集和显示参数，避免默认参数与移动端屏幕比例不匹配导致的平面识别偏移，可通过JS动态获取视口尺寸适配不同设备，参考代码：

<script>
window.addEventListener('DOMContentLoaded', () => {
  const scene = document.querySelector('a-scene');
  const arjsConfig = `
    sourceWidth: 1280;
    sourceHeight: 720;
    displayWidth: ${window.innerWidth};
    displayHeight: ${window.innerHeight};
    detectionMode: mono_and_matrix;
    matrixCodeType: 3x3;
    deviceOrientationEnabled: false;
  `;
  scene.setAttribute('arjs', arjsConfig);
})
</script>

• 固定标记物理尺寸：在<a-marker>标签中明确指定标记的实际边长（单位为米），匹配你实际使用的标记打印尺寸，避免识别尺度偏差导致的平面贴合错误，参考配置：

<a-marker type="barcode" value="你的标记对应ID" size="0.1">
  <!-- 此处放置你的红色立方体、动物2D图像等AR内容 -->
</a-marker>

• （可选）添加相机校准参数：如果以上调整后仍存在偏移，可生成对应设备的摄像头校准参数加载到AR.js中，抵消移动端摄像头的光学畸变影响。

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