1

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).

section

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

section

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 ?

Arnaud
  • 141
  • 2
  • 9
  • Would you consider using `CylnderGeometry`, instead, and applying a _shear matrix_ to it to get the oblique effect you want? http://stackoverflow.com/questions/25639268/three-js-extrudegeometry-using-depth-and-a-direction-vector/25647543#25647543 – WestLangley Jan 27 '15 at 16:36
  • My goal is to modelize a 3D drilling well. I cannot use CylinderGeometry as the image shows only a small part of my 3D well which is extruded along its path. The well is divided in sections (one is displayed here) and each section will have its own texture (geological information). Top and bottom vector are, in fact, vectors along a spline. – Arnaud Jan 28 '15 at 08:03
  • Can you shear each cylinder, apply a texture to each, and then stack the cylinders? I am trying to suggest a work-around to `ExtrudeGeometry`. – WestLangley Jan 28 '15 at 17:44

0 Answers0