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; 

그것을 복원하려면이 코드를 사용하고 있습니다 : 나는 이런 식으로 그려 각 후 배열의 텍스처를 저장이 파이어 폭스에 있지만, 크롬과 IE에서 잘되지 작동하고

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; 

. 콘솔에 오류/경고 메시지가 표시되지 않습니다. 파이어 폭스에는 지연의 왕이있다. 실행 취소/다시 실행 클릭은 전체 검정색 또는 정확한 텍스처를 무작위로 표시합니다. 잠시 후 (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; 

가변 범위를 조정해야 할 수도 있습니다.