javascript - THREE.js SpriteMaterial发光纹理隐藏边缘

Question

我正在向一些 THREE.js 节点添加一个 SpriteMaterial 发光纹理，但它在边缘上的绘制方式存在一些问题。从某些 Angular 看效果很好，但从其他 Angular 看，即使纹理设置为透明，边缘也看不到。下图中的圆圈区域突出显示了问题。

这是我用来创建 SpriteMaterial 的代码:

var material = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load('img/glow2.png'), color: color, transparent: true, side: THREE.FrontSide, blending: THREE.AdditiveBlending });
var sprite = new THREE.Sprite(material);
sprite.scale.set(30, 30, 1.0);

这是纹理 png 的问题吗？如果是，我如何为不会产生这些类型的伪像的纹理创建图像？如果不是图片问题，那是代码哪里出了问题？

Answer 1

将 depthWrite:false 添加到您的 SpriteMaterial 参数中。