有条件地渲染 aframe 中的组件

我有一个包含三个二十面体的 aframe 场景、一个复杂的粒子系统和一个与场景中物体融合的光标。由于粒子可见，场景运行速度太慢，因为光标试图融合在每个粒子上。我只需要它融合在三个二十面体上。

所以，我正在尝试做两件事之一：

• 只告诉光标融合在二十面体上（如果它有助于性能，可能不会）
• 仅在所有二十面体融合/单击后才显示粒子系统。

我目前不知道如何做这两件事。这是我的场景：

  <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>

这是处理二十面体是否已融合/点击的javascript：

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.
    })
  }
});

我试过这个，但它不起作用（函数在正确的条件下触发，但屏幕上没有显示任何内容）：

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);
    }