Three.js: invisible background for background and particles png

Question

I'm having trouble installing an invisible background and alpha channel on my particles.

For Christmas, I wanted to use your example script wegl_particles_sprite . Adapted to the situation. I installed the code in the full-screen div in the foreground and was able to make it invisible so that I could use my website. The problem is that I could not set PNG alpha channels transparent even with transparent=true; .

First I set the transparent background: OK

 renderer = new THREE.WebGLRenderer( { clearAlpha: 1, alpha:true } ); 

But I can’t load my snowflakes with transparent alpha channels. Need someone help to create my Christmas magic?

Edit: Sorry, this is an input error, the problem remains! for particles ^^

Answer 1

Must not be

 renderer = new THREE.WebGLRenderer( { clearAlpha: 1, alpha:true } ); 

Answer 2

What material did you use for snowflakes? Perhaps this may be useful:

http://threejs.org/examples/webgl_materials_blending.html

Most likely you will need to do something like

 material.transparent = true; material.blending = THREE.AdditiveAlphaBlending; 

Answer 3

Finally, I succeeded. Everything works with the above code and png with an already invisible background! As you can see on:

http://www.makedifferent.fr

grab the code at [http://jsfiddle.net/ketzylcoatl/3b75p/5/] and enjoy!

Thanks anyway and Happy New Year!