Model-Viewer Android端AR模式GLB模型初始加载缩放及位置异常问题

架构老林

2026-7-14

解决方案

针对Android设备上model-viewer加载GLB模型AR模式下初始缩放和位置异常的问题，可通过以下步骤修复：

调整模型原点至底部
大模型初始悬浮的核心原因是模型原点不在地面接触位置。使用3D工具（如Blender）或glTF Transform命令行工具将模型原点移至底部：
```
gltf-transform center input.glb output.glb --pivot bottom
```
确保导出的GLB模型原点与地面齐平，避免AR引擎加载时模型悬浮。

移除手动scale属性，依赖真实尺寸渲染
你设置的scale="0.01 0.01 0.01"会与ar-scale="fixed"冲突，后者会基于模型真实单位（如英尺、米）渲染。删除手动scale，添加ar-default-scale="1"确保初始缩放匹配模型真实尺寸：

<model-viewer 
    id="model-viewer"
    src="mymodel.glb" 
    ios-src="mymodel.usdz" 
    ar 
    ar-scale="fixed" 
    ar-default-scale="1"
    exposure="0.8"
    ar-placement="floor" 
    ar-modes="webxr scene-viewer quick-look"
    camera-controls 
    touch-action="pan-y" 
    alt="Kitchen Model" 
    environment-image="legacy"
  >
</model-viewer>

延迟模型渲染至地面检测完成
Android的AR引擎需要时间完成地面跟踪，初始阶段的定位数据可能不准确。通过监听ar-status事件，待跟踪稳定后再显示模型：

const viewer = document.getElementById('model-viewer');
viewer.style.visibility = 'hidden';
viewer.addEventListener('ar-status', (e) => {
  if (e.detail.status === 'tracking-normal') {
    viewer.style.visibility = 'visible';
  }
});

统一模型单位为米
AR引擎通常默认米为空间单位，若模型以英尺创建，可转换为米（18英尺≈5.486米），避免引擎自动缩放偏差。用glTF Transform转换单位：
```
gltf-transform scale input.glb output.glb --scale 0.3048
```