AframeのマーカーARでa-cameraやa-marker-cameraを使うとマーカーと物体位置がズレる

なぜかなと思って、ずっと別の方法で誤魔化していたが解決したので記。

現象

ダメなパターンは以下、a-cameraを使っている。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="https://aframe.io/releases/1.2.0/aframe.min.js "></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js" ></script>
  </head>
  <body style="margin: 0; overflow: hidden; height: 100%">
    <a-scene
      embedded
      arjs="trackingMethod: best; sourceType: webcam; detectionMode:mono_and_matrix; debugUIEnabled: false;"
    >
      <a-camera></a-camera>
      <a-marker type="barcode" value="1" >
        <a-box position="0 0.5 0" wireframe="true" color="black"></a-box>
      </a-marker>
    </a-scene>
  </body>
</html>