Particle-system with Zappar A-frame

Hello,
Want to add particle effect to entities have been checking out aframe-particle-system but it wont work. An example showcasing integration of particle-system with A-frame would be greatly helpful.

Hi @mihir,

I believe that I have responded to your ticket, but just in case this helps anyone - I have created a basic standalone example of this third party feature here. It uses parts from this example.

Please note the following information about this demo - it seems that this package may not be fully compatible with Universal AR right out of the box, due to the way it implements some Three.js shaders. To workaround this, I use an older version of A-Frame - 0.9.2.

With some fiddling, this could look great, so definitely experiment with different package versions and implementations. In the future, we’ll look to make a much more rounded example, but for the purposes of answering this thread, it should hopefully be helpful!

Have a great day!
Francesca :blush:

1 Like

Hello @Francesca,
Thank you for the solutions. I thought the same as there was various mentions on the A-frame issues that the particle-system wont work with the updated version. With the example you provided it works great on android and web but has issues in IOS though through testing and debugging is needed. I would experiment more and if I get some success on the ios side will post it in this thread itself. Thanks for all the help appreciate it. :v:

1 Like

@Francesca, new bug with particle systems that it wont work with face tracking the screen freezes in face tracking
console error is as follows:

zappar-aframe.js:2 Uncaught TypeError: this.setAttribute is not a function
at s._updateUVs (zappar-aframe.js:2:129503)
at s.updateFromIdentityExpression (zappar-aframe.js:2:130120)
at s.updateFromFaceAnchor (zappar-aframe.js:2:129968)
at s.updateFromFaceAnchorGroup (zappar-aframe.js:2:129901)
at document.querySelector.systems.registerForCallbacks._frameUpdate (zappar-
aframe.js:2:222715)
at o.emitCallbacks (zappar-aframe.js:2:218615)
at i.tick (zappar-aframe.js:2:221480)
at HTMLElement.value (a-scene.js:682:34)
at HTMLElement.value (a-scene.js:732:36)
at bind.js:12:17

Did you find a better way, I can’t use it on ios15…

I have a way, but I am not sure if Zappar supports it. But IOS still has some issues its annoying.