# Multimaterials in THREE.js

**URL:** <https://discourse.threejs.org/t/multimaterials-in-three-js/2368>\
**Category:** Questions\
**Tags:** materials\
**Created:** [April 8, 2018, 10:17am UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368 "2018-04-08T10:17:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stm/32/14227_2.png) [@stm](https://discourse.threejs.org/u/stm)\
**Post date:** [April 8, 2018, 10:17am UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368/1 "2018-04-08T10:17:14Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/9/9deffe0a7c8440d52f1f08f9067b09f07baa1a04.jpg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 8, 2018, 11:09am UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368/2 "2018-04-08T11:09:43Z")

</div>

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

> <https://github.com/mrdoob/three.js/blob/09c96d393d67486b71286d923c0feb4e1fe94ac3/examples/js/utils/SceneUtils.js#L7-L19>

---

<div class="post-metadata">

**Author:** ![stm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stm/32/14227_2.png) [@stm](https://discourse.threejs.org/u/stm)\
**Post date:** [April 8, 2018, 1:14pm UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368/3 "2018-04-08T13:14:00Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [April 8, 2018, 2:10pm UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368/4 "2018-04-08T14:10:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 8, 2018, 4:10pm UTC](https://discourse.threejs.org/t/multimaterials-in-three-js/2368/5 "2018-04-08T16:10:04Z")

</div>

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](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](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.