Javascript 在three.js中使用基本纹理材质时出现异常的抗锯齿

在下面的代码中，我将使用正交摄影机和画布设置一个非常基本的场景，并将其作为纹理映射到平面几何体

我将一些白色文本放在一个透明的画布上，如果我使用canvas.toDataURL（），效果就不存在了

然而，当我将画布内容作为纹理应用于材质并在超标准2d场景中渲染时，一条黑线勾勒出我的文本，这可能是奇怪的抗锯齿效果造成的。在本例中，渲染器的透明颜色、材质和文本均为纯白色

以下是一个屏幕截图：

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: true });
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff)

document.body.appendChild( renderer.domElement );

camera.lookAt(scene.position);
renderer.render(scene, camera);

---

我也一直在努力解决这个问题，WestLangley的解决方案在一定程度上解决了这个问题，但渲染文本的抗锯齿边缘非常差。经过广泛的研究，我提出了一个我很满意的解决方案，我在这里概述了这个解决方案

在绘制文本之前，使用与文本相同的颜色填充画布，但alpha设置为0.01

context.fillStyle = 'rgba(255,255,255,0.01)';
context.fillRect(0,0,canvas.width,canvas.height);

然后使用材质的alphaTest属性放弃此不透明度的像素：

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture,
    transparent: true,
    alphaTest:0.01
});

最后，将纹理贴图的premultiplyAlpha值设置为false：

texture.map.premultiplyAlpha = false;
texture.map.needsUpdate = true;

---

之前已经有报道，但到目前为止还没有答案。我也有同样的问题，但不是搜索和尝试，我只是使用了更高的分辨率，因为我有黑色文本，这并不重要。但是很抱歉，我帮不了你。不过，也在寻找解决办法；）我得到的最好的答案就是将画布设置为不使用任何抗锯齿或alpha值。此外，如果将网格和纹理设置为具有均匀的宽度和高度，也会有所帮助。此外，在chrome中，您可以在基础画布上使用css来设置使用字体时应使用哪种类型的抗锯齿。你可以参考这里的超长评论来帮助修复chrome的东西。尝试

texture.magFilter=3.NearestFilter；texture.minFilter=3.NearestFilter；texture.generateMipmaps=false