title: In aframe, how do you make the property visible="false" ignore the raycaster?
body: <p>I have some objects in aframe with visible="false" meaning they aren't visible but they are still interactable even though you can't see them. Is there a solution to this?</p>
  
  <p>Found a few similar cases online but no clear solution.</p>
  
  <p><a href="https://github.com/aframevr/aframe/issues/3551" rel="nofollow noreferrer">https://github.com/aframevr/aframe/issues/3551</a>
  <a href="https://github.com/aframevr/aframe/issues/979" rel="nofollow noreferrer">https://github.com/aframevr/aframe/issues/979</a></p>
  
  <pre><code>&lt;!-- CURSOR ENTITY --&gt;
          &lt;a-entity rotation="0 0 0" position="0 0 2"&gt;
              &lt;a-entity id="camera" far: 20; camera look-controls rotation="0 0 0" wasd-controls&gt;
                  &lt;!-- MAIN CURSOR --&gt;
                  &lt;a-entity raycaster="interval: 200; objects: .clickable" cursor="fuse: true; maxDistance: 500; timeout: 1500;" id="cursor-main" position="0 0 -1.5" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;" material="color: #439DC2;"&gt;
                      &lt;a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"&gt;&lt;/a-animation&gt;
                      &lt;a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"&gt;&lt;/a-animation&gt;
                  &lt;/a-entity&gt;
                  &lt;a-entity id="cursor-loader" position="0 0 -1.51" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03;" material="color: #2ADD2A;"&gt;
                  &lt;/a-entity&gt;
              &lt;/a-entity&gt;
          &lt;/a-entity&gt;
  </code></pre>
  
  <pre><code>        &lt;a-entity ui-modal="triggerElement:#selection;" visible="false"&gt;
  
              &lt;a-image position="-0.7 -1 1" class="clickable" src="#one" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit&gt;&lt;/a-image&gt;
  
          &lt;a-image position="0 -1 1" class="clickable" src="#two" scale="0.7 0.64 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit&gt;&lt;/a-image&gt;
  
               &lt;a-image position="0.7 -1 1" class="clickable" src="#three" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit&gt;&lt;/a-image&gt;
  
              &lt;a-image class="clickable" src="#close" id="closing" scale="0.3 0.3 0" position="-0.5 -0.35 1.1"&gt;&lt;/a-image&gt;
  
          &lt;/a-entity&gt;
  </code></pre>
  
  <p>Ideally if an object is set to visible="false" the user shouldn't be able to interact with it.</p>