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;

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

三个JS纹理加载：在Firefox上黑色一段时间

1 个答案: