CODEWITHSUNDEEP
javascriptfirefoxthree.jstextures
Minichua
Minichua

Reputation: 177

ThreeJS texture load: black for a while on Firefox

I want to build an undo/redo feature on a 3D paint tool. I store the texture in an array after each draw like this:

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

To restore it, I am using this code: 

    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;

This is working fine on Chrome and IE but not on Firefox. I get no error/warning message in the console. With Firefox, there is some king of latency. Undo/redo clicks randomly display full black or correct textures. After a while (15-20s), all textures are displayed correctly while I cycle through undo/redo. It looks like it takes a while for Firefox to load the textures. Is there something I missed?

Upvotes: 0

Views: 637

Answers (1)

Hobbes
Hobbes

Reputation: 801

You are not allowing the image to load.

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;

You may have to adjust for variable scope.

Upvotes: 2

Related Questions