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对象内的框，鼠标事件也能正常工作。

A帧.obj模型几何和事件

1 个答案: