Tworzę sześcian i stosuję 6 różnych tekstur na każdej z jego twarzy. Każda tekstura jest plikiem .png i zawiera przezroczyste części. Stosuję również kolor do kostki - chcę zobaczyć ten kolor przez przezroczystość png.

Problem: Przezroczystość renderuje się jako biały kolor, więc nie widzę podstawowego koloru kostki (co czyni ok, jeśli usunę teksturę png)

Jak mogę sprawić, aby przezroczystość png działała? Próbowałem grać z niektórymi ustawieniami materiału, ale żaden nie czyni go przezroczystym.

Kod do tworzenia kostki i materiałów:

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);

EDYTOWAĆ:

Obraz poniżej pokazuje problem - dzięki rozwiązaniu senthanal lewa tekstura renderuje teraz ok - jest to obraz png bez przezroczystości - ustawiam przezroczystość w kodzie za pomocą

materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));

Odpowiednia tekstura jest również obrazem png - tylko, że ma przezroczysty obszar (wszystko, co renderuje biel, powinno być czerwone, ponieważ jest przezroczyste i powinno przyjmować kolor z kostki?). Jak mogę uczynić tę białą część przezroczystą?