Three.js png texture - alpha é processado como branco em vez de transparente
Estou criando um cubo e aplico 6 texturas diferentes em cada um dos seus rostos. Cada textura é um arquivo .png e contém partes transparentes. Eu também estou aplicando uma cor para o cubo - eu quero ver essa cor através da transparência png.
Problema: A transparência é renderizada como cor branca, por isso não consigo ver a cor base do cubo (que renderiza ok se eu remover a textura png)
Como posso fazer a transparência png funcionar? Eu tentei brincar com algumas configurações de material, mas nenhuma delas é transparente.
Código para criar o cubo e os materiais:
var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];
// create textures array for all cube sides
for (var i = 1; i < 7; i++) {
var img = new Image();
img.src = 'img/s' + i + '.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function () {
this.tex.needsUpdate = true;
};
var mat = new THREE.MeshBasicMaterial({color: 0x00ff00, map: tex, transparent: true, overdraw: true });
materials.push(mat);
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);
EDITAR:
A figura abaixo mostra o problema - com a solução do senthanal a textura da esquerda agora renderiza ok - é uma imagem png sem transparência - eu configurei a transparência no código com
materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));
A textura certa também é uma imagem png - só que tem uma área transparente (tudo o que renderiza branco deve ser vermelho puro, uma vez que é transparente e deve tirar a cor do cubo?). Como posso tornar essa parte branca transparente?