Question

我有一个＆＃39;目标圈子＆＃39;组件是一个简单的圆圈，外面有一个环。我试图为整个组件获取mouseenter和mouseleave事件，但附加到父元素的事件侦听器会触发子实体，并且仅在raycaster时触发点击。

我尝试了各种方法来设置隐形命中测试圈/戒指以尝试缓解问题，但它们都有核心问题，即为子实体触发多个进入/离开事件。

是否可行/仅获取进入/离开整个父实体的事件的最佳方式是什么？

演示：https://output.jsbin.com/tucuxas/quiet

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
    <script>
      AFRAME.registerComponent('target-circle', {
        schema: {
          position: {type: 'vec3', default: {x: 0, y: 0, z: 0}}
        },

        init: function() {
          var el = this.el;

          el.setAttribute('position', this.data.position);
          el.object3D.lookAt(new THREE.Vector3(0, 0, 0));

          var outerRing = document.createElement('a-entity');
          outerRing.setAttribute('class', 'outerRing');
          outerRing.setAttribute('material', {
            color: 'black'
          });
          outerRing.setAttribute('geometry', {
            primitive: 'ring',
            radiusInner: '1.2',
            radiusOuter: '1.4'
          });

          var innerCircle = document.createElement('a-entity');
          innerCircle.setAttribute('class', 'innerCircle');
          innerCircle.setAttribute('material', {
            color: 'black'
          });
          innerCircle.setAttribute('geometry', {
            primitive: 'circle',
            radius: '0.3'
          });
          
          el.appendChild(outerRing);
          el.appendChild(innerCircle);
          
          el.addEventListener('mouseenter', function() {
            console.log('mouseenter');
          });
          
          el.addEventListener('mouseleave', function() {
            console.log('mouseleave');
          });
        }
      });
    </script>
  </head>
  <body>
    <a-scene>
      <a-entity target-circle='position: 0 3 -10'></a-entity>
      <a-entity camera look-controls>
        <a-entity id="cursor" cursor="fuse: false;" material="color: black; shader: flat;"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.001; radiusOuter: .005;  "></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

＆＃13;

Answer 1

虽然SamB的anwser在这种情况下是正确的，但我不确定阻塞css中的指针事件是否适用于所有光线队员（即使它应该），这是我的想法容器实体中的子节点，仅用于光线投射：

因为您的整个实体由一个环和一个小圆圈组成，所以父实体只是子实体的空持有者。
当你离开戒指时，mouseleave事件会触发，因为戒指和圆圈之间几乎没有任何东西。如果要填充空格（在2D中），您需要：

创建一个子实体，它将是一个带有外环半径的不可见圆。隐形意味着opacity = 0，而不是visible = false（因为可见属性负责渲染，而不是可见性），并将其放在其他孩子面前。
使父实体成为圆形基元，具有与上述相同的属性。

如果你想在3D空间而不是圆圈中填充它，请创建一个看不见的圆柱体，纸张很薄，这样就可以阻挡所有边的光线投射。
工作小提琴here。

Answer 2

在innerCircle和outerCircle的CSS类中添加以下属性

pointer-events: none;

Answer 3

A-Frame 0.8.0的更新解决方案：

创建透明的a-circle作为父
将a-ring添加为a-circle
将raycaster="objects: a-circle (and comma-separated selectors of any other elements you need the cursor to interact with in the scene); recursive: false"添加到场景中的光标实体

此处raycaster组件设置将阻止光标与场景中的元素交叉，而不是选择器与objects属性中列出的内容相匹配的元素，以及限制交叉到匹配的顶级元素，忽略所有后代。

有关raycaster组件的更多信息：https://github.com/aframevr/aframe/blob/master/docs/components/raycaster.md

A-Frame：仅用于父实体的mouseenter / mouseleave

3 个答案: