javascript - 从纹理中删除方形边框(三.js)

Question

我正在使用 Threejs 并尝试使用以下代码创建一个明星系统:

// 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);
            }
        );

它工作正常，但是纹理加载为正方形，即使我使用的图像是一个白色圆圈(在堆栈溢出中不可见，但您可以单击它):

但是，一旦加载，系统中的每个矢量在过度施加时都会出现可见的黑边:

我的问题是:

如何去掉那些黑边？这可能吗？

Answer 1

您可以使用 alphaTest 丢弃不需要的片段，如下所示:

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
} );

此外，如果您特别想要更改默认 Material ，请仅设置 Material blending 属性。

三.js r.85