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
Post a Comment