ExtrudeGeometry: Custom `uv` coordinates examples.

[linbingquan]

Description

Passing side parameters, options.UVGenerator.generateTopUV should make it more convenient to customize uv coordinates.

There might be a simpler way, such as judging the position of the array index to determine which side it is.
If there are any good methods, please tell me. Thank you.

So far, I still haven't figured out how generateSideWallUV works...

It would be better if there were examples regarding the use of options.UVGenerator.generateTopUV or options.UVGenerator.generateSideWallUV.

Solution

It shouldn't be the best solution

diff --git a/src/geometries/ExtrudeGeometry.js b/src/geometries/ExtrudeGeometry.js
index 242a529580..807bcde78f 100644
--- a/src/geometries/ExtrudeGeometry.js
+++ b/src/geometries/ExtrudeGeometry.js
@@ -583,7 +583,7 @@ class ExtrudeGeometry extends BufferGeometry {
 					for ( let i = 0; i < flen; i ++ ) {
 
 						const face = faces[ i ];
-						f3( face[ 2 ] + offset, face[ 1 ] + offset, face[ 0 ] + offset );
+						f3( face[ 2 ] + offset, face[ 1 ] + offset, face[ 0 ] + offset, 'bottom' );
 
 					}
 
@@ -595,7 +595,7 @@ class ExtrudeGeometry extends BufferGeometry {
 					for ( let i = 0; i < flen; i ++ ) {
 
 						const face = faces[ i ];
-						f3( face[ 0 ] + offset, face[ 1 ] + offset, face[ 2 ] + offset );
+						f3( face[ 0 ] + offset, face[ 1 ] + offset, face[ 2 ] + offset, 'top' );
 
 					}
 
@@ -606,7 +606,7 @@ class ExtrudeGeometry extends BufferGeometry {
 					for ( let i = 0; i < flen; i ++ ) {
 
 						const face = faces[ i ];
-						f3( face[ 2 ], face[ 1 ], face[ 0 ] );
+						f3( face[ 2 ], face[ 1 ], face[ 0 ], 'bottom' );
 
 					}
 
@@ -615,7 +615,7 @@ class ExtrudeGeometry extends BufferGeometry {
 					for ( let i = 0; i < flen; i ++ ) {
 
 						const face = faces[ i ];
-						f3( face[ 0 ] + vlen * steps, face[ 1 ] + vlen * steps, face[ 2 ] + vlen * steps );
+						f3( face[ 0 ] + vlen * steps, face[ 1 ] + vlen * steps, face[ 2 ] + vlen * steps, 'top' );
 
 					}
 
@@ -689,14 +689,14 @@ class ExtrudeGeometry extends BufferGeometry {
 			}
 
 
-			function f3( a, b, c ) {
+			function f3( a, b, c, side ) {
 
 				addVertex( a );
 				addVertex( b );
 				addVertex( c );
 
 				const nextIndex = verticesArray.length / 3;
-				const uvs = uvgen.generateTopUV( scope, verticesArray, nextIndex - 3, nextIndex - 2, nextIndex - 1 );
+				const uvs = uvgen.generateTopUV( scope, verticesArray, nextIndex - 3, nextIndex - 2, nextIndex - 1, side );
 
 				addUV( uvs[ 0 ] );
 				addUV( uvs[ 1 ] );
@@ -805,7 +805,7 @@ class ExtrudeGeometry extends BufferGeometry {
 
 const WorldUVGenerator = {
 
-	generateTopUV: function ( geometry, vertices, indexA, indexB, indexC ) {
+	generateTopUV: function ( geometry, vertices, indexA, indexB, indexC, side ) {
 
 		const a_x = vertices[ indexA * 3 ];
 		const a_y = vertices[ indexA * 3 + 1 ];

Alternatives

I can modify the reverse texture relatively easily and it won't be mirrored.

Before	After

Additional context

No response

[Mugen87]

TBH, I vote to remove the option to pass in a custom uv generator. No other generator supports something like that. If custom data are required, it's best to use a custom version of ExtrudeGeometry.

[WestLangley]

You can set a different material for the back (i.e., bottom) face by following a pattern similar to the following:

geometry.clearGroups();
geometry.addGroup( 0, 279, 0 ); // back faces are first in the buffer
geometry.addGroup( 279, 279, 1 ); // front faces are next
geometry.addGroup( 558, 558, 2 ); // side faces are last

const materials = [ materialBack, materialFront, materialSide ];

const mesh = new THREE.Mesh( geometry, materials );

Then use the offset/repeat/center/rotation properties of material.map to adjust the UVs. Use a negative value for repeat.x to reverse the texture.

[linbingquan]

Then use the offset/repeat/center/rotation properties of material.map to adjust the UVs. Use a negative value for repeat.x to reverse the texture.

Thank you for your reply. It seems that setting map.repeat.x to a negative number, like: -1, it can not reverse the texture. Maybe I missed something.

I made a very simple extrude cube and it works.

function createRectShape(width = 1, height = 1) {
	const shape = new Shape()
	const x = 0, y = 0

	shape.moveTo(x, y)
	shape.lineTo(x + width, y)
	shape.lineTo(x + width, y + height)
	shape.lineTo(x, y + height)
	shape.lineTo(x, y)

	return shape
}

const shape = createRectShape(1, 1)
const geometry = new ExtrudeGeometry(shape, { bevelEnabled: false })
geometry.clearGroups();
geometry.addGroup( 0, 6, 0 );
geometry.addGroup( 6, 6, 1 );
geometry.addGroup( 12, 6, 2 );
geometry.addGroup( 18, 6, 3 );
geometry.addGroup( 24, 6, 4 );
geometry.addGroup( 30, 6, 5 );

const url = 'https://threejs.org/examples/textures/uv_grid_opengl.jpg'
const map = () => new TextureLoader().load(url, (texture) => texture.colorSpace = SRGBColorSpace)
const defaultMaterial = new MeshPhongNodeMaterial({ map: map() })
const customMaterial = new MeshPhongNodeMaterial({ map: map() })
customMaterial.map.flipY = false;
customMaterial.map.center.set(0.5, 0.5);
customMaterial.map.rotation = Math.PI

const materials = [
	customMaterial,
	defaultMaterial,
	customMaterial,
	customMaterial,
	defaultMaterial,
	defaultMaterial,
]

const mesh = new Mesh(geometry, materials)
scene.add(mesh)

TBH, I vote to remove the option to pass in a custom uv generator.

If everyone agrees to delete it, add a warning prompt to give users some time to migrate.

[Mugen87]

Yes, the feature should be deprecated first and then be removed in ten releases. If you are interested, it would be great if you file a respective PR.

[WestLangley]

It seems that setting map.repeat.x to a negative number, like: -1, it cannot reverse the texture.

It works for me.

[linbingquan]

It works for me.

@WestLangley Could you please provide an example of the minimum running code, thank you.

[WestLangley]

Could you please provide an example of the minimum running code, thank you.

@linbingquan WebGPU example: https://jsfiddle.net/nm8w7x6b/