Firefox 3つのjsテクスチャレンダリング

Question

私は3つのjsでプレーンを作成し、その上にテクスチャを適用しています。 テクスチャはキャンバス要素で作成されます。

Firefoxは何らかの理由でFirefoxがこれに問題がある唯一のブラウザと思われ、IE11でもうまくいきます。

Firefoxの例のスクリーンショット

クロム例のスクリーンショット

これは使用されるコードです。

//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

解決策は、MeshBasicMaterialに 'transparent：true'を追加することでした。