sprite sheet - Transparant spritesheet animation for webgl -


i'm getting started webgl , trying make animation based on spritesheet. i've found example , changed spritesheet own. though removed white background, saved transparant png, animation still shows white background.

this example used: http://stemkoski.github.io/three.js/texture-animation.html

is there way how can rid off white background? in advance.

edit:

var runnertexture = new three.imageutils.loadtexture( 'images/run.png' ); annie = new textureanimator( runnertexture, 10, 1, 10, 75 ); // texture, #horiz, #vert, #total, duration. var runnermaterial = new three.meshbasicmaterial( { map: runnertexture, side:three.doubleside } ); var runnergeometry = new three.planegeometry(50, 50, 1, 1); var runner = new three.mesh(runnergeometry, runnermaterial); runner.position.set(-150,25,0); scene.add(runner); 

to support pngs alpha-channel, have modify meshbasicmaterial accordingly: there attribute 'transparent' set 'true'.

try using following line instead:

var runnermaterial = new three.meshbasicmaterial( { map: runnertexture, side:three.doubleside, transparent: true } ); 

see reference material:

.transparent

defines whether material transparent. has effect on rendering transparent objects need special treatment , rendered after non-transparent objects. working example of behaviour, check webglrenderer code. when set true, extent material transparent controlled setting opacity.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -