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

我的目标是将矩形纹理映射到曲面上。我的自定义拉伸形状几何体的曲线部分由总共1800个面中的599个面（面4）组成。我试着把我的纹理分割成599个曲面

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

图2：我正在尝试做的一个粗略示例

图像3：每个面都是垂直站立的矩形：面[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);     `

var image='resources/customRectangle.png'；
var texture=THREE.ImageUtils.loadTexture（图像）；
纹理。重复。设置（0.1,0.1）；
texture.wrapps=texture.wrapT=THREE.mirroredrepeatwapping；；
变量设置={
金额：14.5，
步骤：1，
bevelEnabled:错，
曲线段：300，
材料：0，
挤压材料：1
};
var shape=新的三个.shape（）；
形状。移动到（90120）；
absarc（-30，-30200,0，Math.PI*0.27，false）；
形状。移动到（160，-40）；
形状。移动到（90120）；
var geometry=新的三个。挤出计量（形状、设置）；
geometry.computeBoundingBox（）；
var max=geometry.boundingBox.max；
var min=geometry.boundingBox.min；
var偏移=新的三个矢量2（0-min.x，0-min.y）；
var范围=新的三个矢量2（最大x-最小x，最大y-最小y）；
var faces=geometry.faces；
geometry.faceVertexUvs[0]=[]；
对于（变量i=0；i0&&i<1800&&i>1200）{//选择曲面
faces[i].color.setHex（0x555555）；
var v1=几何体.顶点[面[i].a]；
var v2=几何体.顶点[面[i].b]；
var v3=几何体.vertices[面[i].c]；
geometry.faceVertexUvs[0]。推送([
新的3.Vector2（（v1.x+offset.x）/range.x，（v1.y+offset.y）/range.y），
新的三矢量2（（v2.x+offset.x）/range.x，（v2.y+offset.y）/range.y），
新的3.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=新的三个网格（几何体、材质）；
网格位置x=x-46；
网格位置y=y；
网格位置z=z+20；
网格旋转设置（1.5,0.045,0.59）；
object3D.add（网格）`

这是我第一次使用UV坐标，所以我不确定我是否正确创建了它们，也不知道如何使用UV坐标跨多个面映射纹理。是否仍然可以将纹理分割为多个分区？（如图3所示）。要形成如图2？所示的结果

我已经在这上面呆了一段时间，在互联网上搜索了很深，不得不求助于专业人士的帮助。我非常感谢您事先提供的任何帮助！：）你好，里昂