在aframe中以常规方式呈现组件

Question

我有一个有三个二十面体的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);
    }

Answer 1

当您想要选择要融合(或单击)的某些对象并排除其他对象时，您可以使用raycaster组件进行此操作，该组件与游标一起工作(或者可以不使用它，但用于熔断，则与游标组件一起使用)。

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

然后，在每个要包含在光线投射中的实体上，添加属性class="clickable“

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

以下是关于光线投射和游标的文档：

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

我很惊讶粒子会参与光线投射，因为它们只是gpu实例。它们实际上不是场景中的3D实体，而是生成并呈现为图形卡上的几何图形着色器。光线投射发生之前，所有的几何被发送到图形卡。当粒子可见时，你是否测试过打开或关闭光线投射器，看看这是否是导致减速的原因？

您的代码没有显示光标或光线投射，因此我不知道您是否正在过滤实体，但似乎没有在实体上使用类筛选器，因此您似乎没有过滤光线传送器。