Help with setting up Proton?

Questions
1

I am currently trying to get a particle system into a three.js project.

I found Proton and it seems like a solid system.

I run the NPM install command:
npm install three three.proton.js

I paste their usage code:
import Proton from 'three.proton.js';

  var proton = new Proton();
  var emitter = new Proton.Emitter();

    //setRate
    emitter.rate = new Proton.Rate(new Proton.Span(4, 16), new Proton.Span(.01));

    //addInitialize
    emitter.addInitialize(new Proton.Position(new Proton.PointZone(0, 0)));
    emitter.addInitialize(new Proton.Mass(1));
    emitter.addInitialize(new Proton.Radius(6, 12));
    emitter.addInitialize(new Proton.Life(3));
    emitter.addInitialize(new Proton.V(45, new Proton.Vector3D(0, 1, 0), 180));

    //addBehaviour
    emitter.addBehaviour(new Proton.Alpha(1, 0));
    emitter.addBehaviour(new Proton.Scale(.1, 1.3));

    var color1 = new THREE.Color();
    var color2 = new THREE.Color();
    var colorBehaviour = new Proton.Color(color1, color2);
    emitter.addBehaviour(colorBehaviour);
    emitter.emit();

    //add emitter
    proton.addEmitter(emitter);

    //add renderer
    proton.addRender(new Proton.SpriteRender(scene));

I don’t get any errors. But nothing is appearing in my scene?

Thanks guys

2

Check out: Edit fiddle - JSFiddle - Code Playground

It seems removing emitter.addInitialize(new Proton.Position(new Proton.PointZone(0, 0))); did the trick.

I guess it does not make sense to animate a color from white to white. I’ve changed this in the live example.

3

BTW: The sprite based particle system rendered by Proton is very inefficient since it renders each sprite with a single draw call (you can see this by printing renderer.info.render to the console). If sprites are not managed as a point cloud, a particle system should at least use instanced rendering. You probably want to look for another particle engine if you have performance issues in your app.

4

Thanks so much!

My issue was I was not implementing the Render method! oof!

I’ve got this example working now too, since it no longer is using the white to white like you mentioned!

I’m wondering now, it seems like this renders behind my 3d models. Is there a way to make sure it is over top of everything in my scene?

Thanks again!

5

Maybe updating proton after renderer.render(scene, camera);?

6

No cigar, but was worth a shot! This is still stumping me.

7

Do you have any recommendations for solid ThreeJS particle systems that would be ideal for mobile deployment?

8

No sorry. When I need a particle effect for a project, I develop what I need from scratch. For example nier/ParticleSystem.js at f4adc2a1d2b90754a8df6b69eefd2492e5b2373e · Mugen87/nier · GitHub. If you once figure out the basic concepts of particle systems, it’s not hard to write something on your own.