title: Three.js and applying texture
body: <p>I'm using a neat script found online (Teal 3d dice roller).
  <a href="http://a.teall.info/dice/" rel="nofollow noreferrer">http://a.teall.info/dice/</a></p>
  
  <p>The dice numbers are hardcoded as standard fonts in the script (no image textures applied).
  I would like to get rid of those numbers and apply pictogram textures instead to customize the dice to fit my needs.
  So, right now, I'm just trying to apply one unique texture to all faces (even though I plan to obviously have 6 different textures eventually but first thing first).</p>
  
  <p>Here is the original script function :</p>
  
  <pre><code>this.create_dice_materials = function(face_labels, size, margin) {
      function create_text_texture(text, color, back_color) {
  
          /* --- start of the part I planned to modify --- */
  
          if (text == undefined) return null;
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          var ts = calc_texture_size(size + size * 2 * margin) * 2;
          canvas.width = canvas.height = ts;
          context.font = ts / (1 + 2 * margin) + "pt Arial";
          context.fillStyle = back_color;
          context.fillRect(0, 0, canvas.width, canvas.height);
          context.textAlign = "center";
          context.textBaseline = "middle";
          context.fillStyle = color;
          context.fillText(text, canvas.width / 2, canvas.height / 2);
  
          /* --- End of the part I planned to modify --- */
  
          var texture = new THREE.Texture(canvas);
              texture.needsUpdate = true;
  
          return texture;
      }
      var materials = [];
      for (var i = 0; i &lt; face_labels.length; ++i)
          materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
                      { map: create_text_texture(face_labels[i], this.label_color, this.dice_color) })));
      return materials;
  }
  </code></pre>
  
  <p>And here is my attempt to apply a texture instead:</p>
  
  <pre><code>this.create_dice_materials = function(face_labels, size, margin) {
      function create_text_texture(text, color, back_color) {
  
          /* --- start of the modified part --- */
  
          var img = document.getElementById("image_name");
          var canvas = document.createElement("canvas");
          var cs            = img.height;
              canvas.width  = img.height;
              canvas.height = img.height;
          var context = canvas.getContext("2d");
              context.drawImage(img, 0, 0, cs, cs, 0, 0, cs, cs);
  
          /* --- End of the modified part --- */
  
          var texture = new THREE.Texture(canvas);
              texture.needsUpdate = true;
  
          return texture;
      }
      var materials = [];
      for (var i = 0; i &lt; face_labels.length; ++i)
          materials.push(new THREE.MeshPhongMaterial($t.copyto(this.material_options,
                      { map: create_text_texture(face_labels[i], this.label_color, this.dice_color) })));
      return materials;
  }
  </code></pre>
  
  <p>Note: the texture picture is embedded within the html file as an img tag. It shows up alright as a flat html picture and it has the proper id which is "image_name". So, this shouldn't be part of the problem.</p>
  
  <p>Anyway, those changes in the script don't break the script (no exception appears in the console while executing it),but nothing shows up on the dice neither. No numbers, no texture.</p>
  
  <p>Any idea what is wrong and how I should proceed to make it work?</p>
  
  <p>So far I suspect two things:</p>
  
  <p>1) the "drawImage" parameters</p>
  
  <p>2) the "map" parameter within the materials array</p>
  
  <p>Thanks.</p>