Currently, I am attempting to apply a texture to a plane using a PNG file that contains transparency. However, after applying the texture, the transparent areas of the PNG appear black when viewing the shape.
Interestingly, if any part of the image extends beyond the viewport boundaries, the transparency effect begins working again as intended:
https://i.sstatic.net/TY5Vt.png
To demonstrate this issue, I have created an isolated example where the plane is generated in the usual manner:
var loader = new THREE.TextureLoader();
loader.load('img/message2.png', function(tex) {
var mat = new THREE.MeshBasicMaterial({ map : tex, transparent: true });
var geometry = new THREE.PlaneGeometry( 14, 10 );
var plane = new THREE.Mesh( geometry, mat );
plane.position.set(0,0,-10);
scene.add( plane );
});
Could someone please advise if there is an error in my approach or if this may be a bug?
Thank you for your assistance.