G帧中的gltf光标侦听器单击事件 [英] gltf cursor-listener click event in A-frame

问题描述

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

I am unable to figure out why cursor-listener works fine for all the entities except for my gltf model.

这是我的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帧中的光标侦听器组件

and here goes the cursor-listener component from a-frame

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

对于box实体，控制台日志就很好了，但是对于gltf模型来说，控制台日志就很好了。请有人可以提供建议吗？

The console log occurs just fine for the box entity but not for the gltf model. Please could someone offer their advise?

推荐答案

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

You've run into the issue described here: After a model loads, the raycaster used to detect clicks needs to be refreshed, so that it knows about the model.

我们为A-提供了更强大的解决方案框架0.8.0，但与此同时，您可以使用以下方法解决此问题：

We have a more robust solution on the way for A-Frame 0.8.0, but in the meantime you can work around the problem with something like this:

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 。

You would then need to add the raycaster-autorefresh to your scene element. Here is a Codepen showing the solution.

这篇关于G帧中的gltf光标侦听器单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！