three.js - ExtrudeGeometry の THREE.JS UV マッピング

Question

ExtrudeGeometry オブジェクトにテクスチャを適用する必要があります。

形状は円で、押し出しパスは 2 つのベクトルで構成されます。

• トップ用の 1 つ。
• 底に1つ。

ジオメトリの上部/下部セクションを正確な位置に配置する必要があり、作成されるジオメトリが常に純粋に垂直であるとは限らないため (たとえば、斜めの円柱など)、cylinderGeometry を選択しませんでした。

これは断面図です (1 つの上部ベクトル、1 つの下部ベクトル、およびこれら 2 つのベクトル間で押し出された形状)。

適用しようとしているテクスチャの写真。

私がしたいのは、この画像をオブジェクトの垂直方向に一度だけラップすることだけです。

これが私のコードです:

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 では、円柱状のオブジェクトにテクスチャをラップするのは簡単ではないようです。

誰かがこの問題について私を助けてくれますか?