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纹理渲染

回答

相关问题