Why isn't this alphaMap working on my sprite material?

I’m trying to create a sprite with a texture map and alphaMap to control the transparency.

const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load(SPRITE_TEXTURE);
const opacityTexture = textureLoader.load(SPRITE_ALPHA);

const spriteMaterial = new THREE.SpriteMaterial({ 
		alphaMap: opacityTexture,
		map: spriteTexture,
		transparent: true

But for whatever reason, my alphaMap texture refuses to work. It’s a black and white PNG. The sprite doesn’t render at all. It’s completely invisible:



But if I substitute SPRITE_ALPHA for a PNG that is literally one solid color (eg: #000000, or #ffffff, or #555555) then it suddenly works…

This is just to confirm that I get similar result – when this specific alpha map is used, it is as if the whole map is black (i.e. completely transparent). It looks like only one pixel from the corner of the alpha map is being sampled.

Until someone with more knowledge of Sprite comes up with a solution (I have never used THREE.SpriteMaterial so far), you can simulate sprites with ordinary material. Here is a demo, use the mouse to rotate the scene. The sprite is always facing the camera because of line 66:

sprite.lookAt( camera.position );



Thanks for the workaround, it’s too bad SpriteMaterial doesn’t work!

I’m not sure whether SpriteMaterial does not work with alpha maps, or it is just me (and you) missing out some important setting. At least I tried for an hour, but I did not manage to make it work.

There is an issue at GitHub for this. Unfortunately, sprites with alpha maps broke with r151.

Should be fixed with r153.