Tiling Texture via Custom UVGenerator for ExtrudeGeometry in Three.js

Question

I'm trying to create a textured surface along a path in three.js. I want the texture to tile/repeat along the direction of the path, like this example created in blender:

One way to accomplish this is to create each of the faces "by hand" and to apply a material/texture to each. That works out fine for simple paths (e.g. straight lines) but gets complicated for more elaborate paths.

One of the tools three.js provides is ExtrudeGeometry. Applying a texture to a mesh created this way looks like this with the default UV mapping:

So clearly I need to write a custom UVGenerator function to pass to ExtrudeGeometry. Unfortunately, this doesn't appear to be something for which there is documentation, and previous questions that show up in search results are either out of date (the most complete answers involve a different API for the UVGenerator functions: example) or have no answers (an example).

Here's a jsFiddle example that illustrates the undesired/default behavior. The code is reproduced below. The uvGenerator() function in it is functionally identical to the default three.js uvGenerator, THREE.WorldUVGenerator. It's in the example just to make it easier to fiddle with.

window.onload = function() {
        var camera, dataURI, renderer, scene, surface;
        var texture, uvGenerator;
        var width = 800, height = 600;

        dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAi0lEQVRIx83WQQ6AIAwEwMXwb/p0b4SI1CJsS08e2k0nKDGVUsCsDEBESOkikusTIx3ABXJdJEEN9BLsRbRRjoJdiEeIr2Ad0Y+7C1YQr4MRgn+I0UiQYBahNMcJ7Ai9LVRgQXw2RAv0HS2HdIBgtKnxHTtD0O9r/86PEbRbT11TdEHecukrldi/7zd8KDG/sdhdzgAAAABJRU5ErkJggg==';

        function initCamera() {
                camera = new THREE.PerspectiveCamera(60, width/height, 1, 1000);
                camera.position.set(0, 0, 0);
                scene.add(camera);
        }

        function initLights() {
                var lights;

                lights = [
                        new THREE.PointLight(0xffffff, 1, 0),
                        new THREE.PointLight(0xffffff, 1, 0),
                        new THREE.PointLight(0xffffff, 1, 0),
                ];
                lights[0].position.set(0, 200, 0);
                lights[1].position.set(100, 200, 100);
                lights[2].position.set(-100, -200, -100);

                scene.add(lights[0]);
                scene.add(lights[1]);
                scene.add(lights[2]);
        }

        function initRenderer() {
                var canvas;
                canvas = document.getElementById('canvas');
                renderer = new THREE.WebGLRenderer();
                renderer.setSize(width, height);
                canvas.appendChild(renderer.domElement);
        }

        function initScene() {
                scene = new THREE.Scene();
        }

        function initSurface() {
                surface = extrudeSurface();
                surface.position.set(50, -50, 50);
                scene.add(surface);
        }

        function generalInit() {
                initScene();
                initCamera();
                initLights();
                initSurface();
                initRenderer();
                
                animate();
        }
        uvGenerator =  {
                generateTopUV:  function(geometry, vertices, idxA, idxB, idxC) {
                        var ax, ay, bx, by, cx, cy;

                        ax = vertices[idxA * 3];
                        ay = vertices[(idxA * 3) + 1];
                        bx = vertices[idxB * 3];
                        by = vertices[(idxB * 3) + 1];
                        cx = vertices[idxC * 3];
                        cy = vertices[(idxC * 3) + 1];
                        return([
                                new THREE.Vector2(ax, ay),
                                new THREE.Vector2(bx, by),
                                new THREE.Vector2(cx, cy),
                        ]);
                },
                generateSideWallUV: function(geometry, vertices,
                        idxA, idxB, idxC, idxD) {

                        var ax, ay, az, bx, by, bz, cx, cy, cz;
                        var dx, dy, dz, bb, bbx, bby, bbz;

                        geometry.computeBoundingBox();
                        bb = geometry.boundingBox;
                        bbx = bb.max.x - bb.min.x;
                        bby = bb.max.y - bb.min.y;
                        bbz = bb.max.z - bb.min.z;

                        ax = vertices[idxA * 3];
                        ay = vertices[(idxA * 3) + 1];
                        az = vertices[(idxA * 3) + 2];
                        bx = vertices[idxB * 3];
                        by = vertices[(idxB * 3) + 1];
                        bz = vertices[(idxB * 3) + 2];
                        cx = vertices[idxC * 3];
                        cy = vertices[(idxC * 3) + 1];
                        cz = vertices[(idxC * 3) + 2];
                        dx = vertices[idxD * 3];
                        dy = vertices[(idxD * 3) + 1];
                        dz = vertices[(idxD * 3) + 2];

                        if(Math.abs(ay - by) < 0.01) {
                                return([
                                        new THREE.Vector2(ax, 1 - az),
                                        new THREE.Vector2(bx, 1 - bz),
                                        new THREE.Vector2(cx, 1 - cz),
                                        new THREE.Vector2(dx, 1 - dz),
                                ]);
                        } else {
                                return([
                                        new THREE.Vector2(ay, 1 - az),
                                        new THREE.Vector2(by, 1 - bz),
                                        new THREE.Vector2(cy, 1 - cz),
                                        new THREE.Vector2(dy, 1 - dz),
                                ]);
                        }
                },
        }
        function extrudeSurface() {
                var extrudeCfg, geometry, material, mesh, size, shape, curve;

                size = 20;

                curve = new THREE.CatmullRomCurve3([
                        new THREE.Vector3(-50, 0, -25),
                                    new THREE.Vector3(50, 0, 75),
                ]);

                extrudeCfg = {
                        steps:          200,
                        bevelEnabled:   false,
                        extrudePath:    curve,
                        UVGenerator:    uvGenerator,
                        //UVGenerator:  THREE.WorldUVGenerator,
                };

                shape = new THREE.Shape();
                shape.moveTo(0, 0);
                shape.lineTo(0, size);
                shape.lineTo(0.1, size);
                shape.lineTo(0.1, 0);
                shape.lineTo(0, 0);

                geometry = new THREE.ExtrudeGeometry(shape, extrudeCfg);
                geometry.computeBoundingBox();
                geometry.computeVertexNormals(true);
                material = new THREE.MeshBasicMaterial({ map: texture });
                mesh = new THREE.Mesh(geometry, material);
            new THREE.Vector3(0, 0, 0),
                return(mesh);
        }
        function animate() {
                if(!scene)
                        return;
                animID = requestAnimationFrame(animate);
                render();
                update();
        }
        function render() {
                if(!scene || !camera || !renderer)
                        return;
                renderer.render(scene, camera);
        }
        function update() {
                if(!scene || !camera || !surface)
                        return;
                camera.lookAt(surface.position);
                //surface.rotation.x += 0.01;
                surface.rotation.y += 0.01;
        }
        function loadTexture() {
                var loader;

                loader = new THREE.TextureLoader();
                loader.load(dataURI,
                        function(t) {
                                t.wrapS = THREE.RepeatWrapping;
                                t.wrapT = THREE.RepeatWrapping;
                                t.magFilter = THREE.NearestFilter;
                                t.minFilter = THREE.NearestFilter;
                                t.repeat.set(1/20, 1/20);

                                texture = t;

                                generalInit();
                        }
                );
        }

        loadTexture();
};

