Exploring the capabilities of ThreeJS through a small game project has been quite fascinating. Currently, I have an animated sprite that fits well in my scene using PlaneGeometry and a png texture in MeshBasicMaterial. However, the issue arises when the alpha channel in the png renders as black instead of transparent. Is there a solution to rectify this problem?
// Custom function at the beginning of my codepen
texture = new THREE.SpriteSheetTexture('assets/monster.png', 4, 1, 250, 4);
// Definition of basic material below
var material = new THREE.MeshBasicMaterial({
map: texture
});
geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
monster = new THREE.Mesh(geometry, material);
scene.add(monster);
To see my coding structure, you can visit the following link. Please note that due to constraints, the png resource may not load on codepen: https://codepen.io/GreedFeed/pen/yrqpQY