Three.js : Invisible background for background and png particles

问题

I'm having trouble setting 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 have set the code in a full screen div in foreground and succeeded to make it unclickable so that I can still use my website. The problem is that I couldn't set png alpha channels to transparent even with transparent=true;.

First I set the background transparent: OK

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

But can't load my snowflakes with alpha channels transparents. Need help someone for making my christmas magic?

Edit: Sorry was a typing error, the problem remains! for the particles ^^

回答1:

Shouldnt that be

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

回答2:

What kind of material did you use for the snowflakes? Maybe this can 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;

回答3:

Finally I have succeeded. With the code above and a png with an already invisible background, everything seems to work! As you can see on:

http://www.makedifferent.fr

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

Thanks anyway and Happy New Year!

来源：https://stackoverflow.com/questions/20742809/three-js-invisible-background-for-background-and-png-particles