Javascript 如何使three.js sprite背景混合？

我正在使用three.js中的精灵加载点的纹理（以前是pointcloud），我无法使混合正常工作。以下是我正在使用的代码：

this._renderer = new THREE.WebGLRenderer({alpha: true, antialias: true, preserveDrawingBuffer: true});
this._renderer.setClearColor( 0x000000, 0 );
....
new THREE.Points(geometry, new THREE.PointsMaterial({transparent: true,  blending: THREE.CustomBlending, blendSrc: THREE.OneFactor,  blendEquation: THREE.AddEquation, map: lt._sprite, size: 1, vertexColors: true}));

精灵包含随threejs附带的disc.png精灵。这就是它的样子：

• 自定义混合（上面的代码）：
• 无混合：

我使用的不同调配看起来要么与上面的一样，要么精灵加载不正确（方点）

---

我对threejs或webgl不太熟悉。感谢您的帮助。整个代码既长又复杂，但是我可以发布任何相关的部分。

看起来您需要将sprite的背景设置为transparent-disc.png。这样，精灵中的圆形对象将具有您想要的任何颜色，但角将是透明的。以下是使用Paint.net执行此操作的说明：

---

确保将新精灵保存为.png文件。看起来您在THREE.PointsMaterial调用中缺少不透明度设置。因此，除了设置“transparent:true”之外，如果您希望彩色光盘具有一定的透明度，您还需要将不透明度设置为0.0到1.0之间的某个值，例如“transparent:true，opacity:0.4，***”，希望这会有所帮助。

对于遇到相同问题的人，我的解决方法是：

alphaTest: 0.5

传递到pointsmaterial

new THREE.PointsMaterial({transparent: true, alphaTest: 0.5, ....);

---

谢谢背景确实是透明的。我正在使用three.js本身的纹理，它显然适用于某些点，而不适用于其他点。昨晚我终于弄明白了。这与字母测试有关。