Загрузка текстуры ThreeJS: черная на некоторое время на 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 с) все текстуры отображаются правильно, когда я выполняю цикл с помощью отмены/повтора. Похоже, для загрузки текстур требуется некоторое время. Я что-то пропустил?

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; 

Возможно, вам придется подстраиваться под переменную область видимости.