Firefox Rendu de la texture de trois js

Question

Je crée un plan en trois js et j'applique une texture dessus. La texture est créée avec un élément canvas.

Pour une raison quelconque, Firefox semble être le seul navigateur ayant des problèmes avec cela, même IE11 fonctionne très bien.

firefox exemple capture d'écran

exemple Chrome capture d'écran

Ceci est le code utilisé.

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

La solution consistait à ajouter 'transparent: true' au MeshBasicMaterial.