title: Rotating textures using canvas with Three.js
body: <p>I want to rotate a texture appearing on one face of a cube, with Three.js.</p>
  
  <p>As this cube is created multiple times with different textures, I use a function which create the material and the mesh, with a texture parameter.</p>
  
  <p>However I need this texture to be rotated by 90°, and I found that the best way would be to create a canvas, put the texture in, rotate it and use this canvas as the mesh texture. I tried to achieve this with this code : <a href="https://stackoverflow.com/questions/16727547/three-js-rotate-texture">Three.js Rotate Texture</a>, but unfortunately I always get a black texture.</p>
  
  <p>Here is my function :</p>
  
  <pre><code>function createCube(pos, texture) {
       var img = new Image();
       img.src = texture;
  
       var imgWidth = imgHeight = img.width;
       var mapCanvas = document.createElement( 'canvas' );
       mapCanvas.width = mapCanvas.height = img.width;
  
       // document.body.appendChild( mapCanvas );
       var ctx = mapCanvas.getContext( '2d' );
       ctx.translate( imgWidth / 2, imgHeight / 2 );
       ctx.rotate( Math.PI / 2 );
       ctx.translate( -imgWidth / 2, -imgHeight / 2 );
       ctx.drawImage( img, 0, 0, imgWidth, imgHeight );
  
       var texture = new THREE.Texture( mapCanvas );
       texture.needsUpdate = true;
       var materials = [
                  //Left side (posx)
                  new THREE.MeshLambertMaterial({
                      color: 0x1a0e05
                  }),
                  //Right side (negx)
                  new THREE.MeshLambertMaterial({
                      color: 0x1a0e05
                  }),
                  //Top side (posy)
                  new THREE.MeshLambertMaterial({
                      color: 0x1a0e05
                  }),
                  //Bottom side (negy)
                  new THREE.MeshLambertMaterial({
                      color: 0xffffff,
                      map: texture
                  }),
                  //Front side (posz)
                  new THREE.MeshLambertMaterial({
                      color: 0x1a0e05
                  }),
                  //Back side (negz)
                  new THREE.MeshLambertMaterial({
                      color: 0x1a0e05
                  })
      ];
  
      cube = new THREE.Mesh(new THREE.CubeGeometry(100, 2, 100, 1, 1, 1), new THREE.MeshFaceMaterial(materials));
  
      ...
  
      return cube;
  
  }
  </code></pre>
  
  <p>Maybe that could be due to the texture not yet loaded when appended to the canvas ?
  I removed the <code>img.onLoad</code> (from <a href="https://stackoverflow.com/questions/16727547/three-js-rotate-texture">Three.js Rotate Texture</a>) because I didn't know how to use this callback inside a multiple times called function... 
  Moreover this function as to return the mesh, can I do that using an extern <code>.onLoad</code> function ?</p>
  
  <p>Thanks !</p>