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/


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more