AR.js 场景中可点击对象的错误位置

Question

我有一个简单的 AR.js 场景，它应该在 hiro 标记上显示一个可点击的白框。单击后框的颜色应变为红色。其实这个盒子是可以点击的，颜色也在变化，但是它的位置和它的可点击区域的位置不一样。在我的例子中，这个区域在盒子下面。这是一个代码示例：

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
  <script>
    AFRAME.registerComponent('clickhandler', {
      init: function () {
        this.el.addEventListener('click', () => {
          this.el.setAttribute('material', 'color: red;');
        });
      },
    });
  </script>
  <body>
    <a-scene embedded arjs>
      <a-marker cursor="rayOrigin: mouse;" preset="hiro">
        <a-box
          material="color: white;"
          position="0 0 0"
          depth="0.2"
          height="0.01"
          width="0.2"
          clickhandler
        />
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

但是，如果您打开 aframe 检查器 (Ctrl + Alt + I) 然后关闭它，框的可点击区域及其位置将是正确的，我不明白这是怎么回事。那么如何才能让这个场景以正确的方式显示呢？

Answer 1

我研究了 aframe inspector 的工作原理，发现它在初始化后以编程方式插入了一个新的 raycaster，所以我决定这样做并且成功了！

要将可点击区域与其对象放在同一位置，您需要做的就是在场景完全初始化后执行这些行。

const scene = AFRAME.scenes[0];
if (!scene) {
  return;
}
const mouseCursor = document.createElement('a-entity');
mouseCursor.setAttribute('cursor', 'rayOrigin', 'mouse');
scene.appendChild(mouseCursor);

AR.js 场景中可点击对象的错误位置

Wrong position of a clickable object on AR.js scene

aframe

ar.js