I've tried converting the vertex coords into a UV-ish 0-1 range by dividing by the size of the geometry's bounding box, but this does not produce the desired result. E.g. something of the form (here only shown for one of the return values):

generateSideWallUV: function(geometry, vertices, idxA, idxB, idxC, idxD) {
     var ax = vertices[idxA * 3];
     geometry.computeBoundingBox();
     var bb = geometry.boundingBox;
     var bbx = bb.max.x - bb.min.x;
     var bbz = bb.max.z - bb.min.z;
...
     return([
          new THREE.Vector2(ax / bbx, 1 - (az / bbz),
...
     ]);
}

}

This approach not working makes sense, because what we care about is the position of the vertex as a fraction of the length of the extruded path, not as a fraction of the bounding box. But I don't know and have not been able to look up how to get that information out of the geometry, vertices, or anything else documented in THREE.

Any help/pointers would be appreciated.

Correction: Dividing the vertex coords by the size of the bounding box also doesn't work in this case because when ExtrudeGeometry calls generateSideWallUV() the bounding box is always

min":{"x":null,"y":null,"z":null},"max":{"x":null,"y":null,"z":null}}

...which means anything/(max.x - min.x) will always evaluate as infinite.

So now I'm even more confused about what we can hope to accomplish in a custom UV generator.

If I'm missing something obvious (for example, if I shouldn't be using ExtrudeGeometry for this sort of thing at all) I'd love to be educated.

Answer 1

Answering my own question: Here's a link to a jsFiddle of the solution.

Here's the interesting parts. First, instead of using THREE.RepeatWrapping we use ClampToEdgeWrapping and get rid of the repeat setting:

t.wrapS = THREE.ClampToEdgeWrapping;
t.wrapT = THREE.ClampToEdgeWrapping;
//t.repeat.set(1 / 20, 1/20);

Then when we create the config object to pass to ExtrudeGeometry we set the steps to be exactly the number of faces we want. This is kinda a kludge because it seems like we shouldn't have to make a decision about the geometry of the object just to get our UVs right--there are plenty of cases where we might have bends/twists were we probably want more vertices to avoid folding/tearing/just looking wonky. But eh, I'm willing to worry about that later. Anyway, our updated extrudeCfg (in extrudeSurface() in the example) becomes:

extrudgeCfg = {
     steps:        20,
     bevelEnabled: false,
     extrudePath:  curve,
     UVGenerator:  uvGenerator,
};

And then finally we re-write our UVGenerator. And since we're now clamping the texture and using a smaller number of faces, we can do something painfully simple like:

generateSideWallUV: function(geometry, vertices, idxA, idxB, idxC, idxD) {
     return([
          new THREE.Vector2(0, 0),
          new THREE.Vector2(1, 0),
          new THREE.Vector2(1, 1),
          new THREE.Vector2(0, 1),
     ]);
}

...which is to say we just stretch a copy of the texture across each face (with the only complication being because the sides of the extruded geometry are a rectangle consisting of two triangles instead of a single quad).

Et voilà: