Firefox三js纹理渲染

Question

我在三个js中创建一个平面并在其上应用纹理。 纹理是使用canvas元素创建的。

出于某种原因，Firefox似乎是唯一一个遇到麻烦的浏览器，即使是IE11也能正常运行。

firefox示例屏幕截图

Chrome示例截图为

这是使用的代码。

//get text
    var text1 = container.getAttribute('data-text-1');
    var text2 = container.getAttribute('data-text-2');

    // //create image
    var bitmap = document.createElement('canvas');
    bitmap.width = 4000;
    bitmap.height = 1200;

    var ctx = bitmap.getContext('2d');

    ctx.strokeStyle="#fff";
    ctx.lineWidth = 200;
    ctx.strokeRect(0,0,4000,1200);

    ctx.font = 'normal 300px proxima_novabold';
    ctx.fillStyle = '#fff';
    ctx.textAlign = "center"; 
    ctx.textBaseline = "middle";
    ctx.fillText(text1, 2000, 450);
    ctx.font = 'normal 240px proxima_novaregular';
    ctx.fillText(text2, 2000, 750);

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

    //plane
    plane = new THREE.Mesh(
      new THREE.PlaneGeometry(2000, 600, 80, 80),         
      new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, side: THREE.DoubleSide})
    );

    scene.add( plane );

Answer 1

解决方案是添加透明：真实＆＃39;到MeshBasicMaterial。