2

我无法弄清楚为什么除了我的 gltf 模型之外，光标侦听器对所有实体都能正常工作。

这是我的html

<div id="myEmbeddedScene">
  <a-scene embedded="">
    <a-assets>
          <a-asset-item id="ducks" src="../images/test.glb"></a-asset-item>
    </a-assets>

    <a-box cursor-listener color="#CCC" width="3" depth="3" height="0.1" position="0 0 -2"></a-box>

    <a-entity cursor-listener id="duck" gltf-model="#ducks" position="0 0.1 -2" rotation="0 -90 0"></a-entity>

    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>

  </a-scene>
</div>

这里是来自 a-frame 的 cursor-listener 组件

AFRAME.registerComponent('cursor-listener', {
    init: function () {
            this.el.addEventListener('click', function (evt) {
            console.log('I was clicked');               
        });
  }
});

控制台日志对于盒子实体来说很好，但对于 gltf 模型则不然。请问有人可以提供他们的建议吗？

4

1 回答 1

1

您遇到了此处描述的问题：加载模型后，需要刷新用于检测点击的光线投射器，以便它了解模型。

我们正在为 A-Frame 0.8.0 提供更强大的解决方案，但与此同时，您可以通过以下方式解决该问题：

AFRAME.registerComponent('raycaster-autorefresh', {
  init: function () {
    var el = this.el;
    this.el.addEventListener('model-loaded', function () {
      var cursorEl = el.querySelector('[raycaster]');
      cursorEl.components.raycaster.refreshObjects();
    });
  }
});

然后，您需要将 添加raycaster-autorefresh到您的场景元素中。这是一个显示解决方案的 Codepen。

于 2017-10-31T16:24:29.303 回答