Проблема с прозрачными картами three.js

Я создаю множество частиц (80 000, если быть точным ), и я установил карту прозрачности, хотя не все частицы прозрачны.

Я использую прозрачное изображение PNG:(его едва видно, но он там в порядке )как карта материала, хотя он показывает черный фон, как показано здесь:

Если вы внимательно посмотрите, некоторые частицы хорошо смешиваются друг с другом (без перекрывающихся черных краев ), а некоторые нет. Может ли это быть из-за того, что так много перекрывающихся прозрачных объектов или это не должно быть проблемой?

Вот фрагмент, отвечающий за генерацию моих частиц:

// load the texture
var map = THREE.ImageUtils.loadTexture('img/particle.png');

// create temp variables
var geometry, material;

// create an array with ParticleSystems (I need multiple systems because I have different colours, thus different materials)
var systems = [];

// Loop through every colour
for(var i = 0; i < colors.length; i++) {
    // Create a new geometry
    geometry = new THREE.Geometry();

    // create a new material
    material = new THREE.ParticleBasicMaterial({
        color: colors[i],
        size: 20,
        map: map, // set the map here
        transparent: true // transparency is enabled!!!
    });

    // create a new particle system
    systems[i] = new THREE.ParticleSystem(geometry, material);

    // add the system to the scene
    scene.add(systems[i]);
}

// vertices are added to the ParticleSystems' geometry here

Почему некоторые частицы имеют черный фон?