Three.js 如何将多个面上的纹理映射到弯曲的自定义几何体上

Question

我的目标是将矩形纹理映射到曲面上。我的自定义、挤压、形状、几何体的弯曲部分由总共 1800 个面中的 599 个面（​​Face4）组成。我试图将我的纹理分割到这 599 个曲面上。

图 1：我的自定义几何体的黑色面是我想要将纹理映射到的弯曲部分

图 2：我正在尝试做的事情的粗略示例

图 3：每个面都是一个垂直站立的矩形： faces[ i ].color.setHex( Math.random() * 0xffffff );

尝试获取所选面的 UV 坐标（每个面如图像 3 所示）并旨在通过将纹理分割到这些曲面上来映射我的纹理。这是我到目前为止得到的：

var image = 'resources/customRectangle.png';
var texture = THREE.ImageUtils.loadTexture( image );
    texture.repeat.set(0.1, 0.1);                                           
    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;;          

var settings = {
    amount: 14.5,
    steps : 1,
    bevelEnabled: false,
    curveSegments: 300,
    material: 0,
    extrudeMaterial: 1
    };

 var shape = new THREE.Shape();
     shape.moveTo( 90, 120 );
     shape.absarc( -30, -30, 200, 0, Math.PI * 0.27, false );
     shape.moveTo( 160, -40 );
     shape.moveTo( 90, 120 );
 var geometry = new THREE.ExtrudeGeometry( shape, settings );       

     geometry.computeBoundingBox();
 var max = geometry.boundingBox.max;
 var min = geometry.boundingBox.min;
 var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
 var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
 var faces = geometry.faces;
     geometry.faceVertexUvs[0] = [];


 for ( var i = 0; i < faces.length; i ++ ) {

 var face4 = faces[i].d;

 if( face4 > 0 && i < 1800 && i > 1200  ) {   // Selects curved faces   

    faces[ i ].color.setHex( 0x555555 );

var v1 = geometry.vertices[faces[i].a];
var v2 = geometry.vertices[faces[i].b];
var v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([

new THREE.Vector2((v1.x + offset.x)/range.x,(v1.y + offset.y)/range.y),
new THREE.Vector2((v2.x + offset.x)/range.x,(v2.y +offset.y)/range.y),
new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)

     ]);
   };
 };

    geometry.uvsNeedUpdate = true;  

var material = new THREE.MeshLambertMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = x - 46;
    mesh.position.y = y;
    mesh.position.z = z + 20;   
    mesh.rotation.set( 1.5, 0.045, 0.59);
    object3D.add(mesh);     `

这是我第一次使用 UV 坐标，因此我不确定是否正确创建它们，也不知道如何使用 UV 坐标在多个面上映射纹理。有没有办法将纹理分成多个部分？（如图 3 所示）。得出如图 2 所示的结果？

我已经被这个问题困扰了一段时间，在互联网上进行了深入的搜索，不得不求助于专业人士的帮助。我非常感谢任何提前的帮助！:) 亲切的问候，莱昂。