Question

我刚刚开始使用webgl并且正在尝试基于spritesheet制作动画。我找到了一个例子，并将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);

Answer 1

要支持带有Alpha通道的PNG，您必须相应地修改MeshBasicMaterial：有一个属性'transparent'，您可以设置为'true'。

请尝试使用以下行：

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

另请参阅Material的参考资料：

.transparent

定义此材质是否透明。这会产生影响   渲染为透明物体需要特殊处理   在非透明对象之后呈现。这是一个有效的例子   行为，检查WebGLRenderer代码。设置为true时，范围   通过设置不透明度来控制材料是透明的。

webgl的透明精灵表动画

1 个答案: