three.js - Sprite not showing -

i have code @ https://jsfiddle.net/72mnd2yt/1/ doesn't display sprite i'm trying draw. tried follow code on @ https://stemkoski.github.io/three.js/sprite-text-labels.html , read line line, i'm not sure went wrong. mind taking @ it?

here 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 light , 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]; };  // 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(); 

a few points:

1) canvas.width = "100%" should canvas.width = "100" (canvas sizes assumed px). same canvas.height.

2) $('body').height() 0, renderer canvas not visible (you can check out in dev tools, it's in element tree squashed 0px high). know nothing jquery, not sure why is, recommend using window.innerheight , window.innerwidth instead anyways. renderer.setsize(window.innerwidth, window.innerheight). you'll want make change in camera initialization.

3) speaking of camera initialization, passing in width , height separate arguments, when there should aspect ratio argument. see docs. so
var camera = new three.perspectivecamera(70, window.innerwidth, window.innerheight, 1, 1000)
becomes
var camera = new three.perspectivecamera(70, window.innerwidth/window.innerheight, 1, 1000)

4) because textures assumed static, need add part:

var texture = new three.texture(getpicture(message)) texture.needsupdate = true // signals texture has changed 

that's one-time flag, need set every time canvas changes if want dynamic texture. don't have make new three.texture each time, add texture.needsupdate in render loop (or in event fires when want texture change, if you're going efficiency). see docs, under .needsupdate.

---

at point, should work. here further things consider:

5) instead of using texture use canvastexture, sets .needsupdate you. fiddle posted using three.js r71, doesn't have it, newer versions do. this:

var texture = new three.canvastexture(getpicture(message)); // no needsupdate necessary 

6) looks on path based on commented out return picture, can use either canvas element, or data url generated canvas texture. if getpicture returns data url, try this:

var texture = new three.textureloader().load(getpicture(message)) 

you can indirectly use data url texture:

var img = document.createelement('img') var img = new image() img.src = getpicture(message) var texture = new three.texture(img); texture.needsupdate = true 

if not, stick texture or canvastexture, both take canvas element. texture can indirectly take url passing in image element src set data url.

---

fiddle outlined fixes: https://jsfiddle.net/jbjw/x0ul1kbh/