代码之家 › 专栏 › 技术社区 › Niraj

gltf光标侦听器单击A帧中的事件

gltf aframe cursor click

Niraj · 技术社区 · 8 年前

我无法理解为什么游标侦听器对除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中的游标侦听器组件

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

控制台日志对于box实体来说是正常的,但对于gltf模型来说不是。请有人给点建议好吗?

1 回复 | 直到 8 年前

Don McCurdy 8 年前

你遇到了 issue described here :加载模型后,需要刷新用于检测点击的光线投射器,以便了解模型。

more robust solution on the way 对于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 showing the solution .

推荐文章

merko · 单击侦听器激发两次

8 年前

propoLis · 打开actionmode时,RecyclerView子级不单击

8 年前

ION · 如何使用DOM单击或触发

8 年前

user3186023 · 触发单击单选按钮可在切换前检查条件

8 年前

eozzy · 防止Vue中的事件冒泡

8 年前

ØµÙÙ Ø¹ÙÙ ÙØÙØ¯ - Atef Farouk · Admob视频奖励点击验证

8 年前

mtnp · 在javafx中创建长时间单击或按下按钮的方法

8 年前

Hamed Baziyad sagar pagare · 为什么单击selenium中的某些按钮不起作用?

8 年前

Sean Bean · 窗口调整后的jQuery悬停功能不能更改为单击功能

8 年前

muzzie · Javascript createRange。如何仅使用一个脚本选择不同的跨距?

8 年前