Sprite not showing

Viewed 1491

I have some code at https://jsfiddle.net/72mnd2yt/1/ that doesn't display the sprite I'm trying to draw. I tried to follow the code over at https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html and read it line by line, but I'm not sure where I went wrong. would someone mind taking a look at it?

Here is some relevant code:

// picture
var getPicture = function(message){
  var canvas = document.createElement('canvas');
  canvas.width = "100%";
  canvas.height = "100%";

  var context = canvas.getContext('2d');
  context.font = "10px";
  context.fillText(message, 0, 10);
  var picture = canvas.toDataURL();
  // return picture;
  return canvas;
};

// let there be light and so forth...
var getScene = function(){
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(
    70, 
    $('body').width(), 
    $('body').height(),
    1,
    1000
  );

  var light = new THREE.PointLight(0xeeeeee);
  scene.add(camera);
  scene.add(light);

  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xefefef);
  renderer.setSize($('body').width(), $('body').height());

  camera.position.z = -10;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  return [scene, renderer, camera];
};

// now for the meat
var getLabel = function(message){
  var texture = new THREE.Texture(getPicture(message));
  var spriteMaterial = new THREE.SpriteMaterial(
    {map: texture }
  );
  var sprite = new THREE.Sprite(spriteMaterial);
  //sprite.scale.set(100, 50, 1.0);
  return sprite
};

var setup = function(){
  var scene;
  var renderer;
  var camera;
  [scene, renderer, camera] = getScene();
  $('body').append(renderer.domElement);

  var label = getLabel("Hello, World!");
  scene.add(label);

  var animate = function(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };

  animate();
};


setup();
1 Answers
Related