在框架中条件地渲染组件

Question

I have an aframe scene with three icosahedrons, a complex particle system and a cursor that fuses on objects in the scene. With the particles visible, the scene runs too slow, because the cursor tries to fuse on every particle. I just need it to fuse on the three icosahedrons.

So, I'm trying to do one of 2 things:

• Only tell the cursor to fuse on the icosahedrons (if it helps performance, might not)
• Only show the particle system after all icosahedrons have been fused / clicked.

I don't currently know how to do either of these two things. Here's my scene:

  <a-scene xrweb xrextras-tap-recenter xrextras-almost-there xrextras-loading xrextras-runtime-error>

    <a-camera position="0 8 2">
      <a-entity position="0 0 -3" geometry="primitive: ring; radiusInner: 0.25; radiusOuter: 0.3;" color="#CCCCCC"
        material="shader: flat; opacity: 0.7" cursor="maxDistance: 10; fuse: true" events-cursor>
        <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.5 0.5 0.5"
          dur="1500"></a-animation>
          <a-animation begin="mouseleave" easing="ease-in" attribute="scale" fill="forwards" from="0.8 0.8 0.8" to="1 1 1"
          dur="500"></a-animation>
        </a-animation>
      </a-entity>
    </a-camera>
    <!-- should only render this particle system after icosahedrons have been clicked -->
    <a-entity position="0 2.25 -15"
      particle-system="preset: dust; particleCount: 500; type: 2; rotationAngleSpread: .05; texture: ./images/debris.png; velocityValue: .5 0.15 .5;"
    >

    <a-entity rotation="0 0 0" animation="property: rotation; to: 360 0 0; loop: true; dur: 10000; easing: linear">
      <a-icosahedron position="0 1 -4" radius="1.25" material="roughness: 0.8; metalness: 0.2; color: #D65C66;"
        animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear" id="redOrb" events-red>
      </a-icosahedron>
    </a-entity>

    <!--- 3 of these, hiding code for brevity-->

  </a-scene>

And here's the javascript that handles whether an icosahedron has been fused / clicked:

AFRAME.registerComponent('events-red', {
  init: function () {

    el.addEventListener('click', function(){
      redClicked = true;
      //when all 3 have been clicked, hide them, and show the particle system.
    })
  }
});

I tried this, and it doesn't work (function fires under the right conditionals, but nothing shows up on screen):

addParticleSystem = function(){
      let particleSystem = document.createElement('a-entity');
      particleSystem.setAttrbute('position','0 2.25 -15');
      particleSystem.setAttribute('particle-system',"preset: dust; particleCount: 500; type: 2; rotationAngleSpread: .05; texture: ./images/debris.png; velocityValue: .5 0.15 .5;");
      document.querySelector('a-scene').appendChild(particleSystem);
    }

Answer 1

When you want to select some objects to be fused (or clicked) and exclude others, you do this with the raycaster component, which works with the cursor (or can work without it, but for fusing, use with the cursor component).

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

Then on every entity that you want to include in the raycasting, add the attribute class="clickable"

<a-box id="redBox" class="clickable" color="red"></a-box>

Here is the documentation on raycasting and cursors:

https://aframe.io/docs/0.9.0/components/cursor.html#fuse-based-cursor

I am very surprised that particles would participate in raycasting, as they are gpu instances only. They are not actually 3D entities in the scene, but generated and rendered as geometry shaders on the graphics card. Ray casting occurs before all the geometry is sent to the graphics card. Have you tested turning the raycasting on and off while particles are visible to see if that is causing the slowdown?

Your code does not show the cursor or raycasting so I don't know if you are filtering entities, but it does not appear that you are using the class filter on your entities, so it appears that you are not filtering the raycaster.