How to assign multiple image textures to a subdivided face

[Kid2_Madhi]

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

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

there’s an image applied to each face like this

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

[hofk]

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
DoubleSide(gl_FrontFacing)
( From the Collection of examples from discourse.threejs.org . )

Select faces within radius
Wireframe of quads

Magic Box example 20

To THREE.Geometry will be removed from core with r125 - #26 by hofk
ind.BufferGeo SpeedTest_r124

---

see also Faces on BufferGeometry

---

To compare old geometry and BufferGeometry (example SpeedTest)

	// 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;
				
			}
						
		}
		
	}

[Kid2_Madhi]

@hofk I created a fiddle: Edit fiddle - JSFiddle - Code Playground using the code from the DoubleSide(gl_FrontFacing) example, and I don’t know where to start in terms of taking this code and applying it to a BoxGeometry.

[hofk]

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
translate: three.js docs