三个JS - 画布上的文字闪烁

Question

我正在使用画布方法绘制2d文本，但是当我使用控件旋转或移动相机时，我会出现大量闪烁。我正在使用Verdana 16px字体。使字体大小更大使文本在前期看起来更好，但不会使闪烁消失。

造成这种闪烁的原因是什么？ （顺便说一句，我试图删除文本的透明度，这没有帮助......）

    // create a canvas element
    var canvas1 = document.createElement('canvas');
    var context1 = canvas1.getContext('2d');
    context1.font = "40px Verdana";
    context1.fillStyle = "rgba(0,0,0,1)";
    context1.fillText(text, 0, 30);

    // canvas contents will be used for a texture
    var texture1 = new THREE.Texture(canvas1);
    texture1.needsUpdate = true;

    var material1 = new THREE.MeshBasicMaterial({ map: texture1, side: THREE.DoubleSide });
    material1.transparent = true;

    var mesh1 = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas1.width, canvas1.height),
        material1
        );

Answer 1

这是因为多个画布相互重叠。

默认情况下，画布非常大，您可以通过设置颜色或设置 - material1.transparent = false;

为避免闪烁，您需要设置大小以使它们不重叠。

canvas1.width = 40;
canvas1.height = 20;