Animation de spritesheet transparent pour webgl

Question

Je commence juste avec webgl et j'essayais de faire une animation basée sur un spritesheet. J'ai trouvé un exemple et changé le spritesheet pour le mien. Cependant, même si j'ai supprimé le fond blanc, enregistré comme un png transparent, l'animation apparaît toujours avec un fond blanc.

Ceci est l'exemple je: http://stemkoski.github.io/Three.js/Texture-Animation.html

Est-il possible que je peux me débarrasser de l'arrière-plan blanc? Merci d'avance.

EDIT:

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

Pour soutenir PNGs avec un canal alpha, vous devez modifier le MeshBasicMaterial en conséquence: Il y a un attribut « transparent » que vous pouvez définir à « true ».

Essayez d'utiliser la ligne suivante à la place:

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

Voir aussi la référence de Material:

.transparent

Définit si ce matériau est transparent. Cela a un effet sur le rendu car les objets transparents nécessitent un traitement spécial et sont rendus après des objets non transparents. Pour un exemple de ce comportement , vérifiez le code WebGLRenderer. Lorsque cette propriété est définie sur true, l'étendue à laquelle le matériau est transparent est contrôlée en définissant l'opacité.