webgl的透明精灵表动画答案

【问题标题】：Transparant spritesheet animation for webglwebgl的透明精灵表动画
【发布时间】：2014-08-18 11:12:57
【问题描述】：

我刚刚开始使用 webgl，并试图制作基于 spritesheet 的动画。我找到了一个示例并将精灵表更改为我自己的。然而，即使我删除了白色背景，将其保存为透明 png，动画仍然显示为白色背景。

这是我使用的示例： http://stemkoski.github.io/Three.js/Texture-Animation.html

有什么办法可以摆脱白色背景？提前致谢。

编辑：

var runnerTexture = new THREE.ImageUtils.loadTexture( 'images/run.png' );
annie = new TextureAnimator( runnerTexture, 10, 1, 10, 75 ); // texture, #horiz, #vert, #total, duration.
var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide } );
var runnerGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
var runner = new THREE.Mesh(runnerGeometry, runnerMaterial);
runner.position.set(-150,25,0);
scene.add(runner);

【问题讨论】：

请出示您的代码。
与示例页面上的代码完全相同。我只更改了精灵表。
请在您的问题中包含代码。不是每个人都可以访问外部网站，并且链接可能会随着时间的推移而中断。另请参阅How do I ask a good question?
添加了部分代码，因为它太大了。

标签： three.js webgl sprite-sheet

【解决方案1】：

要支持带有 alpha 通道的 PNG，您必须相应地修改 MeshBasicMaterial：有一个属性“透明”，您可以将其设置为“真”。

尝试改用以下行：

var runnerMaterial = new THREE.MeshBasicMaterial( { map: runnerTexture, side:THREE.DoubleSide, transparent: true } );

另见Material的参考：

.透明

定义此材质是否透明。这对渲染为透明对象需要特殊处理，并且是在非透明对象之后渲染。对于这个工作示例行为，检查 WebGLRenderer 代码。当设置为 true 时，范围通过设置不透明度来控制材质是否透明。

【讨论】：