如何使动画精灵的Alpha通道透明？

Question

我正在尝试通过制作一个小型游戏来学习ThreeJS的功能。我有一个动画精灵，在我的场景中使用PlaneGeometry并在MeshBasicMaterial中使用png纹理可以很好地工作，但是不幸的是，即使我的png有一个Alpha通道，该网格仍将Alpha通道显示为黑色，而我更喜欢它显然是透明的。有办法纠正这个问题吗？

//this is a customer function you can see at the top of my codepen
texture = new THREE.SpriteSheetTexture('assets/monster.png', 4, 1, 250, 4);

//loading the basic material here
var material = new THREE.MeshBasicMaterial({ 
   map: texture
});
geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
monster = new THREE.Mesh( geometry, material );
scene.add( monster );

您可以查看我在此处的代码布局，但是请注意，我无法在codepen上使用png资源： https://codepen.io/GreedFeed/pen/yrqpQY

Answer 1

您必须设置THRRE.Material的.transparent属性，该属性规定材料是透明的并激活对透明对象的特殊处理：

var material = new THREE.MeshBasicMaterial({ 
   map: texture,
   transparent: true
});