A-frame .obj 模型几何和事件

Question

我正在尝试在 obj 上设置鼠标事件。 A 框架中的模型。我注意到我的对象不会触发任何鼠标事件（mouseenter、mouseleave、click...）。所以我在对象中添加了geometry="primitive: box; height: 50; width: 50; depth: 50"，事件开始起作用了……但我希望对象触发事件而不是里面的框。

问题：

有没有办法制作一个类似于对象的复杂几何图形？ 我做错了什么，我的对象应该触发没有几何属性的鼠标事件吗？

代码：

<a-assets>
        <a-asset-item id="heart-obj" src="Heart.obj"></a-asset-item>
        <a-asset-item id="heart-mtl" src="Heart.mtl"></a-asset-item>
</a-assets>

<a-entity   id="heart"
    obj-model="obj: #heart-obj; mtl: #heart-mtl"
    geometry="primitive: box; height: 50; width: 50; depth: 50"
    scale="0.1 0.1 0.1" 
    position="0 1.6 -12" 
    event-set__enter="_event: mouseenter; _target: #heartText; visible: true"
    event-set__leave="_event: mouseleave; _target: #heartText; visible: false">
    <a-text id="heartText" 
        value="This is a heart" 
        align="center" 
        color="#FFF" 
        visible="false"
        scale="10 10 10"
        position="-15 24 27"
        geometry="primitive: plane; width: 2" 
        material="color: #333">
    </a-text>
</a-entity>

<a-camera>
    <a-cursor id="cursor"></a-cursor>
</a-camera>

进口

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>

Answer 1

感谢@DonMcCurdy 的提示。

所以我添加了（from）：

AFRAME.registerComponent('raycaster-refresh', {
  init: function () {
    var sceneEl = this.el.sceneEl;
    sceneEl.addEventListener('object3dset', function () {
      var raycasterEl = sceneEl.querySelector('[raycaster]');
      raycasterEl.components.raycaster.refreshObjects();
    });
  }
});

<a-scene raycaster-refresh>
...
</a-scene>

鼠标事件现在即使在 3D 对象内没有框的情况下也能正常工作。