In my aframe scene, there are three icosahedrons, a complex particle system, and a cursor that fuses on objects within the scene. The performance of the scene is affected when the particles are visible because the cursor attempts to fuse with every particle instead of just the icosahedrons.
I am currently looking into two possible solutions:
- Restricting the cursor to only fuse with the icosahedrons (if it improves performance)
- Displaying the particle system only after all the icosahedrons have been fused/clicked
Unfortunately, I do not know how to implement either of these options. Below is the code for 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>
<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>
<!--- There are 2 more icosahedrons but hidden for brevity --->
</a-scene>
Furthermore, here is the JavaScript snippet responsible for determining if an icosahedron has been clicked/fused:
AFRAME.registerComponent('events-red', {
init: function () {
el.addEventListener('click', function(){
redClicked = true;
// Once all 3 icosahedrons have been clicked, hide them and reveal the particle system.
})
}
});
I attempted to use the following function to add the particle system dynamically, but it did not work as expected:
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);
}