如何让我的 raycaster 仅在与可见对象/实体相交时工作？

Question

我想让我的 raycaster 只与可见的对象相交。我有三个类，.menu_one、.menu_two 和 .menu_three。当我单击其中一个时，我希望所有其他菜单消失，以便查看者可以看到 3d 背景。但是，当我四处走动时，我仍然可以在我不想要的时候单击 raycaster 以前所在的菜单。我通过 raycaster="objects: ???" 或任何其他方法使其工作。...

<a-cursor

      id="cursor"

      material="color: black; shader: flat"

      position="0 0 -4.5"       

      geometry="primitive: ring; radiusInner: 0.15; radiusOuter: 0.2"

      animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"

      animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"

      event-set__mouseenter="_event: mouseenter; color: springgreen"

      event-set__mouseleave="_event: mouseleave; color: black"

      raycaster="objects: [data-visible]">

    </a-cursor>  

<a-entity class="menu1"

            geometry="primitive: plane; height: 0.2; width: 0.5"

            material="color: black"

            text="value: ${city_name}; color: white; align: center; wrapCount: 10; font: exo2bold"

            event-set__mouseenter="scale: 1.5 1.5 1"

            event-set__mouseleave="scale: 1 1 1"

            event-set__1="_event: click; _target: #models; _delay: 300; visible: false">

...

我希望 raycaster 只能与用户可见的对象相交。

嗨，这是使这项工作的方法吗？

AFRAME.registerComponent('data-raycastable', {

      init: function () {

        var self = this;

        var el = this.el;

        var data = this.data;

        this.eventHandlerFn = function () {

          if (el.object3D.visible = true){

          el.setAttribute('data-raycastable', '');

          }

          else {

            el.removeAttribute('data-raycastable')

          }

        }

        update: function() {

          el.addEventListener('click', this.eventHandlerFn);

          } 

          }

        }

      })