ExtrudeGeometry上的THREE.JS UV贴图

Question

我需要在ExtrudeGeometry对象上应用纹理。

形状为圆形，挤出路径由2个向量组成：

• 一个为顶部。
• 一个用于底部。

我没有选择cylinderGeometry，因为我需要将几何体的顶部/底部放置在精确位置，因为创建的几何体不会总是纯粹垂直（例如倾斜圆柱体）。

这是一个部分的图片（一个顶部向量，一个底部向量和在这两个向量之间挤出的形状）。

和我尝试申请的纹理图片。

我想做的就是将这张照片一次性包裹在物体的垂直两侧。

这是我的代码：

var biVectors = [ new THREE.Vector3( this.startVector.x, this.startVector.y, this.startVector.z ) , new THREE.Vector3( this.endVector.x, this.endVector.y, this.endVector.z ) ];
    var wellSpline = new THREE.SplineCurve3(biVectors);
    var extrudeSettings = {
        steps : 1,
        material: 0,
        extrudeMaterial: 1,
        extrudePath : wellSpline
    };

    var pts = [];
    for (var i = 0; i <= this.segments; i++) {
        var theta = (i / this.segments) * Math.PI * 2;
        pts.push( new THREE.Vector3(Math.cos(theta) * this.diameter , Math.sin(theta) * this.diameter, 0) );            
    }
    var shape = new THREE.Shape( pts );
    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

    var texture = THREE.ImageUtils.loadTexture( 'textures/sampleTexture2.jpg' );
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.flipY = false;

    var material = new THREE.MeshBasicMaterial( { map: texture } );

    var slice = new THREE.Mesh( geometry, material );
    var faceNormals   = new THREE.FaceNormalsHelper( slice );
    console.log("face normals: ", faceNormals);
    myCanvas.scene.add( faceNormals );
    slice.parentObject = this;
    myCanvas.scene.add( slice );
    this.object3D = slice;
}

现在，正如您所看到的，映射根本不正确。

我在过去3天内已经阅读了很多有关此问题的信息。但是，由于我是THREE.JS的新手，我已经没有选择了。

我想我必须重新定义UV坐标，但我不知道如何做到这一点。

似乎在THREE.JS。

中将纹理包裹在圆柱体上就像对象一样简单

有人可以帮我解决这个问题吗？