THREE.JS UV Mapping on ExtrudeGeometry

问题

I need to apply a texture on a ExtrudeGeometry object.

The shape is a circle and the extrude path is composed of 2 vectors :

One for the top.
One for the bottom.

I didn't choose cylinderGeometry because I need to place top/bottom sections of my geometry at precise positions and because the geometry created will not be always purely vertical (like a oblique cylinder for example).

Here is a picture of a section (one top vector, one bottom vector and a shape extruded between these 2 vectors).

and a picture of the texture I'm trying to apply.

All I want to do is to wrap this picture on the vertical sides of my object just one time.

Here is my code :

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;
}

Now, as you can see, the mapping is not correct at all.

I've read a lot of information about this problem the last 3 days. But I'm running out of options as I'm new to THREE.JS.

I think I have to redefine the UV coordinates but I have no clue how to do this.

It seems that wrapping a texture on a cylinder like object is anything but easy in THREE.JS.

Can someone please help me on this issue ?

来源：https://stackoverflow.com/questions/28174840/three-js-uv-mapping-on-extrudegeometry

标签

three.js

uv-mapping