three.js transparent maps issue

Disable the depthWrite attribute on the material.

// create a new material
material = new THREE.ParticleBasicMaterial({
    color: colors[i],
    size: 20,
    map: map,
    transparent: true,
    depthWrite: false,
});

You can set the alphaTest property of the material instead of transparency. For example,

material.alphaTest = 0.5;
material.transparent = false;

three.js no longer sorts particles; they are rendered in the order they appear in the buffer.

three.js r.85

Those particles with black corners are rendered before anything behind them. So GL doesn't know yet there is something behind to blend. In order to make it look right you have to render these particles in the order of their z coordinates from back to front.