About multiple materials

Questions
1

I’m a bit confused about multiple materials usage.
What’s the purpose of that? I seen two scenarios:
1- the whole mesh (all the faces) having multiple materials (eg a black flat material + a wireframe material) so the renderer computes the faces on multiple passes or internally combines the materials.
2- 1 material from the array for every face (eg one face is red shiny, another one is green matte, etc)

Let’s say I need to have a material for the front side of a mesh and another one for the back side.
Do I need to clone the mesh and apply one material for one mesh?

In any case, I think documentation for multiple materials is poor. I seen the “Materials” example, that lets me opt for scenario 2, but as long as in the Mesh.material part of the docs you talk about the array of materials, you should say how it’s used.

Thank you

3

You can do it like this:

var frontMaterial = new THREE.MeshPhongMaterial( { map: frontTexture, side: THREE.FrontSide } );
var backMaterial = new THREE.MeshPhongMaterial( { map: backTexture, side: THREE.BackSide } );

var group = new THREE.Group();

group.add( new THREE.Mesh( geometry, frontMaterial ) );
group.add( new THREE.Mesh( geometry, backMaterial ) );

scene.add( group );

Multiple materials per mesh are often used when certain parts of the geometry are rendered with different materials. A typical example are character models. In this context, BufferGeometry.groups defines which part of the geometry is rendered with which material.

2 Likes
4

thanks for the reply.
So, as you clarified, multiple materials are used on the same geometry / Mesh, as on option 2 of my question.

Don’t you think your reply can be a good addition to multimaterials documentation?

Multiple materials per mesh are often used when certain parts of the geometry are rendered with different materials. A typical example are character models. In this context, BufferGeometry.groups 3 defines which part of the geometry is rendered with which material.

5

Possibly related:

1 Like
6

this is a great solution. he basically creates groups containing all the faces of the mesh.
This is so clean that could be supported automatically in three.js, like when you assign an array of materials to a mesh, and its geometry doesn’t have groups, three.js could automatically add the needed groups. Or, just render the geometry like it had groups.
Or, to keep it simpler, this can become an official example or be added to documentation
@Mugen87 what do you think?

7

Improvements to the documentation are always welcome. Feel free to make a PR with your suggested changes.

1 Like