Three.js: Combine materials on a single face of cube (that uses multiple materials)

Question

I have created a cube (skybox) that uses different materials for each side. There is no problem with that 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);

However, now I would like to add a material to one of the faces of the cube and combine the materials on this face of the cube.

So basically I would have one material on 5 faces and 2 materials on 1 face of the cube - I want to overlay that 'original' texture with another transparent png so it covers only a specific part of the original image. Both images have the same dimensions, only the new one is partially transparent. Is it even possible to do with CubeGeometry? Or do I need to do it with planes? Any help greatly appreciated!

You can create a custom GLSL shader, that combines the 2 colours (col1.rgb + (col2.rgb * col1.a)) or you can use your plane method. Beware of transparency though it can not work as you expect. — beiller, Nov 18 '14 at 20:52

score 1 · Accepted Answer · edited May 23 '17 at 12:09

You can for sure change material of one of faces. You cannot use two materials for one face though.

I would recommend creating additional texture as combination of previous two, making it into separate material and assign it to sixth face of the cube when needed. If it is possible, merge those images beforehand in your graphic editor of choice. If you can only do it in runtime, you will either have to use canvas to merge them or shader as recommended by @beiller.

I wouldn't recommend transparent planes, transparency can be very tricky sometimes and render in a weird way.

something similar is discussed here - Multiple transparent textures on the same mesh face in Three.js

Thank you, I did it with canvas indeed (before reading your answer). Looks like a good solution, works without problems. — Fygo, Nov 24 '14 at 16:56

Three.js: Combine materials on a single face of cube (that uses multiple materials)

1 Answers1