For my project, I am working on creating a cube and applying 6 different textures to each of its faces. These textures are .png files with transparent parts. Additionally, I want to apply a color to the cube and have that color show through the transparent areas of the textures.
However, I have encountered an issue where the transparency renders as white, obscuring the base color of the cube that otherwise renders correctly without the textures.
I have experimented with various material settings but have not been successful in making the png transparency work as intended.
Below is the code I am using to create the cube and assign materials:
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);
In the image below, the solution by senthanal successfully renders the left texture, which is a png image without transparency. However, the right texture contains transparency that shows up as white instead of taking on the color of the cube. How can I make the white part transparent and display the red color from the cube?