javascript - ThreeJS纹理加载: black for a while on Firefox

Question

我想在 3D 绘画工具上构建撤消/重做功能。每次绘制后我将纹理存储在一个数组中，如下所示:

        var image3 = mesh.material.map.image;
        var testCanvas = image3.getContext('2d').canvas;
        var canvasData = testCanvas.toDataURL("image/jpeg");
        undoArray[undoArrayCursor] = canvasData;

要恢复它，我使用以下代码:

    var canvasimg = mesh.material.map.image;
    var img = new Image();
    img.src = srcimg;
    var tmpcanvas = document.createElement('canvas');
    tmpcanvas.width = canvasimg.width;
    tmpcanvas.height = canvasimg.height;
    var tmpctx = tmpcanvas.getContext('2d');
    tmpctx.drawImage(img,0,0);
    var pMap = new THREE.Texture( tmpcanvas );
    pMap.flipY = true;
    pMap.needsUpdate = true;
    pMaterial = new THREE.MeshLambertMaterial( { map:pMap } );
    mesh.material = pMaterial;

这在 Chrome 和 IE 上运行良好，但在 Firefox 上则不然。我在控制台中没有收到错误/警告消息。对于 Firefox，存在一些延迟问题。撤消/重做单击会随机显示全黑或正确的纹理。一段时间(15-20 秒)后，当我循环撤消/重做时，所有纹理都会正确显示。 Firefox 似乎需要一段时间才能加载纹理。有什么我错过的吗？

Answer 1

您不允许加载图像。

var img = new Image();
img.onload = function(){

  var tmpcanvas = document.createElement('canvas');
  tmpcanvas.width = canvasimg.width;
  tmpcanvas.height = canvasimg.height;
  var tmpctx = tmpcanvas.getContext('2d');
  tmpctx.drawImage(this,0,0); // notice the "this" instead of img
  var pMap = new THREE.Texture( tmpcanvas );
  pMap.flipY = true;
  pMap.needsUpdate = true;
  pMaterial = new THREE.MeshLambertMaterial( { map:pMap } );
  mesh.material = pMaterial;    

};

img.src = srcimg;

您可能需要调整变量范围。