Odd sprite behavior

I am trying to set my sprites to be fully transparent aside from some lettering. But am seeing odd outline boxes from some angles.

Viewed from right side
image

viewed from left side
image

I would like the left side view to work from all angles.
I wrote my sprites on canvas as follows,
context.fillStyle = “rgba(” + backgroundColor.r + “,” + backgroundColor.g + “,” + backgroundColor.b + “,” + backgroundColor.a + “)”;
context.strokeStyle = “rgba(” + borderColor.r + “,” + borderColor.g + “,” + borderColor.b + “,” + borderColor.a + “)”;

Then used the following sprite material
var spriteMaterial = new THREE.SpriteMaterial({
color: 0xa6cfe2,
side: THREE.DoubleSide,
transparent: true,
opacity: 1,
map: texture
});

Hi!
Try to remove transparent and opacity properties and to add alphaTest : 0.5.

2 Likes

Works perfectly. 10/10.

Thank you