Custom UVgenerator Three.js for extrudedgeometry

Question

I want to use a texture on the surface of my extruded geometry. I have been researching custom UVgenerators for a while now, and have found these related questions: 1.) How to apply a texture to THREE.ExtrudeGeometry? 2.) Loaded texture appears blurred, or like a single color. How to make the texture crisp and sharp

However, the method proposed to divide my geometry points by 1000 and to mesh.scale.set(1000,1000,1) doesn't work because my geometry is no longer in the correct place. I would prefer to specify the UV Mapping. One answer says to implement a custom uvgenerator based on the source code, but I am stuck & can't figure out what to do.

This is my geometry creation, the material is 512x512px, how can I map a texture onto the top?:

pointList=[[0,0,0],
        [0,1000,0],
        [750,1000,0],
        [750,750,0],
        [1000,750,0],
        [1000,0,0]]

for (i=0;i < pointList.length; i++) {

        point = pointList[i];

        x = point[0];
        y = point[1];

        myPoints.push( new THREE.Vector2 (x,y) );
    }

    myShape = new THREE.Shape( myPoints );
    extrusionSettings = {
        amount:height
    };

    myGeometry = new THREE.ExtrudeGeometry( myShape, extrusionSettings );
    resultshape = new THREE.Mesh( myGeometry, material );

Instead of a custom UV generator or scaling the model, see if you can get the effect you want like so: `texture.wrapS = texture.wrapT = THREE.RepeatWrapping; `texture.repeat.set( 1 / 500, 1 / 500 ); `texture.offset.set( 0.1, 0.5 );`. Experiment with the values. — WestLangley, Aug 16 '14 at 01:40
@WestLangley you should make a formal answer so it can be approved. — amjoconn, Aug 20 '14 at 14:27
@amjoconn I didn't answer the question; I suggested an alternative approach. The question was how to write a custom `UVGenerator`. — WestLangley, Aug 20 '14 at 15:32

score 4 · Accepted Answer · answered Aug 26 '14 at 16:46

You can specify custom UVs for your ExtrudeGeometry by specifying your own UVGenerator, one of the properties of extrusionSettings.

To specify your custom UV generator, you can use as a template THREE.ExtrudeGeometry.WorldUVGenerator, which can be found in src/extras/geometries/ExtrudeGeometry.js.

There is a simpler solution that may work for you, however.

Instead of a custom UV generator, you can take advantage of the offset and repeat properties of your texture. Use the following pattern:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1 / 500, 1 / 500 );
texture.offset.set( 0.1, 0.5 );

three.js r.68

Custom UVgenerator Three.js for extrudedgeometry

1 Answers1

Linked