javascript - 如何让动画 Sprite 的 Alpha channel 透明？

Question

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

//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 属性声明 Material 透明并激活透明物体的特殊处理:

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