title: Three.js sprite text not showing
body: <p>I tried to put a sprite text in three.js scene but its not showing. i tried to show the sprite canvas and its perfectly visible above the threejs canvas</p>
  
  <p>my script is</p>
  
  <pre><code>if (!Detector.webgl)
              Detector.addGetWebGLMessage();
          var renderer = new THREE.WebGLRenderer({alpha: false, antialias: true});
          var camera = new THREE.PerspectiveCamera(35, $('#canvas').width() / $('#canvas').height(), 1, 1000);
          var controls = new THREE.OrbitControls(camera, renderer.domElement);
          var scene = new THREE.Scene();
          var ambient = new THREE.AmbientLight(0xffffff, 0.1);
          var spotLight = new THREE.SpotLight(0xffffff, 1);
          init();
          animate();
          function init() {
              renderer.shadowMap.enabled = true;
              renderer.shadowMap.type = THREE.PCFSoftShadowMap;
              renderer.gammaInput = true;
              renderer.gammaOutput = true;
              camera.position.set(0, 0, 500);
              spotLight.position.set(0, 0, 125);
              spotLight.castShadow = true;
              spotLight.angle = Math.PI / 4;
              spotLight.penumbra = 0.05;
              spotLight.decay = 1;
              spotLight.intensity = 1.8;
              spotLight.distance = 800;
              spotLight.shadow.mapSize.width = 100;
              spotLight.shadow.mapSize.height = 100;
              spotLight.shadow.camera.near = 50;
              spotLight.shadow.camera.far = 50;
  
  
              scene.add(camera);
  
              sprite = makeTextSprite("message", 204);
              sprite.position.set(30, 30, 30);
              scene.add(sprite);
              function makeTextSprite(message, fontsize) {
                  var ctx, texture, sprite, spriteMaterial,
                          canvas = document.createElement('canvas');
                  ctx = canvas.getContext('2d');
                  ctx.font = fontsize + "px Arial";
                  // setting canvas width/height before ctx draw, else canvas is empty
                  canvas.width = ctx.measureText(message).width;
                  canvas.height = fontsize * 6; // fontsize * 1.5
                  $('#canvas').append(canvas);
                  // after setting the canvas width/height we have to re-set font to apply!?! looks like ctx reset
                  ctx.font = fontsize + "px Arial";
                  ctx.fillStyle = '#' + (Math.random() * 0xFF0000 &lt;&lt; 0).toString(16);
                  ctx.fillText(message, 0, fontsize);
  
                  texture = new THREE.Texture(canvas);
                  texture.minFilter = THREE.LinearFilter; // NearestFilter;
                  texture.needsUpdate = true;
                  spriteMaterial = new THREE.SpriteMaterial({map: texture});
                  sprite = new THREE.Sprite(spriteMaterial);
                  return sprite;
              }
              renderer.shadowMap.enabled = true;
              renderer.shadowMap.type = THREE.PCFSoftShadowMap;
              renderer.shadowMapCullFrontFaces = false;
              renderer.setSize($('#canvas').width(), $('#canvas').height());
              scene.add(spotLight);
              scene.add(ambient);
  
              cube1 = new THREE.Mesh(
                      new THREE.BoxGeometry(20, 20, 20),
                      new THREE.MeshBasicMaterial({
                          color: 0xff0faf,
                          transparent: false,
                          opacity: 1,
                          overdraw: 0.5
                      }));
  
              scene.add(cube1);
  
              controls.addEventListener('change', render);
              controls.minDistance = 20;
              controls.maxDistance = 700;
              controls.maxPolarAngle = Math.PI / 2;
              controls.enablePan = false;
              controls.update();
              $('#canvas').append(renderer.domElement);
          }
          function render() {
              renderer.render(scene, camera);
          }
          function animate() {
  
              requestAnimationFrame(animate);
              render();
              controls.update();
          }
  </code></pre>
  
  <p>Update: i can see the sprite but its too small. Even if i increase the fontsize its not incresing in the sprite. How can i increase the size of the sprite?</p>