ar.js桌面与移动端网格宽高比不一致，如何统一为桌面端比例？

这个问题在AR.js开发里挺常见的，核心原因是移动端和桌面设备的屏幕比例不同，AR.js默认会根据设备原生屏幕比例自动调整相机投影矩阵，导致3D网格的显示比例出现差异。下面给你几个具体的解决步骤，结合你的代码来调整：

1. 先明确目标宽高比 #

首先确定你想要统一的宽高比（比如桌面端当前使用的16:9、4:3，或者自定义比例），假设我们目标比例是16/9，后面的配置都基于这个值。

2. 初始化AR上下文时固定画布尺寸 #

修改你现有的ArToolkitContext初始化代码，添加固定的画布宽高参数，强制AR检测和渲染使用统一比例的画布：

// 创建arToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
  cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 'patterns/camera_para.dat',
  detectionMode: 'mono',
  // 设置固定宽高，保证16:9的比例
  canvasWidth: 1280,
  canvasHeight: 720
});

3. 强制相机保持固定宽高比 #

在渲染循环中，手动设置相机的aspect属性为目标比例，并且更新投影矩阵，确保3D物体的投影始终符合这个比例：

const targetAspectRatio = 16/9; // 替换成你需要的比例

function renderLoop() {
  // 强制相机aspect为目标比例
  camera.aspect = targetAspectRatio;
  camera.updateProjectionMatrix();

  // 执行AR检测和渲染
  arToolkitContext.update(arToolkitSource.domElement);
  renderer.render(scene, camera);
  
  requestAnimationFrame(renderLoop);
}

4. 适配窗口 resize 事件 #

当窗口或屏幕尺寸变化时，调整渲染器的尺寸，但保持目标宽高比，避免拉伸变形：

window.addEventListener('resize', function() {
  const targetAspectRatio = 16/9;
  let viewportWidth = window.innerWidth;
  let viewportHeight = window.innerHeight;

  // 根据目标比例计算合适的渲染尺寸
  if (viewportWidth / viewportHeight > targetAspectRatio) {
    // 窗口太宽，以高度为基准计算宽度
    viewportWidth = viewportHeight * targetAspectRatio;
  } else {
    // 窗口太高，以宽度为基准计算高度
    viewportHeight = viewportWidth / targetAspectRatio;
  }

  // 更新渲染器和AR上下文的尺寸
  renderer.setSize(viewportWidth, viewportHeight);
  arToolkitContext.onResize(viewportWidth, viewportHeight);
});

5. 确保网格本身比例固定 #

最后检查你创建的3D网格（比如PlaneGeometry），确保它的宽高比是固定的，不要动态依赖标记尺寸调整。例如：

// 创建固定比例的网格（比如1:1.5的矩形）
const geometry = new THREE.PlaneGeometry(1, 1.5);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

这样调整后，不管是桌面还是移动端，网格的宽高比都会保持一致，不会因为设备屏幕比例不同而变形。

内容的提问来源于stack exchange，提问作者Игорь Токарев