three.js - 为什么当我使用 png 纹理时，threejs pointshadermaterial 是矩形而不是圆形？

Question

我已经按照官方示例写了一个积分示例，但结果并不满意：

点是矩形，而不是圆形！

这是我的材料代码：

let material = new THREE.ShaderMaterial({
                uniforms: {
                    uColor: { value: new THREE.Color(0xffffff) },
                    uPointTexture: { value: new THREE.TextureLoader().load(require('./res/spark1')) }
                },
                vertexShader: _me.vertex_shader,
                fragmentShader: _me.fragment_shader,

                transparent: true
            })

标签： three.jsshader

Answer 1

经过一番尝试，比如：blending: THREE.AdditiveBlending，fog: false...我发现与depthTest属性有关，我设置为 false 后，结果如下：

看，黑色方块消失了！这是最终代码：

let material = new THREE.ShaderMaterial({
                uniforms: {
                    uColor: { value: new THREE.Color(0xffffff) },
                    uPointTexture: { value: new THREE.TextureLoader().load(require('./res/spark1')) }
                },
                vertexShader: _me.vertex_shader,
                fragmentShader: _me.fragment_shader,

                depthTest: false,
                transparent: true
            })