Particle Trail Effect

Questions
1

Hey guys,

I made a particle system in threejs with a bunch of particles moving around based on noise.

Is there anyway to achieve a particle trail effect by using a background color with a small opacity like in processing or p5js? Basically clearing the background with small opacity every frame while the particles are moving to get a trail effect?

I tried this way to make it work:

const renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true, alpha:true});
renderer.autoClearColor = true;
renderer.setClearColor(0x000000, 0.05);

Also tried the setClearAlpha function and it did not work as well.

Is there another way to do this? Or is this the correct way and I’m missing something?

2

Are you looking for this effect?

https://threejs.org/examples/webgl_trails

If not, please describe in more detail what you want to achieve. I’m afraid it’s also not clear how the intended result looks with processing and p5js. You maybe want to share some live examples to demonstrate the effects of those libraries.

3

Thank you for the response,

I made a quick example in p5js, use the mouse to move the circle:
https://editor.p5js.org/bernabranco95/sketches/PQc09hze5

So it’s basically what renderer.autoClearColor = false does with the difference that the ClearColor has to each frame fade away the older trails.

Tried clearing the color each frame with a small opacity, but this seems to not work :
renderer.autoClearColor = true
renderer.setClearColor(0x000000, 0.05);