In my latest project, I have successfully created a cube (skybox) with different materials for each side using MeshFaceMaterial:
var imagePrefix = "images-nissan/pano_";
var imageDirections = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
var imageSuffix = ".png";
var skyGeometry = new THREE.BoxGeometry(1, 1, 1);
var materialArray = [];
for (var i = 0; i < 6; i++) {
materialArray.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(imagePrefix + imageDirections[i] + imageSuffix),
side: THREE.BackSide
}));
}
var skyMaterial = new THREE.MeshFaceMaterial(materialArray);
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial);
skyBox.name = "interiorMesh";
scene.add(skyBox);
Now, I am facing a new challenge where I need to add a material to just one face of the cube and combine materials on that specific face:
Essentially, I need to have one material on five faces and two materials on one face of the cube. My goal is to overlay the 'original' texture with another transparent PNG, covering only a specific part of the original image. Both images have the same dimensions, with the new one being partially transparent. I'm unsure if this can be achieved with CubeGeometry, or if I should consider using planes instead. Any guidance on this matter would be greatly appreciated!