# How to assign multiple image textures to a subdivided face

**URL:** <https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [April 13, 2022, 7:46pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043 "2022-04-13T19:46:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kid2\_Madhi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kid2_madhi/32/25585_2.png) [@Kid2\_Madhi](https://discourse.threejs.org/u/Kid2_Madhi)\
**Post date:** [April 13, 2022, 7:46pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043/1 "2022-04-13T19:46:35Z")

</div>

I created a demo on blender to show what I’m getting at, for anyone that didn’t understand the question

This is the subdivided face

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/e/0ec2f6dfa120037682e1b568a35acc99b9e03bb0.jpeg)

so essentially for every subdivided face like the ones selected in the image…

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/2/922b8937db548b01e9f75ca6e4ec6b654f96655d.jpeg)

there’s an image applied to each face like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/0/f0d614b33003208c6dcd5c6512d77f9443d83c31.jpeg)

So the problem that I have is being able to assign materials to individual faces in threes especially if WebGL doesn’t support quads I also decided to go back to r124 because the face property didn’t exist on the Geometry class for version 125 and after, It wasn’t necessary change, because I only needed it for the material index, which I could also get by using raycasting to get the face on an intersected object which had the materialIndex property as well (All this is just to provide additional context. My main problem is just being able to assign an image texture to a subdivided face while accounting for the fact that WebGL doesn’t support quads).

---

<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 14, 2022, 6:45am UTC](https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043/2 "2022-04-14T06:45:03Z")

</div>

If you assign the same material index to the two triangles of a quad, you get what you want.

The thing works of course also with BufferGeometry and thus for current revisions.

Take a look at these things.

[ColorWave](https://hofk.de/main/discourse.threejs/2020/ColorWave/ColorWave.html)  
[DoubleSide(gl\_FrontFacing)](https://hofk.de/main/discourse.threejs/2020/DoubleSide(gl_FrontFacing)/DoubleSide(gl_FrontFacing).html)  
( From the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) . )

[Select faces within radius](https://discourse.threejs.org/t/select-faces-within-radius/5764)  
[Wireframe of quads](https://discourse.threejs.org/t/wireframe-of-quads/17924)

[Magic Box](https://hofk.de/main/threejs/sandboxthreeg/MagicBoxTHREEg.html) example 20

To [THREE.Geometry will be removed from core with r125 - #26 by hofk](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401/26)  
ind.BufferGeo [SpeedTest\_r124](https://hofk.de/main/discourse.threejs/2021/SpeedTest_r124/SpeedTest_r124.html)

* * *

see also [Faces on BufferGeometry](https://discourse.threejs.org/t/faces-on-buffergeometry/30921)

* * *

To compare old geometry and BufferGeometry (example SpeedTest)

```javascript

	// faces Geometry or BufferGeometry	
	
	for ( let j = 0; j < rs; j ++ ) {
	
		j0 = hss * j; 
		j1 = hss * ( j + 1 );
		
		for ( let i = 0; i < hs; i ++ ) {
			
			// 2 faces / segment, 3 vertex indices
			a = j0 + i;
			b1 = j1 + i; // right-bottom
			c1 = j1 + 1 + i;
			// b2 = j1 + 1 + i; =c1// left-top 
			c2 = j0 + 1 + i;
			
			if ( g.isGeometry ) {
				
				g.faces.push( new THREE.Face3( a, b1, c1 ) ); // right-bottom
				g.faces.push( new THREE.Face3( a, c1, c2 ) ); // left-top
				
			}
			
			if ( g.isBufferGeometry ) {
			
				g.faceIndices[idxCount] = a; // right-bottom
				g.faceIndices[idxCount + 1] = b1;
				g.faceIndices[idxCount + 2] = c1; 
				
				g.faceIndices[idxCount + 3] = a; // left-top
				g.faceIndices[idxCount + 4] = c1,
				g.faceIndices[idxCount + 5] = c2; 
				
				idxCount += 6;
				
			}
						
		}
		
	}

```

---

<div class="post-metadata">

**Author:** ![Kid2\_Madhi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kid2_madhi/32/25585_2.png) [@Kid2\_Madhi](https://discourse.threejs.org/u/Kid2_Madhi)\
**Post date:** [April 14, 2022, 3:38pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043/3 "2022-04-14T15:38:47Z")

</div>

@hofk I created a fiddle: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/3nqojzmu/) using the code from the [DoubleSide(gl\_FrontFacing)](https://hofk.de/main/discourse.threejs/2020/DoubleSide(gl_FrontFacing)/DoubleSide(gl_FrontFacing).html) example, and I don’t know where to start in terms of taking this code and applying it to a BoxGeometry.

---

<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 14, 2022, 4:42pm UTC](https://discourse.threejs.org/t/how-to-assign-multiple-image-textures-to-a-subdivided-face/37043/4 "2022-04-14T16:42:19Z")

</div>

You can create 6 squares and assemble them into a box. For this you have to rotate and translate the geometry.

rotate: [three.js docs](https://threejs.org/docs/index.html?q=ge#api/en/core/BufferGeometry.rotateX)  
translate: [three.js docs](https://threejs.org/docs/index.html?q=ge#api/en/core/BufferGeometry.translate)