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

【问题标题】：How do I make the alpha channels of my animated sprite see through?如何使动画精灵的 Alpha 通道透明？
【发布时间】：2019-04-23 00:12:00
【问题描述】：

我正在尝试通过制作一个小游戏来学习 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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

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

【讨论】：

我是个傻瓜，这绝对是解决方案。我真的很感谢你抽出时间来炫耀这一点。我很感激。
@GreedFeed 不客气。没花那么多时间。有些人做填字游戏或数独，我回答 stackoverflow 问题。