Firefox三個js紋理渲染

我在三個j中創建一個平面並在其上應用紋理。紋理是用畫布元素創建的。Firefox三個js紋理渲染

由於某些原因，Firefox似乎是唯一一個遇到麻煩的瀏覽器，即使IE11也能正常工作。

火狐示例屏幕截圖

鉻示例屏幕截圖

這是所使用的代碼。

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

來源

2017-09-26 Matthias

看起來像奇怪的輪廓是背後畫布背景顏色的倒置。但僅適用於鮮豔的顏色，深色不顯示輪廓。 – Matthias

解決方法是向MeshBasicMaterial添加'transparent：true'。

來源

2017-09-26 13:30:06 Matthias

Firefox三個js紋理渲染

回答

相關問題