remove square border from texture (three.js)


I am using threejs and trying to create a star system by using the following code:

// create the particle variables
        //var particleCount = 180000,
        var particles = new THREE.Geometry();
        var multiplyingFactor = 50;
        // now create the individual particles
        for (var p = 0; p < array.length; p++) {
            //the star from the csv file                
            star = array[p];
            // initialize the particle with the star's information.
            particle = new THREE.Vector3(star.x * multiplyingFactor, star.y * multiplyingFactor, star.z * multiplyingFactor);
            // add it to the geometry
            particles.vertices.push(particle);
        }

        // var pMaterial = new THREE.PointsMaterial({
        //     color: 0xFFFFFF,
        //     size: 20,
        //     map: THREE.ImageUtils.loadTexture("http://localhost:8080/images/circle.png"),
        //     blending: THREE.AdditiveBlending,
        //     transparent: true
        // });
        // instantiate a loader
        var loader = new THREE.TextureLoader();

        //allow cross origin loading
        loader.crossOrigin = '';
        // load a resource
        loader.load('http://localhost:8080/images/circle.png',
            // Function when resource is loaded
            function (texture) {
                var pMaterial = new THREE.PointsMaterial({
                    color: 0xFFFFFF,
                    size: 20,
                    map: texture,
                    blending: THREE.AdditiveBlending,
                    transparent: true
                });
                // create the particle system
                particleSystem = new THREE.Points(
                    particles,
                    pMaterial);
                // also update the particle system to
                // sort the particles |which enables
                // the behaviour we want
                particleSystem.sortParticles = true;
                scene.add(particleSystem);
            }
        );

It works correctly, however the texture is loaded as a square even though the image I am using for it is a white circle (not visible here in stack overflow but you can click over it):

cicle image

However, once it loads, every vector in the system has black edges visible when over imposed:

rendered texture

My question is:

How can I get rid of those black edges? is it possible?


Answers:


You can use alphaTest to discard unwanted fragments like so:

var pMaterial = new THREE.PointsMaterial( {
    color: 0xffffff,
    size: 20,
    map: texture,
    alphaTest: 0.5,
    transparent: false // only set to true if it is required for your texture
} );

Also, only set the material blending property if you specifically want to change it from the default.

three.js r.85