Multimaterials in THREE.js

Questions
1

Hello guys,
I have one question.

Is there a way to assign two materials to single face (something like composite material in 3d MAX)? Both materials should have opacity equal to 1, but material on top should have opacity/alpha map that will reveal base material on some parts of mesh.
I want to create mesh with two materials that I can dynamicly change.
Here you can see example made in 3d MAX. Base material is red. Material on top is yellow, and it has opacity map that makes it transparent on some parts.composite%20example

2

You can try to use the pattern from THREE.SceneUtils.createMultiMaterialObject():

1 Like
3

@Mugen87 Thank you for your quick response!
That will create two meshes with one of two materials aplied to each one of them.
Ii’m trying to avoid duplicating meshes becouse I have very complex hi poly model. I tought there was a way to assign two materials on single mesh, but I guess I will have to try mentioned patern.

4

You can have more than one material on a single mesh. For example, you might have a character made of a single mesh but with different materials for hair, skin, eyes, clothes etc.

However, you can only have one material per face. which is what you are asking about. This is what the composite material in 3ds max allows, and there is no direct equivalent in three.js - only workarounds using multiple meshes.

1 Like
5

I’m not sure this will help. I have the multi-material dynamic for the triangles.

See http://sandboxthreef.threejs.hofk.de/basic%20examples.html

It’s made with my addon THREEf.
https://github.com/hofk/THREEf.js/blob/dev/THREEf_90/THREEf.js

 // write groups for multi material
    		
 for ( var f = 0, p = 0; f < faceCount; f ++, p += 3 ) {
    			
    	g.addGroup( p, 3, 1 );
    			
    }
...
g.groupsNeedUpdate = true; // to change materialIndex for multi material

...
g.groups[ fIdx ].materialIndex = g.materialCover( ( j + 0.5 ) / rs, i / hs, t );

Search for groups in THREEf.

Each face is its own material group and can thus be changed dynamically.