Three.js-SpriteMaterial添加剂混合混淆

Question

我正在创建一个类似于场景的空间，其中有一个旋转的地球（SphereGeometry）和1000个Sprites星。我对Blending的工作方式没有很好的了解，但是我从阅读的其他教程中收集到，我需要在Sprite的材质上使用Additive Blending，以便它们正确显示。

最初，我场景的背景是纯黑色（#000000），并且使用以下sprite图片，添加混合效果完美。

这是一些初始场景的图像，效果很好。

但是，我现在需要场景的背景为深蓝色（#021F3B），所以黑色的精灵图像不再起作用。

我认为修改Sprite图像以从本质上将黑色更改为相同的蓝色是可行的，并且确实可以在背景下进行，但是当星星位于地球前方时，您可以清楚地看到Sprite图像的背景。 （请参见地球左侧的精灵）

我需要的

因此，从本质上讲，我想知道如何在最初使用黑色背景但要使用新的彩色背景下达到最初的效果。我认为这与图片有关，而不与代码有关，但我不知道，将不胜感激。

这是蓝色的精灵图片和创建星星以供参考的代码：

function createStars() {

    starMap = new THREE.TextureLoader().load( template_directory_uri.templateUrl + "/assets/img/star2.png" );
    starMat = new THREE.SpriteMaterial({
        map: starMap, 
        blending: THREE.AdditiveBlending, 
        transparent: true
    });

    star = new THREE.Sprite( starMat );

    for (var i = 0; i < particleCount; i++) {

        starClone = star.clone();

        starClone.position.x = Math.random() * (starSpread - (-starSpread)) + (-starSpread);
        starClone.position.y = Math.random() * (starSpread - (-starSpread)) + (-starSpread);
        starClone.position.z = Math.random() * (starSpread - (-starSpread)) + (-starSpread);

        randomScale = Math.random() * (3 - 0.1) + 0.1;

        starClone.scale.set(randomScale, randomScale, randomScale);

        starArray.push(starClone);
        starCloneGroup.add(starClone);
    }

    scene.add(starCloneGroup);

}