AR.js(A-Frame)扫描AR Marker时无法同时显示两个模型的问题

你的代码核心逻辑没问题，但可能因为以下几个原因导致无法正常运行，对应修复方案如下：

1. 模型位置重叠导致视觉上无法区分 #

原代码中两个模型的position都设为0 0 0，会完全重叠在一起，看起来像是只显示了一个甚至都没显示。调整两个模型的位置参数，让它们错开：

<a-marker type="pattern" url="marker.patt" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA" >
  <a-entity id="bowser1-model" gltf-model="url(model1.glb)" position="0 0 0" scale="1.6 1.6 1.6" class="clickable" gesture-handler ></a-entity>
  <!-- 调整第二个模型的x轴位置，避免重叠 -->
  <a-entity id="bowser2-model" gltf-model="url(model2.glb)" position="1 0 0" scale="1.6 1.6 1.6" class="clickable" gesture-handler ></a-entity>
</a-marker>

2. 缺失AR.js基础场景配置 #

确保你的<a-scene>标签包含AR.js的必要属性，否则Marker检测和模型渲染都无法正常工作：

<a-scene arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
  <!-- 你的marker和模型代码放在这里 -->
  <a-marker type="pattern" url="marker.patt" ...>...</a-marker>
  <a-entity camera></a-entity>
</a-scene>

3. 验证依赖脚本与资源路径 #

• 确保已正确引入A-Frame和AR.js的脚本：

  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  

• 检查model1.glb、model2.glb、marker.patt的文件路径是否正确，确保这些文件和HTML页面在同一目录，或者路径填写无误。

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
  <a-scene arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
    <a-marker type="pattern" url="marker.patt" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA">
      <a-entity id="bowser1-model" gltf-model="url(model1.glb)" position="0 0 0" scale="1.6 1.6 1.6" class="clickable" gesture-handler></a-entity>
      <a-entity id="bowser2-model" gltf-model="url(model2.glb)" position="1 0 0" scale="1.6 1.6 1.6" class="clickable" gesture-handler></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

内容的提问来源于stack exchange，提问作者Basiir - MY