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

此外，如果您特别想要将其更改为默认属性，则仅设置材料blending属性。

three.js r.85

从纹理中删除方形边框（three.js）

1 个答案: