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

【问题标题】：Wrong position of a clickable object on AR.js sceneAR.js 场景中可点击对象的位置错误
【发布时间】：2021-05-13 12:13:50
【问题描述】：

我有一个简单的 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) 然后将其关闭，框的可点击区域及其位置将是正确的，我不明白这是怎么回事。那么如何才能让这个场景以正确的方式显示呢？

【问题讨论】：

标签： aframe ar.js

【解决方案1】：

我探索了 aframe 检查器的工作原理，发现它会在初始化后以编程方式插入一个新的光线投射器，所以我决定做同样的事情并且它起作用了！

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

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

【讨论】：